WinRT XAML Button Style with no hover or clicked states

Question

I am curious what is the easiest way to prevent a XAML button from having a rollover and tapped state?

From what I understand the options I can chooose from are:

1. Use a VisualStateManager
2. Programmatically prevent interaction

In WPF I could use a ControlTemplate.Trigger, but WinRT does not expose this element. Of course, following the MVVM pattern I would like to do this in pure XAML.

Here is my button:

 <Button Style="{StaticResource FooBarIcon}" />

and the coresponding style:

    <Style x:Key="AppIconStepThreeButtonStyle" TargetType="ButtonBase" >
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ButtonBase">
                <Button Background="Transparent">
                    <Button.Content>
                        <Image Margin="0"  Width="40" Source="../Assets/buttonIcon.png" />
                    </Button.Content>
                </Button>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

What happens with this code is on tap or rollover, the background becomes white. I'd like to keep it transparent without defining a VisualState.

Is this possible? I am hoping for a property or setting that accomplishes this in one line of code.

Also I suppose I could emulate a button but using a Rectangle with an ImageBrush fill, but in the spirit of keeping things semantically correct I'd be great to keep it as a xaml button element.

Thanks

Answer 1

You could check if the ImageButton control from WinRT XAML Toolkit is a better solution for you. Currently your template is all wrong since you are replacing it with another Button that is using a default template. You can extract the default template by right clicking your button in the design view - either in Blend or VS, or in the Document Outline panel. This is the default template:

<ControlTemplate
    TargetType="Button">
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup
                x:Name="CommonStates">
                <VisualState
                    x:Name="Normal" />
                <VisualState
                    x:Name="PointerOver">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Background"
                            Storyboard.TargetName="Border">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonPointerOverBackgroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Foreground"
                            Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonPointerOverForegroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState
                    x:Name="Pressed">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Background"
                            Storyboard.TargetName="Border">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonPressedBackgroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Foreground"
                            Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonPressedForegroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState
                    x:Name="Disabled">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Background"
                            Storyboard.TargetName="Border">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonDisabledBackgroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="BorderBrush"
                            Storyboard.TargetName="Border">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonDisabledBorderThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames
                            Storyboard.TargetProperty="Foreground"
                            Storyboard.TargetName="ContentPresenter">
                            <DiscreteObjectKeyFrame
                                KeyTime="0"
                                Value="{ThemeResource ButtonDisabledForegroundThemeBrush}" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
            <VisualStateGroup
                x:Name="FocusStates">
                <VisualState
                    x:Name="Focused">
                    <Storyboard>
                        <DoubleAnimation
                            Duration="0"
                            To="1"
                            Storyboard.TargetProperty="Opacity"
                            Storyboard.TargetName="FocusVisualWhite" />
                        <DoubleAnimation
                            Duration="0"
                            To="1"
                            Storyboard.TargetProperty="Opacity"
                            Storyboard.TargetName="FocusVisualBlack" />
                    </Storyboard>
                </VisualState>
                <VisualState
                    x:Name="Unfocused" />
                <VisualState
                    x:Name="PointerFocused" />
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Border
            x:Name="Border"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Background="{TemplateBinding Background}"
            Margin="3">
            <ContentPresenter
                x:Name="ContentPresenter"
                AutomationProperties.AccessibilityView="Raw"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                ContentTransitions="{TemplateBinding ContentTransitions}"
                Content="{TemplateBinding Content}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Margin="{TemplateBinding Padding}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Border>
        <Rectangle
            x:Name="FocusVisualWhite"
            IsHitTestVisible="False"
            Opacity="0"
            StrokeDashOffset="1.5"
            StrokeEndLineCap="Square"
            Stroke="{ThemeResource FocusVisualWhiteStrokeThemeBrush}"
            StrokeDashArray="1,1" />
        <Rectangle
            x:Name="FocusVisualBlack"
            IsHitTestVisible="False"
            Opacity="0"
            StrokeDashOffset="0.5"
            StrokeEndLineCap="Square"
            Stroke="{ThemeResource FocusVisualBlackStrokeThemeBrush}"
            StrokeDashArray="1,1" />
    </Grid>
</ControlTemplate>

You can remove the Storyboards from the "PointerOver" and "Pressed" states in the VSM and you should get the desired effects.