Change or Neutralize default button visual states

Question

I am defining a style for Buttons to have different from default behavior when user interacts with it. First lets assume I want to neutralize the visual statues of the button. I still want the button to be clickable, I just don't want the click or mouse over to be reflected in any way in the UI (Similar to how label behave).

I have came up with the following XAML

    <Style x:Key="MainGridButton" TargetType="Button" BasedOn="{StaticResource DefaultButtonStyle}">
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="FontSize" Value="60"/>
        <Setter Property="Padding" Value="45"/>
        <Setter Property="Background" Value="#D9B6C4  "/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button" >
                    <Grid>
                        <!-- Button Background -->
                        <Border
                                VerticalAlignment="{TemplateBinding VerticalAlignment}" 
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"                                 
                                Padding="{TemplateBinding Padding}" 
                                Background="{TemplateBinding Background}" 
                                >
                            <ContentPresenter Content="{TemplateBinding Content}"/>
                        </Border>
                        <!-- Visual States Removed -->
                        <VisualStateManager.VisualStateGroups/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

However, I am don't fully understand what is going on.

1. Why do I have the <Grid> tag? Does that mean that each button is made of root Grid instance, then containing a Border instance and ContentPresenter instance?
2. Do I need to repeat every property I use with the pattern PropertyName = "{TemplateBinding PropertyName}" ? I have noticed unless I do so, those properties disappear
3. Why defining Visual States is better then writing code that changes Button properties in response to Button events?

References used

https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.controltemplate?view=windows-app-sdk-1.6

https://learn.microsoft.com/en-us/windows/windows-app-sdk/api/winrt/microsoft.ui.xaml.controls.contentpresenter?view=windows-app-sdk-1.6

Answer 1

Hello,

Welcome to Microsoft Q&A!

Why do I have the <Grid> tag? Does that mean that each button is made of root Grid instance, then containing a Border instance and ContentPresenter instance?

Not entirely correct. As you should know, Windows Runtime UI objects will have only one FrameworkElement Class as its root element, it could be border, Grid or ContentPresenter and etc. In the code you shared, it's the Grid. The code you shared comes from the sample code for ControlTemplate. The sample code just shows an example about how to create a custom Button. It's not the default style of the Button. Actually, the default style of Button uses ContentPresenter as the root element. But no matter what's the root element, if it works for you, then it is the answer.

Do I need to repeat every property I use with the pattern PropertyName = "{TemplateBinding PropertyName}" ? I have noticed unless I do so, those properties disappear

That is based on your requirement. TemplateBinding is used to link the value of a property in a control template to the value of some other exposed property on the templated control. When propertyName and targetProperty to use the same property name. In this case, a control might define a property on itself and forward the property to an existing and intuitively named property of one of its component parts. For example, if you want to make sure the border has the same width as your defined for the button, you could use Width="{TemplateBinding Width}". If you want to customize the border, then you could set your own width value.

Please refer to https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/templatebinding-markup-extension for more details.

Why defining Visual States is better then writing code that changes Button properties in response to Button events?

The advantage of using the Visual State Manager to define appearance, rather than accessing visual elements directly from code-behind, is that you can control how visual elements react to different state entirely in XAML, which keeps all of the UI design in one location. Also, using XAML is much faster than using C# in code behind.

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.