VisualStateManager e transizioni generate

Question

Proprio quando penso di capire lo VisualStateManager, qualcosa mi dà ragione.

Sto usando WPF 4 e sto cercando di ingrandire semplicemente un oggetto sopra il mouse e lo rimpicciolisco al congedo del mouse. Ho pensato solo definisco ogni stato in un VisualStateGroup e quindi specificare un VisualTransition con un GeneratedDuration:

<Border x:Name="PART_Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0.5,0.5"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition GeneratedDuration="0:0:1"/> 
      </VisualStateGroup.Transitions> 

      <VisualState Name="Normal"/> 

      <VisualState Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleX" To="1.5" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY" To="1.5" Duration="0"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Border.RenderTransform> 
     <ScaleTransform x:Name="scaleTransform" ScaleX="1" ScaleY="1"/> 
    </Border.RenderTransform> 

    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
</Border> 

Dal momento che ho un catch-all VisualTransition con un GeneratedDuration, mi aspettavo che il VSM per generare animazioni intermedi. Ossia, il mouse sul controllo dovrebbe animare le proprietà ScaleTransform da 1 a 1,5 nel corso di 1 secondo. Lo stesso con il mouse spento. Invece, c'è un ritardo di 1 secondo e poi le ScaleTransform proprietà Bloccare istantaneamente a 1,5 o di nuovo a 1.

Se specifico manualmente le transizioni come segue allora ottengo il comportamento desiderato:

<VisualStateGroup.Transitions> 
    <VisualTransition From="Normal" To="MouseOver"> 
     <Storyboard> 
      <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleX" To="1.5" Duration="{StaticResource MouseEnterDuration}"/> 
      <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY" To="1.5" Duration="{StaticResource MouseEnterDuration}"/> 
     </Storyboard> 
    </VisualTransition> 

    <VisualTransition From="MouseOver" To="Normal"> 
     <Storyboard> 
      <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleX" To="1" Duration="{StaticResource MouseLeaveDuration}"/> 
      <DoubleAnimation Storyboard.TargetName="scaleTransform" Storyboard.TargetProperty="ScaleY" To="1" Duration="{StaticResource MouseLeaveDuration}"/> 
     </Storyboard> 
    </VisualTransition> 
</VisualStateGroup.Transitions> 

Ma perché Devo fare questo? Ho pensato che l'intero punto delle transizioni generate era che la transizione sarebbe stata, sai, generata. Che cosa sto fraintendendo qui?

UPDATE: Come per la risposta di Rick, Miscela genera qualcosa che fa lavoro. Quindi, lavorando all'indietro, ho determinato che è il fatto che sto riferendo direttamente allo ScaleTransform piuttosto che attraverso lo UIElement che lo contiene. Ho cambiato il mio XAML al seguente e funziona come previsto:

<Border x:Name="PART_Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0.5,0.5"> 
    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup Name="CommonStates"> 
      <VisualStateGroup.Transitions> 
       <VisualTransition From="Normal" To="MouseOver" GeneratedDuration="{StaticResource MouseEnterDuration}"/> 

       <VisualTransition From="MouseOver" To="Normal" GeneratedDuration="{StaticResource MouseLeaveDuration}"/> 
      </VisualStateGroup.Transitions> 

      <VisualState Name="Normal"/> 

      <VisualState Name="MouseOver"> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" To="{StaticResource MouseOverScale}" Duration="0"/> 
        <DoubleAnimation Storyboard.TargetName="PART_Root" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" To="{StaticResource MouseOverScale}" Duration="0"/> 
       </Storyboard> 
      </VisualState> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 

    <Border.RenderTransform> 
     <ScaleTransform/> 
    </Border.RenderTransform> 

    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
</Border> 

sembra ridicolo (e un bug ovvio), ma funziona.

Grazie

Answer 1

Non posso dire che capisco perfettamente il motivo per cui non funziona il modo in cui ci si aspetta che, ma in queste situazioni possiamo utilizzare Expression Blend per eseguire l'operazione e vedere cosa markup produce. Ho fatto che Ed ecco un esempio di lavoro in base al campione:

<Grid> 
    <Grid.Resources> 
     <Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type Button}"> 
         <Border x:Name="PART_Root" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" RenderTransformOrigin="0.5,0.5"> 
          <Border.RenderTransform> 
           <TransformGroup> 
            <ScaleTransform/> 
            <SkewTransform/> 
            <RotateTransform/> 
            <TranslateTransform/> 
           </TransformGroup> 
          </Border.RenderTransform> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup Name="CommonStates"> 
            <VisualStateGroup.Transitions> 
             <VisualTransition GeneratedDuration="0:0:1"/> 
            </VisualStateGroup.Transitions> 
            <VisualState Name="Normal"/> 
            <VisualState x:Name="MouseOver"> 
             <Storyboard> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="PART_Root"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="2"/> 
              </DoubleAnimationUsingKeyFrames> 
              <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="PART_Root"> 
               <EasingDoubleKeyFrame KeyTime="0" Value="2"/> 
              </DoubleAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </Grid.Resources> 
    <Button Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Width="75" Style="{StaticResource ButtonStyle1}"/> 
</Grid> 

Anche se Miscela utilizza un più generale gruppo Trasforma, la differenza principale che possiamo vedere è che gli obiettivi dello storyboard di un elemento e un percorso di proprietà attraverso quel elemento ai fattori di scala.