本文通過設(shè)計一個RadioButton，分享下使用Blend繪制Path的方法。待繪制的RadioButton樣式如下文所示，如有更好的方法實現(xiàn)該樣式，歡迎交流。

實現(xiàn)效果

將要實現(xiàn)的RadioButton樣式如下圖，可以看出按鈕的筆尖和筆身的填充色，以及選中時右上方圓形的填充色一致，代表筆的顏色。

實現(xiàn)方式

筆身使用矩形，填充色綁定按鈕背景色；筆頭部分使用閉合的Path，其中筆尖的顏色同樣綁定按鈕背景色；右上方的圓形使用Ellipse，填充色同樣綁定按鈕背景色。

實現(xiàn)步驟

1.打開Blend，新建一個WPF項目；
2.選中MainWindow的Grid，點擊資產(chǎn)按鈕，找到RadioButton并選中，在Grid中拖動添加按鈕，如下圖所示：

3.找到屬性中的Width/Height屬性，修改為合適的值；點擊縮放按鈕，彈出的列表框中選中"適合選定內(nèi)容"，以方便編輯；
4.選中該RadioButton，右鍵選擇編輯模板-編輯副本，彈出的對話框使用合適的方式創(chuàng)建資源（本文采用默認(rèn)），設(shè)置完后點擊確定；
5.刪除templateRoot中的所有內(nèi)容，只保留根Grid；此時會報錯，先將xaml中的所有Trigger注釋掉即可；
6.點擊矩形按鈕，拖動添加矩形；屬性框中調(diào)整相關(guān)屬性，如下圖所示：

7.右鍵矩形按鈕，選擇線，添加一條直線，調(diào)整其屬性，如下圖：

8.選中筆按鈕，第一點添加在矩形左上角，第二點長按添加在直線左端點，長按拖動鼠標(biāo)可調(diào)整曲線形狀；同樣的方法添加右側(cè)的Path，如下圖所示：

9.點擊路徑選擇按鈕，使用鍵盤方向鍵及鼠標(biāo)對Path上的點進(jìn)行微調(diào)，如下圖；

選中直線及兩條曲線，右鍵路徑，生成復(fù)合路徑，連接兩點使Path閉合；
選擇pen按鈕，添加筆尖曲線，如下圖：

12.右鍵矩形按鈕，選擇橢圓形，在右上角添加一個橢圓，調(diào)整其屬性，使Width=Height;
13.為矩形、圓形、筆尖Path設(shè)置填充色，即Fill屬性，右鍵Fill屬性右側(cè)的方框，選擇創(chuàng)建數(shù)據(jù)綁定，將其綁定到RadioButton的Background屬性，圓形和筆尖同理。切換到RadioButton，修改其Background屬性，可以看到矩形背景色隨之變動，如下圖；

14.選中筆頭部分Path，選中其Fill屬性，選擇漸變畫筆，調(diào)整屬性值進(jìn)行漸變填充；
15.切換到xaml，調(diào)整自動生成的代碼，比如將Path路徑中的坐標(biāo)精確到小數(shù)點后一位。這樣自定義的RadioButton按鈕樣式就完成了，使用時可以再根據(jù)需求微調(diào)。

// 最終Style
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
 <Setter Property="Template">
  <Setter.Value>
   <ControlTemplate TargetType="{x:Type RadioButton}">
    <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
     <Rectangle Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Center" Height="37" Stroke="Black" VerticalAlignment="Bottom" Width="23.5" Margin="13,0"/>
     <Path Data="M16.4,0.76 L7.4,0.76 M7.7,0.7 C2,12.87 0.5,24.1 0.5,24.1 0.5,24.1 23.1,23.8 23.1,23.8 23.1,23.8 20.7,6.5 16,0.5" HorizontalAlignment="Center" Height="24.6" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="23.6" Margin="13,19.4,13,0">
      <Path.Fill>
       <LinearGradientBrush EndPoint="0.5,0.5" MappingMode="RelativeToBoundingBox" StartPoint="0,0.5" SpreadMethod="Reflect">
        <GradientStop Color="#FF626060"/>
        <GradientStop Color="#FFD6D3D3" Offset="0.873"/>
       </LinearGradientBrush>
      </Path.Fill>
     </Path>
     <Path Data="M21.1,19.3 C21.1,19.3 25.3,-5.5 28.2,19.2" Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Left" Height="12" Margin="21.2,8.3,0,0" Stretch="Fill" Stroke="Black" VerticalAlignment="Top" Width="8"/>
     <Ellipse Fill="{Binding Background, RelativeSource={RelativeSource TemplatedParent}}" HorizontalAlignment="Right" Height="3" Stroke="Black" VerticalAlignment="Top" Width="3" Margin="0,3,3,0" StrokeThickness="0"/>
    </Grid>
   </ControlTemplate>
  </Setter.Value>
 </Setter>
</Style>

Blend繪制Path

使用Blend繪制Path的方法參考官網(wǎng)。

繪制Path

Path由一系列的直線或曲線連接而成，可以使用Line、Pen、Pencil工具繪制Path，可以在工具條中找到它們。

繪制直線

使用Pen工具：點擊定義直線起始點，再次點擊定義直線終點；
使用Line工具：拖動添加直線，在直線終點位置釋放；

繪制曲線

使用Pen工具，點擊添加曲線起點，再次點擊并拖動可以添加點并調(diào)整兩點間的曲線形狀。若想閉合Path，點擊起點即可。

改變曲線形狀

使用路徑選擇工具，選中形狀，拖動曲線上的點以改變形狀。

移除Path上的線段

使用路徑選擇工具，選中Path上要刪除的線段，點擊刪除按鈕。

移除Path上的點

使用選擇工具選中Path，使用Pen工具點擊Path上的點即可刪除。

Path添加點

使用選擇工具選中Path，使用Pen工具在想要添加點的位置點擊。

繪制自由的形狀

使用Pencil工具進(jìn)行繪制。

以上就是c# wpf如何使用Blend工具繪制Control樣式的詳細(xì)內(nèi)容，更多關(guān)于c# 用Blend工具繪制Control樣式的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論