locked
[UWP][Windows-10] How to make button with round edges RRS feed

  • Question

  • Hi,

    How to make button with round edges ?

    Thanks.

    Wednesday, October 21, 2015 9:22 AM

Answers

  • Hi TejD,

    I wonder if you want to know if it is possible to add the rectangle code in code behind to modify the Button template just like we use the code to modify the Button's Backgroundcolor. Yes, it is possible, but it should be complex, because when a page is loaded, all the controls have been rendered and initialized. If we want to change the Button's template we need to implement the function to re-render the control. So the easy way is to change the template by using xaml and Blend for Visual Studio is a good tool for us to edit the controls' style and template.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Friday, October 23, 2015 6:42 AM
    Owner

All replies

  • Hi TejD,

    Welcome to the Developing Universal Windows apps forum!

    In order to make Button with round edges, we need to Customize the Button's Template, in order to get the template of the Button, please try to right click the Button control-->"Edit Template"-->"Edit a Copy...", then it will show you the default style/template of the Button control:

    After that we can put the Rectangle with the RadiusX/RadiusY in the Button's template to implement the round edges, for more information, please try to refer to my following code:

     <Page.Resources>
            <Style x:Key="ButtonStyle1" 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="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" />
                                <ContentPresenter 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>
        </Page.Resources>
    
    
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Button Background="Red" Content="MyButton" Width="200" Height="100" Margin="229,323,0,297" Style="{StaticResource ButtonStyle1}"></Button>
        </Grid>

    The result:

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    • Edited by Amy PengMicrosoft employee, Owner Wednesday, October 21, 2015 9:53 AM
    • Marked as answer by TejD Wednesday, October 21, 2015 9:59 AM
    • Unmarked as answer by TejD Wednesday, October 21, 2015 10:01 AM
    • Proposed as answer by Osama Usmani Wednesday, October 21, 2015 10:20 AM
    Wednesday, October 21, 2015 9:52 AM
    Owner
  • Hi Amy,

    Thanks.

    one question regrading this or in general- As we want to give some special effect(other than normal behavior) to any control, cannot we just add the required code to get that effect.

    Say in above button eg to get special effect as round corner we just added that rectangle code. But for that we first get entire normal button code and then modify it and use it. Cant we just add that rectangle code / modify property something like that. Or this is the only way to do it (for any control).

    I am new and learning the UWP.

    Thanks.

    Wednesday, October 21, 2015 10:10 AM
  • Hi TejD,

    I wonder if you want to know if it is possible to add the rectangle code in code behind to modify the Button template just like we use the code to modify the Button's Backgroundcolor. Yes, it is possible, but it should be complex, because when a page is loaded, all the controls have been rendered and initialized. If we want to change the Button's template we need to implement the function to re-render the control. So the easy way is to change the template by using xaml and Blend for Visual Studio is a good tool for us to edit the controls' style and template.

    Best Regards,
    Amy Peng


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.



    Friday, October 23, 2015 6:42 AM
    Owner
  • Background not cropping

    I have tried using this solution but am getting a different result.  The background is not cropping.

    Wednesday, May 4, 2016 7:39 PM
  • Found my problem, using the latest blend (14.0.25123.00 Update 2) when I extracted the template I got:

    <

    Gridx:Name="RootGrid"Background="{TemplateBindingBackground}">

    And I noticed your example didn't have a background assigned on your grid.  Removing it from my project fixed the background.

    Wednesday, May 4, 2016 7:51 PM
  • I didn't understand how did you fix this issue? There's no Background in the solution above... from where did you remove the background?

    Sunday, May 15, 2016 4:38 PM
  • Resurrecting and old post but I just solved this by simply adding CornerRadius to the RootGrid in the template

    e.g. 

    <Grid x:Name="RootGrid" CornerRadius="10" >

    No issues with backgrounds or anything.

    Wednesday, January 2, 2019 5:56 PM