Win10 UWP Fillet button

This article is about how to do the fillet button, we are in the UWP original buttons are rectangular, rounded radius No, so this article in a simple way to do the fillet button.

Our buttons need rounded corners, and no, actually do a very simple, turn the original button into a transparent background, and then use a rectangular fillet, this is the rounded button.

button background color Transparent, then we can use Background="{x:Null}" this time we do not have a background, you can use the rectangle round the button, and then write the display we need, of course, the above picture is what we do

                    <button.content>                        <Grid>                            <Viewbox>                                <Grid>                                    <Rectangle Fill= "Gray" radiusx= " radiusy" ="20" >                                    </Rectangle>                                    <StackPanel Orientation="Horizontal">                                        <!--<textblock text= "Sync"/>-->                                    </StackPanel>                                </Grid>                            </Viewbox>                        </Grid>                    </button.content>

This is the button general situation, there is the mouse movement on the button, the button is clicked these need to change.

This work is licensed under the Creative Commons Attribution-NonCommercial use-Share 4.0 International license agreement in the same way. Welcome to reprint, use, republish, but be sure to keep the article Attribution Lindesi (including Link: http://blog.csdn.net/lindexi_gd), not for commercial purposes, based on the modified works of this article must be issued with the same license. If you have any questions, please contact me.

Win10 UWP Fillet button