Question

我正在使用xaml中的spritesheet创建一个按钮，重新定位按钮的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 ，如下所示

在混合中你可以编辑一个按钮模板副本，你会看到它的所有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" />

将Button资源用于不同的悬停状态

1 个答案: