XAML中Button重绘为圆形的技巧

我们在XAML布局中为了使界面Metro化都会使用圆形代替默认的长方形,那么你知道XAML中Button怎么重绘为圆形吗?下面我们就跟着小编的步伐一起去看看吧。

代码如下:

<Style x:Key=”btnNext” TargetType=”Button”>
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”Button”>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name=”CommonStates”>
<VisualState x:Name=”Pressed”>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty=”(FrameworkElement.Margin)” Storyboard.TargetName=”rectangle”>
<DiscreteObjectKeyFrame KeyTime=”0″>
<DiscreteObjectKeyFrame.Value>
<Thickness>-3</Thickness>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”Normal”/>
<VisualState x:Name=”Disabled”/>
<VisualState x:Name=”MouseOver”/>
</VisualStateGroup>
<VisualStateGroup x:Name=”FocusStates”>
<VisualState x:Name=”Focused”/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name=”rectangle” RadiusY=”25″ RadiusX=”25″ Stroke=”Blue” StrokeThickness=”4″>
</Rectangle>
<ContentPresenter HorizontalAlignment=”{TemplateBinding HorizontalContentAlignment}” VerticalAlignment=”{TemplateBinding VerticalContentAlignment}”/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property=”Margin” Value=”5″/>
<Setter Property=”Width” Value=”50″/>
<Setter Property=”Height” Value=”50″/>
<Setter Property=”FontSize” Value=”120″/>
<Setter Property=”Foreground” Value=”White”/>
</Style>

-3

上文主要介绍的就是XAML中Button重绘为圆形的技巧,大家可以根据自己的需要再加以修改。当然如果你熟悉Bland的话可以直接使用它来绘制你需要的样式。