WPF 按钮模板
WPF Button template
我正在尝试学习自定义 WPF Buttons
。
之前我使用图像作为 Button
的 Content
,但我想将其更改为基于 XAML
的对象。
我正在尝试将 Path
放入 Button
的 Content
中,但无法正确处理。
我的版本低于
<Window.Resources>
<Style x:Key="MyStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle RadiusY="2" RadiusX="2" Stroke="Black" Fill="Gray" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0" Visibility="Visible"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22" />
<Setter Property="Width" Value="22" />
</Style>
</Window.Resources>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Style="{DynamicResource MyStyle}">
<Path Fill="Black" RenderTransformOrigin="0.375,0.375" >
<Path.RenderTransform>
<ScaleTransform ScaleX="0.375" ScaleY="0.375" CenterX="0" CenterY="0"/>
</Path.RenderTransform>
<Path.Data>
<PathGeometry Figures="M22,18L22,8 18,8 18,18 8,18 8,22 18,22 18,32 22,32 22,22 32,22 32,18z" />
</Path.Data>
</Path>
</Button>
但结果不太好,我无法让 ScaleTransform 正常工作:
我正在尝试获得这种结果:
不确定,transorm - 是你所需要的,如果你只是想要居中交叉 - 这是更简单的解决方案(没有任何变化,除了按钮中的路径):
<Path
Fill="Black"
Stretch="Uniform"
Margin="7"
Data="M22,18L22,8 18,8 18,18 8,18 8,22 18,22 18,32 22,32 22,22 32,22 32,18z"
/>
实际上是拉伸 属性 控制如何调整形状大小以填充其分配的 space:MSDN
我正在尝试学习自定义 WPF Buttons
。
之前我使用图像作为 Button
的 Content
,但我想将其更改为基于 XAML
的对象。
我正在尝试将 Path
放入 Button
的 Content
中,但无法正确处理。
我的版本低于
<Window.Resources>
<Style x:Key="MyStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Rectangle RadiusY="2" RadiusX="2" Stroke="Black" Fill="Gray" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="0,0,0,0" Visibility="Visible"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="22" />
<Setter Property="Width" Value="22" />
</Style>
</Window.Resources>
<Button VerticalAlignment="Center" HorizontalAlignment="Center" Style="{DynamicResource MyStyle}">
<Path Fill="Black" RenderTransformOrigin="0.375,0.375" >
<Path.RenderTransform>
<ScaleTransform ScaleX="0.375" ScaleY="0.375" CenterX="0" CenterY="0"/>
</Path.RenderTransform>
<Path.Data>
<PathGeometry Figures="M22,18L22,8 18,8 18,18 8,18 8,22 18,22 18,32 22,32 22,22 32,22 32,18z" />
</Path.Data>
</Path>
</Button>
但结果不太好,我无法让 ScaleTransform 正常工作:
我正在尝试获得这种结果:
不确定,transorm - 是你所需要的,如果你只是想要居中交叉 - 这是更简单的解决方案(没有任何变化,除了按钮中的路径):
<Path
Fill="Black"
Stretch="Uniform"
Margin="7"
Data="M22,18L22,8 18,8 18,18 8,18 8,22 18,22 18,32 22,32 22,22 32,22 32,18z"
/>
实际上是拉伸 属性 控制如何调整形状大小以填充其分配的 space:MSDN