Home/ Questions/Q 6201417
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:33:00+00:00

I’m creating a button using a spritesheet in xaml by repositioning the translateX and

  • 0

I’m creating a button using a spritesheet in xaml by repositioning the translateX and translateY values of the button.

What I would like to do is change the translateX and translateY value on the state change, I’m sure this is possible in xaml but under blend it would allow me to change those x and y values as it says they are computed values (i don’t want those values tweening, just changing upon hover)

Here’s the example of the current single state button.

        <Button Content="test" HorizontalAlignment="Center" Height="57" VerticalAlignment="Center" Width="294" d:LayoutOverrides="VerticalAlignment">
            <Button.Resources>
                <Style x:Key="ButtonStyle1" TargetType="Button">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Rectangle x:Name="R" Opacity="1" StrokeThickness="0" Visibility="Visible">
                                        <Rectangle.Fill>
                                            <ImageBrush ImageSource="/Project;component/wp7_buttons.png" Stretch="None" AlignmentX="Left" AlignmentY="Top" >
                                                <ImageBrush.Transform>
                                                    <CompositeTransform TranslateX="-558" TranslateY="0"/>
                                                </ImageBrush.Transform>
                                            </ImageBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Button.Resources>
            <Button.Style>
                <StaticResource ResourceKey="ButtonStyle1"/>
            </Button.Style>
        </Button>

How do I do this? I need to be able to bind each state to a property which will include the x and y translate values and also the ImageSource.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    you have to work with VisualStates like below

    in blend you cand edit a button template copy and you will see all its VisualStates.

    so you just have to change Storyboard.TargetName and Storyboard.TargetProperty to match with your ImageBrush CompositeTransform 🙂

    <ControlTemplate TargetType="Button">
    <Grid x:Name="Root">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
                <VisualStateGroup.Transitions>
                    <VisualTransition GeneratedDuration="0:0:0.1" />
                    <VisualTransition To="Pressed" />
                    <VisualTransition From="Pressed" />
                </VisualStateGroup.Transitions>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver">
                    <Storyboard>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0" />
                        <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Pressed">
                    <Storyboard>
                        <DoubleAnimation Duration="0" Storyboard.TargetName="NormalElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="0.25" />
                        <DoubleAnimation Duration="0" Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="(FrameworkElement.Opacity)" To="1" />
    • 0