Clickable image in Windows 8.1 RT XAML - windows

Question

I'd like to make an image button. With a image for the default status and a different image for the pressed status. With no other pressed highlights.
How can I implement that?

Answer 1

You can achieve that by defining your own style for Button control. I'll show you my example.
First, I have added two images to my project.
Normal.png
Pressed.png
Then, I have definied new style in App.xaml file based on default Button style.
<Application.Resources>
<ImageBrush x:Name="ImageButtonNormal" ImageSource="Assets/ImageButton/Normal.png" />
<ImageBrush x:Name="ImageButtonPressed" ImageSource="Assets/ImageButton/Pressed.png" />
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="Grid" Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ImageButtonPressed}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border"
Background="{StaticResource ImageButtonNormal}" >
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
Foreground="{TemplateBinding Foreground}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
As you can see, I have definied 2 ImageBrush objects for 2 button states. The look of the button is defined as Border with some content. We want to change the background of the Border. VisualStateGroups will handle this. I have added Storyborad in VisualState named Pressed to change the background of the Border just by switching ImageBrush. Simple!
The last thing you have to do is to apply the new style to your Button in XAML. I did it in MainPage.xaml.
<Button Style="{StaticResource ImageButtonStyle}" />

Answer 2

You can user "PointerPressed" and "PointerReleased" events of the Image control to do that and change the Source property in each one. This will make Image flickers, so you can solve this problem by checking this Link