Rounded corner for ToggleButton in UWP

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 :

1. Right click on the button and select Edit Template > Create a copy
2. Give your style a name
3. 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">&#xF5B0;</x:String>
    <x:String x:Key="Stop">&#xE73C;</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>