我决定尝试制作一个圆形按钮,因此在我的XAML中使用Expression Blend放置了一个按钮控件。然后通过选择“编辑控件部分(模板)”->“编辑副本”来创建它的模板。我试图设计它,使得按钮的左右两侧始终是完美的半圆,这样无论按钮增长多高或多宽,其角半径都会达到按钮宽度或长度的一半,取决于哪个更小。这样,如果按钮被拉伸得很高,顶部和底部将是完美的半圆,如果按钮被拉伸得很宽,左右则是完美的半圆。是否有可能做到这一点?
我决定尝试制作一个圆形按钮,因此在我的XAML中使用Expression Blend放置了一个按钮控件。然后通过选择“编辑控件部分(模板)”->“编辑副本”来创建它的模板。我试图设计它,使得按钮的左右两侧始终是完美的半圆,这样无论按钮增长多高或多宽,其角半径都会达到按钮宽度或长度的一半,取决于哪个更小。这样,如果按钮被拉伸得很高,顶部和底部将是完美的半圆,如果按钮被拉伸得很宽,左右则是完美的半圆。是否有可能做到这一点?
这很接近了,但是使它成为完美的圆边更难。 我通过制作圆形而不是带有圆形曲线的矩形来实现它。看看这是否有帮助:
<Style x:Key="roundButton"
TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.479*" />
<RowDefinition Height="0.521*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.147*" />
<ColumnDefinition Width="0.685*" />
<ColumnDefinition Width="0.168*" />
</Grid.ColumnDefinitions>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="FocusStates">
<vsm:VisualState x:Name="Unfocused" />
<vsm:VisualState x:Name="Focused" />
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="MouseOver" />
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Pressed" />
<vsm:VisualState x:Name="Disabled" />
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Path Margin="-2,8,2,8"
Grid.Column="1"
Grid.RowSpan="2"
Fill="{TemplateBinding Background}"
Stretch="Fill"
Stroke="#FF000000"
Data="M25.999998,0.5 L26.499998,0.55732149 L26.499998,0.50000316 L184.5,0.50000316 L184.5,0.55732256 L185,0.5 C199.0833,0.50000429 210.5,13.483747 210.5,29.500002 C210.5,45.516144 199.0833,58.500004 185,58.500004 L184.5,58.44268 L184.5,58.500004 L26.499998,58.500004 L26.499998,58.44268 L25.999998,58.500004 C11.916747,58.500004 0.5,45.516209 0.5,29.500002 C0.5,13.483672 11.916748,0.50000429 25.999998,0.5 z"
StrokeThickness="0" />
<ContentControl FontFamily="{TemplateBinding FontFamily}"
FontSize="{TemplateBinding FontSize}"
FontStyle="{TemplateBinding FontStyle}"
FontWeight="{TemplateBinding FontWeight}"
Foreground="#FFFFFFFF"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Grid.ColumnSpan="3"
Grid.RowSpan="2"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background"
Value="#FFFF0000" />
</Style>