Rounded corner for ToggleButton in UWP - xaml

Question

<Style x:Key="tests" TargetType="{x:Type RadioButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ToggleButton
Background="{Binding Background,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay}"
IsChecked="{Binding IsChecked,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay}"
Content="{Binding Content,
RelativeSource={RelativeSource TemplatedParent},
Mode=TwoWay}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am using above code to customize toggle button functionality, but i want to show the toggle button as rounded corner.

Answer 1

To get a toggle button with rounded corners you can do the following :
Right click on the button and select Edit Template > Create a copy
Give your style a name
Search for the Border template in the resource code and set the corner radius to 33 (CornerRadius="33")
Hope this helps..!

Answer 2

In recent versions of UWP, ToggleButton exposes a CornerRadius property (thanks #Clint Rutkas).
Otherwise:
<ToggleButton
Background="Transparent"
FontSize="16"
IsChecked="{Binding IsEnabled, Mode=TwoWay}"
IsTabStop="False"
ToolTipService.ToolTip="Press to enable/disable metronome (Space)">
<ToggleButton.KeyboardAccelerators>
<KeyboardAccelerator Key="Space" />
<KeyboardAccelerator Key="P" />
</ToggleButton.KeyboardAccelerators>
<ToggleButton.Resources>
<x:String x:Key="Play"></x:String>
<x:String x:Key="Stop"></x:String>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<Border
x:Name="border"
Width="56"
Height="56"
Padding="2"
Background="{TemplateBinding Background}"
BorderBrush="{ThemeResource ButtonBorderThemeBrush}"
BorderThickness="1"
CornerRadius="28">
<FontIcon x:Name="icon" Glyph="{StaticResource Play}" />
</Border>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState>
<VisualState.StateTriggers>
<StateTrigger IsActive="{Binding IsEnabled}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="icon.Glyph" Value="{StaticResource Stop}" />
<Setter Target="icon.FontSize" Value="30" />
<Setter
Target="icon.Foreground"
Value="{ThemeResource SystemColorHighlightTextColor}" />
<Setter
Target="border.Background"
Value="{ThemeResource SystemColorHighlightColor}" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Resources>
</ToggleButton>