使用不同悬停状态的按钮资源

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工作就像在混合下面

您CAND编辑按钮模板拷贝，你会看到它的所有VisualStates。

，所以你只需要改变Storyboard.TargetName和Storyboard.TargetProperty，以配合您的图像刷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" />