14

I am trying to create a round button, with a White Border and a Transparent Background (as the old AppBarButtons in Windows 8.1) in UWP Windows 10.

I have found several samples like these:

https://comentsys.wordpress.com/2015/05/23/windows-10-universal-windows-platform-custom-button/

https://social.msdn.microsoft.com/Forums/sqlserver/en-US/cda7a526-5e99-4d4a-a73c-0be4ce77f961/uwpwindows10-how-to-make-button-with-round-edges?forum=wpdevelop&prof=required

But the problem is with the Border. When I setting the BorderBrush to a certain color, it turns out the Border is for Button's "Rectangle".

Is there a way I can create a Round border for a button?

3
  • 2
    You can vote for out of the box support for rounded buttons here: UserVoice: Add CornerRadius property to Button
    – Liero
    Jul 28, 2017 at 11:51
  • 2
    Seems as though it becomes available in 1809 Oct 2018 build
    – 27k1
    Nov 29, 2018 at 12:30
  • @peterincumbria if you have the 1809 kit installed you can use it in earlier targetted versions by using this as the drop-in-replacement property for a Button: Windows10version1809:CornerRadius="90,90,90,90" Jul 26, 2019 at 21:50

6 Answers 6

13

Are you looking for something like this?

<StackPanel>
    <Button Background="Transparent">
        <StackPanel>
            <Border CornerRadius="10" 
                    Background="Transparent" 
                    BorderBrush="White" 
                    BorderThickness="3">
                <TextBlock Text="MyButton" 
                           Margin="10" 
                           Foreground="White"/>
            </Border>
        </StackPanel>
    </Button>
</StackPanel>
3
  • The only con about this is that the size of the circle is different if the number has less than two digits... Jul 26, 2017 at 6:04
  • @Cabuxa.Mapache you can make the button bigger Oct 21, 2018 at 16:41
  • FI, you can also set a different value for every corner.
    – Kevin VDF
    May 11, 2022 at 9:41
9

There are few ways to achieve this, one by using a style can look like this - remove BorderBrush from ContentPresenter and add an Ellipse with that brush. Sample in XAML:

<Page.Resources>
    <Style x:Key="CircleButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
        <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
        <Setter Property="Padding" Value="8,4,8,4"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="UseSystemFocusVisuals" Value="True"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="RootGrid">
                       <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <Storyboard>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="BorderCircle">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter" VerticalAlignment="Center" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        <Ellipse x:Name="BorderCircle" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Button Content="text" Width="50" Height="50" BorderBrush="Blue" Style="{StaticResource CircleButtonStyle}"/>
</Grid>

I've also made some changes in VisualStates so that it doesn't look weird once clicked/disabled.

3
  • This throws a xaml exception: "Cannot resolve TargetName BorderCircle"
    – TekGiant
    Jun 28, 2016 at 0:00
  • 1
    It should be <Ellipse Name="BorderCircle" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2"/>
    – TekGiant
    Jun 28, 2016 at 0:16
  • @TekGiant Right, I've somehow lost this during copying. Thanks.
    – Romasz
    Jun 28, 2016 at 4:16
8

I don't know if the OP is still interested in rounded corner buttons, but for sake of completeness I think it may be helpful for other users to point out, as the user peterincumbria said, that for the lastest build of Windows 10 (1809) there is a new property in the class Control: CornerRadius. So now the following code is enough:

<Button Content="DEMO"
        Background="Transparent"                    
        BorderThickness="1.0"
        BorderBrush="White"
        CornerRadius="10"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"/>

Put this inside a Grid and we have a rounded corner button in the middle of the Page.

0
4

With version 1809 and later (even if you're targeting an earlier version like me below) you can just do this for an example of a round button:

<Button
    Content="Stuff"
    Windows10version1809:CornerRadius="90,90,90,90"
    Height="64"
    Width="64">
</Button>

and voila!

enter image description here

Make sure to add this at the top of your XAML with the other xmlns stuff.

xmlns:Windows10version1809="http://schemas.microsoft.com/winfx/2006/xaml/presentation?IsApiContractPresent(Windows.Foundation.UniversalApiContract, 7)"
0
0

Another sample

<Style x:Key="ProfileButtonStyle" TargetType="Button">
        <Setter Property="Background" Value="{StaticResource AppBarHeaderBackground}"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="FontFamily" Value="Segoe UI"/>
        <Setter Property="Foreground" Value="{StaticResource SystemControlBackgroundAccentBrush}"></Setter>
        <Setter Property="FontSize" Value="9"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <StackPanel Orientation="Vertical">
                            <Grid  Margin="0,0,0,0" >
                                <Ellipse x:Name="ButtonShape" Height="40" Width="40" Fill="#FFFDFCFC" HorizontalAlignment="Center"
                                    Stroke="{StaticResource SystemControlBackgroundAccentBrush}" StrokeThickness="2" VerticalAlignment="Center"/>
                                <!--This glyph is the Contact (head and shoulders silhouette) glyph. -->
                                <TextBlock x:Name="Icon" Text="&#xE13D;" FontFamily="Segoe UI Symbol" FontSize="18" HorizontalAlignment="Center"
                                    VerticalAlignment="Center"/>
                            </Grid>
                            <TextBlock x:Name="ButtonContent" Text="{TemplateBinding Content}" HorizontalAlignment="Center"
                                FontFamily="Segoe UI" FontSize="12"/>
                        </StackPanel>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="{Binding Source={StaticResource SymbolThemeFontFamily}, Path=Color}" 
                                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="ButtonShape" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ButtonPressed">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" To="#eeeeee" 
                                                        Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" 
                                                        Storyboard.TargetName="ButtonEllipse" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Result

enter image description here

Or Create fully customizable cornerradius

//Create a template control xaml design

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP.Library2.Controls">
<Style  TargetType="local:CustomRoundedButton">
    <Setter Property="CornerRadius" Value="10,10,10,10"></Setter>
    <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
    <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
    <Setter Property="Padding" Value="8,4,8,4"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontWeight" Value="Normal"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:CustomRoundedButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" CornerRadius="{TemplateBinding CornerRadius}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <Storyboard>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <!--<Rectangle RadiusX="60" RadiusY="60" Fill="{TemplateBinding Background}" Margin="0,0,10,0" />-->
                    <Grid Background="{TemplateBinding Background}" CornerRadius="{TemplateBinding CornerRadius}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" ></Grid>
                    <ContentPresenter  CornerRadius="{TemplateBinding CornerRadius}" x:Name="ContentPresenter" 
                                       AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" 
                                       BorderThickness="{TemplateBinding BorderThickness}" 
                                       ContentTemplate="{TemplateBinding ContentTemplate}"
                                       ContentTransitions="{TemplateBinding ContentTransitions}" 
                                       Content="{TemplateBinding Content}" 
                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       Padding="{TemplateBinding Padding}" 
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

//Template control.cs

public sealed class CustomRoundedButton : Button
{
    private Grid _rootGrid = null;
    public CustomRoundedButton()
    {
        this.DefaultStyleKey = typeof(CustomRoundedButton);
    }
    protected override void OnApplyTemplate()
    {
        base.OnApplyTemplate();
        _rootGrid = GetTemplateChild("RootGrid") as Grid;
    }
    public CornerRadius CornerRadius
    {
        get { return (CornerRadius)GetValue(CornerRadiusProperty); }
        set { SetValue(CornerRadiusProperty, value); }
    }
    public static readonly DependencyProperty CornerRadiusProperty =
        DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(CustomRoundedButton), new PropertyMetadata(new CornerRadius(10,10,10,10)));

}

//Register to or merge dictionary from /Themes/Generic.xaml

<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="ms-appx:///UWP.Library2/Controls/CustomRoundedButton/CustomRoundedButton.xaml" />
      </ResourceDictionary.MergedDictionaries>
-1

The approach I just used was to simply add CornerRadius to the "RootGrid" grid in the Button template.

<Style TargetType="Button" x:Key="RoundedButton">
    ...
    <Grid x:Name="RootGrid" CornerRadius="10" Background="{TemplateBinding Background}"> 
    ...
</Style>
1
  • Nothing new here.
    – Kevin VDF
    May 11, 2022 at 9:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.