本文通过设计一个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="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的办法参考官网。
绘制PathPath由一系列的直线或曲线连贯而成,能够应用Line、Pen、Pencil工具绘制Path,能够在工具条中找到它们。
绘制直线应用Pen工具:点击定义直线起始点,再次点击定义直线起点;应用Line工具:拖动增加直线,在直线起点地位开释;绘制曲线应用Pen工具,点击增加曲线终点,再次点击并拖动能够增加点并调整两点间的曲线形态。若想闭合Path,点击终点即可。
扭转曲线形态应用门路抉择工具,选中形态,拖动曲线上的点以扭转形态。
移除Path上的线段应用门路抉择工具,选中Path上要删除的线段,点击删除按钮。
移除Path上的点应用抉择工具选中Path,应用Pen工具点击Path上的点即可删除。
Path增加点应用抉择工具选中Path,应用Pen工具在想要增加点的地位点击。
绘制自在的形态应用Pencil工具进行绘制。