Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Create Round Button with Border IN UWP Windows 10 C#

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?

like image 250
yalematta Avatar asked May 15 '16 16:05

yalematta


People also ask

How do you make a button round in XAML?

To implement circular WPF Button use the following code. XAML: <Grid> <Button Width="50" Height="50" Content="Click me!"

How do you round the corners of a button in WPF?

You can achieve rounded corners on a button without having to write any XAML (other than a Style, once) and without having to replace the template or set/change any other properties. Just use an EventSetter in your style for the button's "Loaded" event and change it in code-behind.


1 Answers

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.

like image 119
Xam Avatar answered Sep 19 '22 16:09

Xam