Method and skill of redrawing button into circle in Xaml

Time:2021-1-24

When using XAML layout, sometimes in order to make the interface metro, some buttons need to use the circle instead of the default rectangle. The following button styles can solve this problem and can be modified according to your own needs. Of course, if you are familiar with bland, you can directly use it to draw the style you need, but is it faster to paste the code?

Copy code

The code is as follows:

<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>