c# wpf如何使用Blend工具繪製Control樣式

2021-03-15 13:01:41

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

實現效果

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

實現方式

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

實現步驟

1.開啟Blend，新建一個WPF專案；
2.選中MainWindow的Grid，點選資產按鈕，找到RadioButton並選中，在Grid中拖動新增按鈕，如下圖所示：

3.找到屬性中的Width/Height屬性，修改為合適的值；點選縮放按鈕，彈出的列表框中選中"適合選定內容"，以方便編輯；
4.選中該RadioButton，右鍵選擇編輯模板-編輯副本，彈出的對話方塊使用合適的方式建立資源（本文采用預設），設定完後點選確定；
5.刪除templateRoot中的所有內容，只保留根Grid；此時會報錯，先將xaml中的所有Trigger註釋掉即可；
6.點選矩形按鈕，拖動新增矩形；屬性框中調整相關屬性，如下圖所示：

7.右鍵矩形按鈕，選擇線，新增一條直線，調整其屬性，如下圖：

8.選中筆按鈕，第一點新增在矩形左上角，第二點長按新增在直線左端點，長按拖動滑鼠可調整曲線形狀；同樣的方法新增右側的Path，如下圖所示：

9.點選路徑選擇按鈕，使用鍵盤方向鍵及滑鼠對Path上的點進行微調，如下圖；

選中直線及兩條曲線，右鍵路徑，生成複合路徑，連線兩點使Path閉合；
選擇pen按鈕，新增筆尖曲線，如下圖：

12.右鍵矩形按鈕，選擇橢圓形，在右上角新增一個橢圓，調整其屬性，使Width=Height;
13.為矩形、圓形、筆尖Path設定填充色，即Fill屬性，右鍵Fill屬性右側的方框，選擇建立資料繫結，將其繫結到RadioButton的Background屬性，圓形和筆尖同理。切換到RadioButton，修改其Background屬性，可以看到矩形背景色隨之變動，如下圖；

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

// 最終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的方法參考官網。

繪製Path

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

繪製直線

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

繪製曲線

使用Pen工具，點選新增曲線起點，再次點選並拖動可以新增點並調整兩點間的曲線形狀。若想閉合Path，點選起點即可。

改變曲線形狀

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

移除Path上的線段

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

移除Path上的點

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

Path新增點

使用選擇工具選中Path，使用Pen工具在想要新增點的位置點選。

繪製自由的形狀

使用Pencil工具進行繪製。

以上就是c# wpf如何使用Blend工具繪製Control樣式的詳細內容，更多關於c# 用Blend工具繪製Control樣式的資料請關注it145.com其它相關文章！