Использование ресурсов кнопок для различных состояний наведения

Question

Я создаю кнопку, используя таблицу спрайтов в xaml, перемещая значения кнопки translateX и translateY кнопки.

Что я хотел бы сделать, это изменить значение translateX и translateY при изменении состояния, я уверен, что это возможно в xaml, но при смешивании это позволит мне изменить эти значения x и y, так как они говорят, что они вычисляются значения (я не хочу, чтобы эти значения изменялись, просто менялись при наведении)

Вот пример текущей единственной кнопки состояния.

        <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>

Как мне это сделать? Мне нужно иметь возможность привязывать каждое состояние к свойству, которое будет включать значения перевода x и y, а также ImageSource.

Answer 1

вы должны работать с VisualStates , как показано ниже

В blend вы можете редактировать копию шаблона кнопки, и вы увидите все его VisualStates.

, поэтому вам просто нужно изменить Storyboard.TargetName и Storyboard.TargetProperty, чтобы они соответствовали вашему 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" />