乐趣区

关于WPF:WPF-使用Blend工具绘制Control样式

jiezi

本文通过设计一个 RadioButton，分享下应用 Blend 绘制 Path 的办法。待绘制的 RadioButton 款式如下文所示，如有更好的办法实现该款式，欢送交换。

实现成果

将要实现的 RadioButton 款式如下图，能够看出按钮的笔尖和笔身的填充色，以及选中时右上方圆形的填充色统一，代表笔的色彩。

实现形式

笔身应用矩形，填充色绑定按钮背景色；笔头局部应用闭合的 Path，其中笔尖的色彩同样绑定按钮背景色；右上方的圆形应用 Ellipse，填充色同样绑定按钮背景色。

实现步骤
  1. 关上 Blend，新建一个 WPF 我的项目；
  2. 选中 MainWindow 的 Grid，点击资产按钮，找到 RadioButton 并选中，在 Grid 中拖动增加按钮，如下图所示：

  1. 找到属性中的 Width/Height 属性，批改为适合的值；点击缩放按钮，弹出的列表框中选中 ” 适宜选定内容 ”，以不便编辑；
  2. 选中该 RadioButton，右键抉择编辑模板 - 编辑正本，弹出的对话框应用适合的形式创立资源（本文采纳默认），设置完后点击确定；
  3. 删除 templateRoot 中的所有内容，只保留根 Grid；此时会报错，先将 xaml 中的所有 Trigger 正文掉即可；
  4. 点击矩形按钮，拖动增加矩形；属性框中调整相干属性，如下图所示：

  1. 右键矩形按钮，抉择线，增加一条直线，调整其属性，如下图：

  1. 选中笔按钮，第一点增加在矩形左上角，第二点长按增加在直线左端点，长按拖动鼠标可调整曲线形态；同样的办法增加右侧的 Path，如下图所示：

  1. 点击门路抉择按钮，应用键盘方向键及鼠标对 Path 上的点进行微调，如下图；

  1. 选中直线及两条曲线，右键门路，生成复合门路，连贯两点使 Path 闭合；
  2. 抉择 pen 按钮，增加笔尖曲线，如下图：

  1. 右键矩形按钮，抉择椭圆形，在右上角增加一个椭圆，调整其属性，使 Width=Height;
  2. 为矩形、圆形、笔尖 Path 设置填充色，即 Fill 属性，右键 Fill 属性右侧的方框，抉择创立数据绑定，将其绑定到 RadioButton 的 Background 属性，圆形和笔尖同理。切换到 RadioButton，批改其 Background 属性，能够看到矩形背景色随之变动，如下图；

  1. 选中笔头局部 Path，选中其 Fill 属性，抉择突变画笔，调整属性值进行突变填充；
  2. 切换到 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 工具进行绘制。

退出移动版