Create Round Button with Border IN UWP Windows 10 C#

yalematta picture yalematta · May 15, 2016 · Viewed 14.7k times · Source

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?

Answer

Justin Lam picture Justin Lam · May 15, 2016

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>