WinRT XAML Button Style with no hover or clicked states - xaml

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:
Use a VisualStateManager
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.