시각적 상태 관리자와 스토리 보드를 사용하여 컨트롤 템플릿에 이미지를 배치하는 방법은 무엇입니까?

Question

InkCanvas에 수많은 Image 컨트롤을 배치해야합니다. 특정 코드 조건이 충족되면 모두 애니메이션 작업을 수행해야합니다. 수많은 시도 후에도 ControlTemplate은 여전히 ​​올바르지 않습니다.

 <Image Name="image1" 
       Template="{StaticResource AnimatedImage}" 
       Source="{Binding Path=Image1}" 
       Visibility="{Binding ElementName=chkShowPerson, Path=IsChecked, Converter={StaticResource b2v}}" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" > 
     </Image> 
    </InkCanvas> 
</Grid> 

Answer 1

VisualStateManager 요소는 컨트롤 템플릿의 루트의 자식으로 위치해야합니다 : 여기

<ControlTemplate x:Key="AnimatedImage" TargetType="{x:Type Image}"> 
    <Grid> 
     <Image Name="image" 
       Source="{TemplateBinding Filename}" 
       Width="{TemplateBinding Width}" 
       Height="{TemplateBinding Height}" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center"> 

      <VisualStateManager.VisualStateGroups> 
       <VisualStateGroup Name="AnimationLocations"> 

        <!-- When the image is first loaded move it to the center of the InkCanvas --> 
        <VisualState Name="AnimateToCenterScreen"> 
         <Storyboard> 
          <DoubleAnimation Storyboard.TargetName="image" 
              Storyboard.TargetProperty="(Image.RenderTransform).(TranslateTransform.X)" 
              From="{TemplateBinding From}" 
              To="{TemplateBinding To}" 
              Duration="{TemplateBinding Duration}" /> 
         </Storyboard> 
        </VisualState> 

        <!-- Animate the image to an off screen position to effectively hide it. --> 
        <VisualState Name="AnimateToOffScreen"> 
         <!-- To be filled in later. --> 
        </VisualState> 

        <!-- Animate the image back to the original on screen position. --> 
        <VisualState Name="AnimateToOnScreen"> 
         <!-- To be filled in later. --> 
        </VisualState> 
       </VisualStateGroup> 
      </VisualStateManager.VisualStateGroups> 
     </Image> 
    </Grid> 
</ControlTemplate> 

메인 그리드에 대한 XAML입니다.

<ControlTemplate x:Key="AnimatedImage" TargetType="{x:Type Image}"> 
    <Grid> 
     <VisualStateManager.VisualStateGroups> 
      ... 
     </VisualStateManager.VisualStateGroups> 

     <Image Name="image" ... /> 
    </Grid> 
</ControlTemplate> 

(참조 here를 들어 당신이 그 재미있는 이야기를 찾을 수 있습니다 MSDN의 페이지입니다.)