ContentControl의 DataTemplate에서 요소에 애니메이션 적용

Question

DataTemplate으로 스타일을 지정하는 ContentControl이 있습니다. ContentControl 외부의 애니메이션을 정의하여 DataTemplate의 요소에 애니메이션을 적용하고 싶습니다. 내가 (대신 "MyContentControl"의) 애니메이션 템플릿에 하나 TextBox을 대상으로 할 수 있도록하고 싶습니다

<UserControl x:Class="StoryboardTesting.Stage" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      mc:Ignorable="d"> 
    <UserControl.Resources> 
     <DataTemplate x:Key="MyControlTemplate"> 
      <StackPanel> 
       <TextBlock x:Name="TheBlock1" Text="Foo!" /> 
       <TextBlock x:Name="TheBlock2" Text="Bar!" /> 
      </StackPanel> 
     </DataTemplate> 
    </UserControl.Resources> 

    <VisualStateManager.VisualStateGroups> 
     <VisualStateGroup Name="ValueStates"> 
      <VisualState Name="ToState"> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="MyContentControl" 
            Storyboard.TargetProperty="(UIElement.Opacity)" 
            Duration="0:0:1" 
            To="0" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState Name="FromState" /> 
     </VisualStateGroup> 
    </VisualStateManager.VisualStateGroups> 
    <Grid> 
     <Canvas> 
      <ContentControl x:Name="MyContentControl" 
          ContentTemplate="{StaticResource MyControlTemplate}" /> 
     </Canvas> 
    </Grid> 
</UserControl> 

어느 위치 나 이름이 XAML 내 시나리오의 작은, 간단한 예입니다. 나는에서 애니메이션을 시작있어 UserControl의 코드 숨김과 같은 호출로 :

:이 ("TheBlock"와 "MyContentControl 교체") 실행하면

VisualStateManager.GoToElementState(this, "ToState", true); 

, 나는 다음과 같은 얻을

InvalidOperationException : 'TheBlock1'이름을 'StoryboardTesting.Stage'의 이름 범위에서 찾을 수 없습니다.

어떤 의미가 있습니다. 속성 이름을 사용하여 두 블록을 처리하는 방법이 있습니까? 이 코드는 런타임시 생성되는 XAML이므로 코드 숨김을 피할 필요가 있습니다.

Answer 1

저는 블렌드를 사용하여 WPF 프로젝트에서 작업 할 때 배우는 것이 좋습니다. 키보드 기술에 의한 XAML이 실제로 유용하지만 Blend는 또한 매우 유용합니다. 다음 예제를 작성하는 데 약 5 분이 걸렸습니다. 상태가있는 DataTemplate입니다.

는

사용자가 하단에있는 두 버튼 중 하나를 누르면 현재 상태가 변경됩니다 (처음 그때 내가 혼합에서 편집, 빈 DataTemplate를 생성).

아래 보 겠지만

는 행동은, 아니 코드 숨김에서 모든 처리 상태에 대한 정말 도움이 될 입증.

XAML :

<Window x:Class="WpfApplication3.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
     xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
     xmlns:wpfApplication3="clr-namespace:WpfApplication3" 
     Title="MainWindow" 
     Width="525" 
     Height="350"> 
    <Window.Resources> 
     <wpfApplication3:MyObject x:Key="MyObject1" /> 
     <DataTemplate x:Key="Template1" DataType="wpfApplication3:MyObject"> 
      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition /> 
        <ColumnDefinition /> 
       </Grid.ColumnDefinitions> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="37*" /> 
        <RowDefinition Height="13*" /> 
       </Grid.RowDefinitions> 
       <VisualStateManager.VisualStateGroups> 
        <VisualStateGroup x:Name="VisualStateGroup"> 
         <VisualState x:Name="Red"> 
          <Storyboard> 
           <ColorAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
            <EasingColorKeyFrame KeyTime="0" Value="Red" /> 
           </ColorAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
         <VisualState x:Name="Green"> 
          <Storyboard> 
           <ColorAnimationUsingKeyFrames Storyboard.TargetName="button" Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"> 
            <EasingColorKeyFrame KeyTime="0" Value="Lime" /> 
           </ColorAnimationUsingKeyFrames> 
          </Storyboard> 
         </VisualState> 
        </VisualStateGroup> 
       </VisualStateManager.VisualStateGroups> 
       <Button x:Name="button" 
         Grid.RowSpan="1" 
         Grid.ColumnSpan="2" 
         Width="100" 
         Height="100" 
         Margin="2" 
         Content="Button" 
         FontSize="26.667" /> 
       <Button Grid.Row="1" 
         Width="Auto" 
         Margin="2" 
         Content="State1"> 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ei:GoToStateAction StateName="Red" /> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 
       <Button Grid.Row="1" 
         Grid.Column="1" 
         Width="Auto" 
         Margin="2" 
         Content="State2"> 
        <i:Interaction.Triggers> 
         <i:EventTrigger EventName="Click"> 
          <ei:GoToStateAction StateName="Green" /> 
         </i:EventTrigger> 
        </i:Interaction.Triggers> 
       </Button> 
      </Grid> 
     </DataTemplate> 
    </Window.Resources> 
    <Grid> 
     <ContentControl Content="{StaticResource MyObject1}" ContentTemplate="{StaticResource Template1}" /> 
    </Grid> 
</Window> 

코드 숨김

질문의 요점에 대답은, 그 상태가 DataTemplate에 속하는

namespace WpfApplication3 
{ 
    public partial class MainWindow 
    { 
     public MainWindow() { 
      InitializeComponent(); 
     } 
    } 

    internal class MyObject 
    { 
     public string Category { get; set; } 
     public int Value { get; set; } 
    } 
} 

편집; 이 상태를 외부에서 정의하는 것은 의미가 없으며 경험 한대로 가능하지도 않습니다. 이는 좋은 이유입니다!

두 개의 다른 장소에서이 템플릿을 사용한다고 가정하면 동일한 상태를 공유합니까? 물론 아니야, 그래서 주정부는 외부가 아닌 내부에 정의되어야한다.