Visualstate 애니메이션을위한 ContentPresenter 하위에 액세스

Question

다음 GridView을 사용하고 있으며 내부에 3 개의 요소가있는 ItemTemplate이 있습니다.

이제 GridViewItem에서 PointerOver의 MyTextBlock 불투명도에 애니메이션을 적용하려고합니다.

<GridView x:Name="MyList" ItemContainerStyle="{StaticResource GridViewItemContainerStyle}" ItemsSource="{Binding MyList}"> 
<GridView.ItemTemplate> 
    <DataTemplate> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="200" /> 
       <RowDefinition Height="3" /> 
       <RowDefinition Height="80" /> 
      </Grid.RowDefinitions> 
      <Image Grid.Row="0" Source="{Binding Url}" /> 
      <ProgressBar Grid.Row="1" IsIndeterminate="True" /> 
      <TextBlock Name="MyTextBlock" Opacity="0" Text="Test" /> 
     </Grid> 
    </DataTemplate> 
</GridView.ItemTemplate> 
</GridView> 

ItemContainerStyle은 이와 유사합니다. 문제는, 내가 ContentPresenter 안에 있기 때문에 여기에서 Storyboard.TargetName="MyTextBlock"으로 MyTextBlock에 액세스 할 수 없습니다. ContentPresenter 안에있는 요소의 visualstate 애니메이션을 어떻게 만들 수 있습니까?

<Style TargetType="GridViewItem" x:Key="GridViewItemContainerStyle"> 
     ... 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="GridViewItem"> 
        <Grid x:Name="ContentBorder" Control.IsTemplateFocusTarget="True" RenderTransformOrigin="0.5,0.5">       
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetName="BorderRectangle" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Rectangle x:Name="BorderRectangle" Fill="{ThemeResource SystemControlHighlightListAccentLowBrush}" Opacity="0" /> 
         <ContentPresenter x:Name="ContentPresenter" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

---

편집 : 내가 다음 TargetProperty을 사용했지만, 단지 그것의 내부 전체 ContentPresenter 뿐 아니라 TextBlock의 불투명도를 설정합니다.

<DoubleAnimation Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="(TextBlock.Opacity)" Duration="0" To="1" /> 

Answer 1

문제는 ContentPresenter에 내부 이후 나는 여기에서 Storyboard.TargetName = "MyTextBlock"로 MyTextBlock에 액세스 할 수 없습니다. 어떻게하면 ContentPresenter 내부의 요소에 대한 visualstate 애니메이션을 할 수 있습니까?

<GridView x:Name="MyList" Grid.Row="1" ItemContainerStyle="{StaticResource GridViewItemContainerStyle}" > 
     <GridView.ItemTemplate> 
      <DataTemplate> 
       <Grid PointerExited="Grid_PointerExited" PointerEntered="Grid_PointerEntered"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup> 
          <VisualState x:Name="PointerEntered"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="MyTextBlock" Storyboard.TargetProperty="Opacity" Duration="0" To="1" /> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="PointerExited"> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetName="MyTextBlock" Storyboard.TargetProperty="Opacity" Duration="0" To="0" /> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="200" /> 
         <RowDefinition Height="3" /> 
         <RowDefinition Height="80" /> 
        </Grid.RowDefinitions> 
        <Image Grid.Row="0" Source="{Binding Url}" /> 
        <ProgressBar Grid.Row="1" IsIndeterminate="True" /> 
        <TextBlock Grid.Row="2" Name="MyTextBlock" Opacity="0" Text="Test" /> 
       </Grid> 
      </DataTemplate> 
     </GridView.ItemTemplate> 
</GridView> 

을 그리고 Grid.PointerEntered 및 Grid.PointerExited 이벤트에 다음 코드를 사용하면 storyboard 시작 얻을 :

는

당신은 DataTemplate을 내부에 두 개의 visualstates (PointerEntered 및 PointerExited)를 추가 할 수 있습니다

private void Grid_PointerExited(object sender, PointerRoutedEventArgs e) 
{ 
    Grid grid = sender as Grid; 
    var visualStateGroups = VisualStateManager.GetVisualStateGroups(grid); 
    var visualStateGroup = visualStateGroups[0]; 
    visualStateGroup.States[1].Storyboard.Begin(); 
} 

private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e) 
{ 
    Grid grid = sender as Grid; 
    var visualStateGroups = VisualStateManager.GetVisualStateGroups(grid); 
    var visualStateGroup = visualStateGroups[0]; 
    visualStateGroup.States[0].Storyboard.Begin(); 
} 

Answer 2

DataTemplate을 어디서든 올 수 있습니다 (App Resource, Window Resource, Local Resource, Cod e)이므로 자신의 NameScope을 사용합니다.

Namescope 문제로 인해 MyTextBlock을 사용할 수 없습니다. 따라서 DataTemplate의 일부로 VisualStates을 정의하는 것이 가장 좋습니다.