Simple ImageButton for Windows 8 / WinRT

If you want to have a simple imagebutton in your Windows 8 app (XAML) you can use this style. All it does is show the image and a nice pressed style when the image is touched. It uses the PointerDownThemeAnimation included with the WinRT framework.

If you're looking for a more complex variant, with multiple images to show a pressed state, have a look athttp://winrtxamltoolkit.codeplex.com/

Include this in your resources (App.xaml):

<!--Image Button with simple pressed state -->
            <Style x:Key="ImageButtonStyle" TargetType="Button">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <PointerDownThemeAnimation TargetName="Border"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Disabled">
                                        </VisualState>
                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                        <VisualState x:Name="PointerFocused" />
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Border x:Name="Border">
                                    <ContentPresenter x:Name="ContentPresenter"
                                              Content=""
                                              ContentTransitions=""
                                              ContentTemplate=""
                                              HorizontalAlignment=""
                                              VerticalAlignment="" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Usage: