Utilisation des ressources Button pour différents états de survol

Question

Je crée un bouton à l'aide d'une feuille de calcul dans xaml en repositionnant les valeurs translateX et translateY du bouton. Ce que je voudrais faire est changer la valeur translateX et translateY sur le changement d'état, je suis sûr que c'est possible dans xaml mais sous blend cela me permettrait de changer ces valeurs x et y comme il est dit valeurs calculées (je ne veux pas que ces valeurs soient interpolées, juste changées lors du survol)

Voici l'exemple du bouton d'état unique actuel.

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

Comment faire? Je dois être capable de lier chaque état à une propriété qui inclura les valeurs de traduction x et y et aussi ImageSource.

Answer 1

vous devez travailler avec VisualStates comme ci-dessous

dans le mélange cand vous modifiez une copie de modèle de bouton et vous verrez toutes ses VisualStates.

il vous suffit de changer Storyboard.TargetName et Storyboard.TargetProperty pour correspondre avec votre 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" />