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

頭號碼甲 2021-04-07

展開全文

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

實現(xiàn)效果

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

實現(xiàn)方式

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

實現(xiàn)步驟

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

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

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

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

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

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

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

選中筆頭部分Path，選中其Fill屬性，選擇漸變畫筆，調(diào)整屬性值進(jìn)行漸變填充；
切換到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>