[英]how to set Data property for button style in wpf?
In this example property: 在此示例属性中:
Data= M150.655, 39.109L10.407, 53.785L0.602, 1.309l158.026-0.806L150.655, 39.109z
How does this Data
property work and use these 5 values? 此
Data
属性如何工作并使用这5个值?
<Style x:Key="ButtonStyler"
TargetType="{x:Type Button}">
<Setter Property="Cursor"
Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type Button}">
<Grid>
<Path x:Name="ButtonBG"
Fill="Lime"
Stroke="#000000"
StrokeThickness="3"
Data="M150.655,39.109L10.407,53.785L0.602,1.309l158.026-0.806L150.655,39.109z" />
<ContentPresenter x:Name="ContentSite"
Margin="20,10,20,10"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
TextBlock.FontFamily="Comic Sans MS"
TextBlock.FontSize="20">
<ContentPresenter.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-5" />
<ScaleTransform ScaleX="1.5"
ScaleY="1" />
<TranslateTransform X="-35"
Y="0" />
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="Path.Fill"
Value="yellow"
TargetName="ButtonBG" />
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="Path.Fill"
Value="lime"
TargetName="ButtonBG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver"
Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-5" />
<TranslateTransform X="-5"
Y="0" />
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsPressed"
Value="true">
<Setter Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<TransformGroup.Children>
<TransformCollection>
<RotateTransform Angle="-5" />
<TranslateTransform X="-5"
Y="5" />
</TransformCollection>
</TransformGroup.Children>
</TransformGroup>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
The Data is a Property of the Path object in your template... 数据是模板中Path对象的属性...
http://msdn.microsoft.com/en-us/library/ms745814.aspx http://msdn.microsoft.com/en-us/library/ms745814.aspx
edit: 编辑:
From the msdn doco: The Data attribute string begins with the "moveto" command, indicated by M, which establishes a start point for the path in the coordinate system of the Canvas. 在msdn doco中:数据属性字符串以M指示的“ moveto”命令开头,该命令为Canvas坐标系中的路径建立起点。 Path data parameters are case-sensitive.
路径数据参数区分大小写。 The capital M indicates an absolute location for the new current point.
大写字母M表示新当前点的绝对位置。 A lowercase m would indicate relative coordinates.
小写的m表示相对坐标。 The first segment is a cubic Bezier curve beginning at (100,200) and ending at (400,175), drawn using the two control points (100,25) and (400,350).
第一段是三次贝塞尔曲线,开始于(100,200),结束于(400,175),使用两个控制点(100,25)和(400,350)绘制。 This segment is indicated by the C command in the Data attribute string.
此段由Data属性字符串中的C命令指示。 Again, the capital C indicates an absolute path;
同样,大写字母C表示绝对路径; the lowercase c would indicate a relative path.
小写字母c表示相对路径。
The second segment begins with an absolute horizontal "lineto" command H, which specifies a line drawn from the preceding subpath's endpoint (400,175) to a new endpoint (280,175). 第二段以绝对水平“ lineto”命令H开头,该命令指定从先前子路径的端点(400,175)到新端点(280,175)绘制的线。 Because it is a horizontal "lineto" command, the value specified is an x-coordinate.
因为它是水平的“ lineto”命令,所以指定的值是x坐标。
For the complete path syntax, see the Data reference and How to : Create a Shape by Using a PathGeometry . 有关完整的路径语法,请参见数据参考和如何:使用PathGeometry创建形状 。
Hope this helps :) 希望这可以帮助 :)
Ian 伊恩
与形状和路径几何相关联的数据属性不会直接进入其中,首先只需阅读路径几何的基础知识,然后您就可以了解任何形状的数据属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.