VisualStateManager 및 생성 된 전환

Question

그냥 VisualStateManager을 이해한다고 생각하면 뭔가 잘못되었습니다.

저는 WPF 4를 사용 중이며 단순히 마우스를 올려 놓으면 항목을 확대하려고 시도하고 마우스를 놓으면 다시 축소하려고합니다. 난 그냥 VisualStateGroup의 각 상태를 정의하고 지정 거라고 생각 VisualTransitionGeneratedDuration A를 :

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

나는 캐치 - 모든 GeneratedDuration와 VisualTransition, 내가 VSM 중간 애니메이션을 생성하기 위해 기다리고 있었다 가지고 있기 때문에. 즉, 컨트롤 위에 마우스를 올리면 1 초에 걸쳐 ScaleTransform 속성이 1에서 1.5로 움직여야합니다. 마우스를 뗄 때도 마찬가지입니다.

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

그런데 왜 이렇게 대신, 1 초 지연 내가 원하는 동작을 얻을 후 다음과 같이 내가 수동으로 전환을 지정하는 경우 다음 ScaleTransform 특성이 즉시 1

에 다시 1.5로 스냅 또는 거기 나는 이것을해야만 하는가? 생성 된 변환의 전체 지점은 전환이 생성된다는 것입니다. 내가 여기서 오해 한 것은 무엇인가?

UPDATE는 : 릭의 대답에 따라 경찰, 혼합은 가 작업을 수행 뭔가를 생성합니다. 따라서 역방향으로 작업하여 실제로 포함되어있는 UIElement 대신 ScaleTransform을 직접 참조한다는 사실을 확인했습니다. 나는 다음에 내 XAML 변경과 같이 기대 작품 :

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

말도 (그리고 명백한 버그) 같다,하지만 작동합니다.

감사

Answer 1

나는 우리가 그것을 기대하는대로 작동하지 않는 이유는 충분히 이해하지만이 상황에서 우리가 작업을 수행하고 어떤 마크 업을 볼 Expression Blend를 사용할 수 있다고 말할 수 없다 그것은 생산합니다. 나는 그 일을 여기에 샘플을 기반으로 작동하는 예입니다했습니다 혼합은보다 일반적인이 변환 그룹을 사용하지만

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

, 우리가 볼 수있는 주요 차이점은 스토리 보드 목표 요소와 그 통해 속성 경로가 요소를 스케일링 요소에 적용합니다.