WPF -- 使用Blend工具繪製Control樣式

本文經過設計一個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上的點進行微調，以下圖；

10. 選中直線及兩條曲線，右鍵路徑，生成複合路徑，鏈接兩點使Path閉合；
11. 選擇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，能夠在工具條中找到它們。

繪製直線

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

繪製曲線

使用Pen工具，點擊添加曲線起點，再次點擊並拖動能夠添加點並調整兩點間的曲線形狀。若想閉合Path，點擊起點便可。

改變曲線形狀

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

移除Path上的線段

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

移除Path上的點

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

Path添加點

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

繪製自由的形狀

使用Pencil工具進行繪製。