michielpost.nl

Simple ImageButton for Windows 8 / WinRT

30-07-2012

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 at http://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="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

Usage:

<Button Style="{StaticResource ImageButtonStyle}">
   <Image Source="image.png" />
</Button>

Comments


Stefan 29-05-2015
How do you put a text over the image?


The abitliy to think like that shows you're an expert 12-11-2015
The abitliy to think like that shows you're an expert


Kudos! What a neat way of thikinng about it. http://oozatsct.com [url=http://bfkjhldsunf.com]bfkjhldsunf[/url] [link=http://iqmcvnu.com]iqmcvnu[/link] 14-11-2015
Kudos! What a neat way of thikinng about it. http://oozatsct.com [url=http://bfkjhldsunf.com]bfkjhldsunf[/url] [link=http://iqmcvnu.com]iqmcvnu[/link]


New Comment

Name
E-mail (not published)
Comment
Enter the code shown: