Items Items 컨트롤 항목에 액세스하고 하나씩 애니메이션 만들기

Question

WPF로 시작한 이래로 오늘은 좋은 출발점입니다. 다음 코드를 사용하여 , 내가 스크린 샷에서 볼 수 결과를 얻을 수 있었다 :

<Grid> 
     <ItemsControl ItemsSource="{Binding Programs}"> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <WrapPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Button Content="{Binding Text}" Background="Transparent" Foreground="White" Width="128" Height="150" > 
         <Button.RenderTransform> 
          <TransformGroup> 
           <ScaleTransform /> 
          </TransformGroup> 
         </Button.RenderTransform> 
         <Button.Template> 
          <ControlTemplate TargetType="Button"> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*" /> 
             <RowDefinition Height="Auto" /> 
            </Grid.RowDefinitions> 

            <Image Grid.Row="0" Source="{Binding Image}" Height="128" /> 
            <ContentPresenter Grid.Row="1" HorizontalAlignment="Center" Margin="3,10" /> 
            <Rectangle Grid.Row="0" Fill="{TemplateBinding Background}" /> 
            <Rectangle Grid.Row="1" Fill="{TemplateBinding Background}" /> 
           </Grid> 
          </ControlTemplate> 
         </Button.Template> 
         <Button.Resources> 
          <Storyboard SpeedRatio="4" x:Key="MouseEnterStoryboard" x:Name="MouseEnterStoryboard"> 
           <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="#22FFFFFF"></ColorAnimation> 
          </Storyboard> 
          <Storyboard SpeedRatio="4" x:Key="MouseLeaveStoryboard" x:Name="MouseLeaveStoryboard"> 
           <ColorAnimation Storyboard.TargetProperty="(Button.Background).(SolidColorBrush.Color)" To="Transparent"></ColorAnimation> 
          </Storyboard> 
          <Storyboard Duration="00:00:00.05" x:Key="MouseClickStoryboard" AutoReverse="True"> 
           <DoubleAnimation To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"/> 
           <DoubleAnimation To="0.8" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"/> 
          </Storyboard> 
          <Storyboard x:Key="WindowLoadedStoryboard"> 
           <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:01" /> 
          </Storyboard> 
         </Button.Resources> 
         <Button.Triggers> 
          <EventTrigger RoutedEvent="Mouse.MouseEnter"> 
           <BeginStoryboard Storyboard="{StaticResource MouseEnterStoryboard}" /> 
          </EventTrigger> 
          <EventTrigger RoutedEvent="Mouse.MouseLeave"> 
           <BeginStoryboard Storyboard="{StaticResource MouseLeaveStoryboard}" /> 
          </EventTrigger> 
          <EventTrigger RoutedEvent="Button.Click"> 
           <BeginStoryboard Storyboard="{StaticResource MouseClickStoryboard}" /> 
          </EventTrigger> 
          <EventTrigger RoutedEvent="Window.Loaded"> 
           <BeginStoryboard Storyboard="{StaticResource WindowLoadedStoryboard}"></BeginStoryboard> 
          </EventTrigger> 
         </Button.Triggers> 
        </Button> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 
    </Grid> 

스크린 샷 :

이제

,이 컨트롤에 바인딩 목록의 각 항목에 대해, 단추를 만듭니다. 이 단추에 프로그래밍 방식으로 액세스하려면 어떻게해야합니까? 더 나은 방법은 이름을 할당 한 후 프로그래밍 방식으로 스토리 보드에 액세스하는 것입니다 (x : 간단히 생각하면 트릭을 수행하지 않습니다 ...

또한 어떻게 할 수 있습니까? 나는 하나씩 버튼을 움직이게하나요? 현재 그들은 동시에 (@ WindowLoadedStoryboard) 똑같은 시간에 페이드 인하지만 짧은 효과를 내기 위해 각각의 버튼이 하나씩 사라 지도록하고 싶습니다. 어떻게하면 좋을까요? 이?

누군가가 나를 위해이 두 질문에 대답 할 수 있기를 바랍니다!

인사말을 달성!

Answer 1

DataTemplate에 정의 된 요소에 액세스 할 때 발생하는 문제는 DataTemplate에 해당 요소를 정의했기 때문입니다. 이러한 요소는 다양한 유형의 UI 컨테이너 컨트롤에서 렌더링 될 수 있습니다. 솔루션은 MSDN의 How to: Find DataTemplate-Generated Elements 페이지에서 찾을 수 있습니다.

먼저 DataTemplate이 적용된 항목이 포함 된 관련 컨테이너 컨트롤을 가져와야합니다. 그런 다음 해당 컨테이너 컨트롤에서 ContentPresenter을 가져와 DataTemplate을 ContentPresenter에서 가져올 수 있습니다. 마지막으로 DataTemplate에서 명명 된 요소에 액세스 할 수 있습니다. 링크 된 페이지에서 :

// Getting the currently selected ListBoxItem 
// Note that the ListBox must have 
// IsSynchronizedWithCurrentItem set to True for this to work 
ListBoxItem myListBoxItem = (ListBoxItem)(myListBox.ItemContainerGenerator. 
    ContainerFromItem(myListBox.Items.CurrentItem)); 

// Getting the ContentPresenter of myListBoxItem 
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem); 

// Finding textBlock from the DataTemplate that is set on that ContentPresenter 
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate; 
TextBlock myTextBlock = 
    (TextBlock)myDataTemplate.FindName("textBlock", myContentPresenter); 

// Do something to the DataTemplate-generated TextBlock 
MessageBox.Show("The text of the TextBlock of the selected list item: " + 
    myTextBlock.Text);