CODEWITHSUNDEEP
wpfimagexamlrotation
Flemming Jensen
Flemming Jensen

Reputation: 61

How to rotate button image on pressed using style in WPF

I am implementeing a design for a WPF application for the moment.

I have on one of the pages a numeric keypad with the numbers 0 - 9 sitting inside a grid. In order to not inline style every button I have created a style for this button type.

The button contains two items: An Image and a TextBlock.

The Image is a small Svg image that looks like a metal phonebooth button. The TextBlock is just the numbers 0..9 for each button.

Now I am trying to get the button to rotate its image 180 degrees when the button is pressed down. I can get the whole button to rotate on MouseOver but not the Image inside only...

Here is the Style where the whole button rotates on MouseOver:

        <Style x:Key="NumericKeypadButton" TargetType="Button">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid>
                            <Border Background="{TemplateBinding Background}">
                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                            </Border>
                            <Image x:Name="MyRotation" Stretch="Fill" Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}" RenderTransformOrigin=".5,.5">
                                <Image.RenderTransform>
                                    <RotateTransform Angle="0" />
                                </Image.RenderTransform>
                            </Image>
                            <TextBlock HorizontalAlignment="Center" Margin="0,8,0,0" Style="{DynamicResource Lato}" FontSize="80" Text="1" />
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="RenderTransform">
                        <Setter.Value>
                            <RotateTransform Angle="180" />
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

Upvotes: 0

Views: 2976

Answers (1)

Clemens
Clemens

Reputation: 128061

You could do the rotation in the "Pressed" VisualState:

<Style x:Key="NumericKeypadButton" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="BorderBrush" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>

                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Disabled"/>
                            <VisualState x:Name="MouseOver"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <DoubleAnimation
                                        Storyboard.TargetName="rotation" 
                                        Storyboard.TargetProperty="Angle"
                                        To="180" Duration="0"/>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter
                            HorizontalAlignment="Center" 
                            VerticalAlignment="Center" />
                    </Border>
                    <Image Stretch="Fill"
                        Source="{svgc:SvgImage Source=/Resources/Svg/keypad_key.svg}"
                        RenderTransformOrigin=".5,.5">
                        <Image.RenderTransform>
                            <RotateTransform x:Name="rotation" Angle="0" />
                        </Image.RenderTransform>
                    </Image>
                    <TextBlock HorizontalAlignment="Center"
                               Margin="0,8,0,0" FontSize="80" Text="1" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Related Questions