本文通過設計一個RadioButton，分享下使用Blend繪制Path的方法，待繪制的RadioButton樣式如下文所示，如有更好的方法實作該樣式，歡迎交流，
實作效果
將要實作的RadioButton樣式如下圖，可以看出按鈕的筆尖和筆身的填充色，以及選中時右上方圓形的填充色一致，代表筆的顏色，
實作方式
筆身使用矩形，填充色系結按鈕背景色；筆頭部分使用閉合的Path，其中筆尖的顏色同樣系結按鈕背景色；右上方的圓形使用Ellipse，填充色同樣系結按鈕背景色，
實作步驟
- 打開Blend，新建一個WPF專案；
- 選中MainWindow的Grid，點擊資產按鈕，找到RadioButton并選中，在Grid中拖動添加按鈕，如下圖所示：
- 找到屬性中的Width/Height屬性，修改為合適的值；點擊縮放按鈕，彈出的串列框中選中"適合選定內容"，以方便編輯；
- 選中該RadioButton，右鍵選擇編輯模板-編輯副本，彈出的對話框使用合適的方式創建資源（本文采用默認），設定完后點擊確定；
- 洗掉templateRoot中的所有內容，只保留根Grid；此時會報錯，先將xaml中的所有Trigger注釋掉即可；
- 點擊矩形按鈕，拖動添加矩形；屬性框中調整相關屬性，如下圖所示：
- 右鍵矩形按鈕，選擇線，添加一條直線，調整其屬性，如下圖：
- 選中筆按鈕，第一點添加在矩形左上角，第二點長按添加在直線左端點，長按拖動滑鼠可調整曲線形狀；同樣的方法添加右側的Path，如下圖所示：
- 點擊路徑選擇按鈕，使用鍵盤方向鍵及滑鼠對Path上的點進行微調，如下圖；
- 選中直線及兩條曲線，右鍵路徑，生成復合路徑，連接兩點使Path閉合；
- 選擇pen按鈕，添加筆尖曲線，如下圖：
- 右鍵矩形按鈕，選擇橢圓形，在右上角添加一個橢圓，調整其屬性，使Width=Height;
- 為矩形、圓形、筆尖Path設定填充色，即Fill屬性，右鍵Fill屬性右側的方框，選擇創建資料系結，將其系結到RadioButton的Background屬性，圓形和筆尖同理，切換到RadioButton，修改其Background屬性，可以看到矩形背景色隨之變動，如下圖；
- 選中筆頭部分Path，選中其Fill屬性，選擇漸變畫筆，調整屬性值進行漸變填充；
- 切換到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="https://www.cnblogs.com/louzixl/archive/2021/03/01/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="https://www.cnblogs.com/louzixl/archive/2021/03/01/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工具進行繪制，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/265008.html
標籤：.NET技术