Windows 8 metro app XAML - make a custom button blinks when clicked? - xaml

Question

so from this free software, I could make myself my own metro button as seen below:
the icon is white though, so may not see it properly, and I put it in my Grid (written in XAML) here:
Still it is technically an image, so I made it into Button, here's a code of transformed image into button:
<Button x:Name="Button_CreateAccount" Content="" HorizontalAlignment="Center" Height="65" Margin="0" Style="{StaticResource Button_CreateAccount}" Width="65" Click="Button_CreateAccount_Clicked"/>
see I name it "Button_CreateAccount", add a Clicked event handler "Button_CreateAccount_Clicked", and using a custom style "{StaticResource Button_CreateAccount}"
it works as I expected, but unlike any other button, it won't blink when pressed and release the blink when released, maybe because it is technically an image. So I reckon I could programmatically make it "blinked" when being pressed by changing its style. Here's the unedited style added automatically by Blend in Visual Studio 2012:
<Style x:Key="Button_CreateAccount" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
<VisualState x:Name="PointerOver"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="PointerFocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
However, I do not speak XAML language :( I don't have any idea how to simply change the color of the background of the image once being pressed. Any help would be deeply appreciated, thanks!

Answer 1

First, you should make the image have a transparent Background and not a green background. After that do not use your style and change your button to be this
<Button x:Name="Button_CreateAccount" HorizontalAlignment="Center"
Height="65" Margin="0" Width="65" Click="Button_CreateAccount_Clicked"
Background="Green">
<Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
</Button>
From here you will start to see the color changing when you press. If you want to change what the color is then give the button a new style. The best way is to use Visual Studio or Blend and right click the Button (in design view or in the document outline) and select Edit Template -> Edit a copy...
Change the colors within the Pressed VisualState to change the color when the button is pressed.
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<SolidColorBrush Color="Blue"/>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>