[UWP] DataTemplate에 포함 된 스토리 보드가 제대로 작동하지 않습니다.

Question

항목을 클릭하면 첫 번째 항목의 스토리 보드에서만 작동합니다.

아래 주소에서 소스를 다운로드 할 수 있습니다.

http://util.aquerytool.com/Download?fileName=ItemStoryboardApp.zip

는 답장을 보내 주셔서 감사합니다.

<UserControl 
    x:Class="ItemStoryboardApp.View.ItemListMVVMLightView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:ItemStoryboardApp.View" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:core="using:Microsoft.Xaml.Interactions.Core" 
    xmlns:interactivity="using:Microsoft.Xaml.Interactivity" 
    xmlns:media="using:Microsoft.Xaml.Interactions.Media" 
    mc:Ignorable="d" 
    d:DesignHeight="300" 
    d:DesignWidth="400"> 

    <Grid x:Name="PART_RootPanel"> 

     <ItemsControl ItemsSource="{Binding ItemList}" Padding="0,0,0,0"> 
      <ItemsControl.ItemTemplate> 
       <DataTemplate> 
        <Button Foreground="White" Margin="0,0,5,0" Padding="0,0,0,0" Height="40" Command="{Binding DataContext.SelectedItemCommand, ElementName=PART_RootPanel}" CommandParameter="{Binding}" VerticalContentAlignment="Stretch" > 
         <Button.Content> 
          <Grid x:Name="PART_ContinuousDefectPanel" RenderTransformOrigin="0.5, 0.5"> 
           <Grid.Resources> 
            <Storyboard x:Name="SB_ChangedCount"> 
             <DoubleAnimation Storyboard.TargetName="PART_ContinuousDefectPanel" Duration="0:0:0.25" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" AutoReverse="True" /> 
             <DoubleAnimation Storyboard.TargetName="PART_ContinuousDefectPanel" Duration="0:0:0.25" To="1.2" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" AutoReverse="True" /> 
            </Storyboard> 
           </Grid.Resources> 

           <Grid.RenderTransform> 
            <ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1" /> 
           </Grid.RenderTransform> 

           <interactivity:Interaction.Behaviors> 
            <core:DataTriggerBehavior Binding="{Binding IsSelected}" Value="True" ComparisonCondition="Equal"> 
             <media:ControlStoryboardAction Storyboard="{StaticResource SB_ChangedCount}" /> 
            </core:DataTriggerBehavior> 
           </interactivity:Interaction.Behaviors> 

           <Rectangle Fill="Orange" RadiusX="10" RadiusY="10"/> 
           <StackPanel Orientation="Horizontal" Margin="10,0,10,0" VerticalAlignment="Center"> 
            <TextBlock Text="{Binding ItemName}" /> 
           </StackPanel> 

          </Grid> 
         </Button.Content> 
        </Button> 
       </DataTemplate> 
      </ItemsControl.ItemTemplate> 
     </ItemsControl> 

    </Grid> 

</UserControl> 



public class ItemListMVVMLightViewModel : ViewModelBase 
{ 
    public ObservableCollection<ItemModel> ItemList 
    { 
     get { return _itemList; } 
     set { _itemList = value; RaisePropertyChanged("ItemList"); } 
    } 
    ObservableCollection<ItemModel> _itemList = new ObservableCollection<ItemModel>(); 

    public ICommand SelectedItemCommand { get; private set; } 


    public ItemListMVVMLightViewModel() 
    { 
     InitData(); 
     InitCommand(); 
    } 

    void InitCommand() 
    { 
     SelectedItemCommand = new RelayCommand<object>((param) => OnSelectedItemCommand(param)); 
    } 

    void InitData() 
    { 
     for (int i = 0; i < 10; i++) 
     { 
      ItemList.Add(new ItemModel() { ItemName = "Name" + i.ToString() }); 
     } 
    } 

    void OnSelectedItemCommand(object param) 
    { 
     if (param == null || (param is ItemModel) == false) 
     { 
      return; 
     } 

     foreach (ItemModel i in ItemList) 
     { 
      i.IsSelected = false; 
     } 

     ItemModel item = param as ItemModel; 
     item.IsSelected = true; 
    } 



} 

Answer 1

TargetNameProperty 당신이 XAML의 이름 범위의 영향에 대해 걱정할 필요가 없습니다 그 name.For 대부분의 애니메이션 대상 시나리오에 의해 다른 요소를 참조하는 데 사용됩니다 Storyboard 클래스에 따르면

,하지만 템플릿 파트를 대상으로 지정하거나 Load (String)을 사용하여 만든 다음 개체 트리에 추가 한 개체 인 경우 XAML 이름 확인 문제가 발생할 수 있습니다. 자세한 내용은 XAML namescopes을 참조하십시오.

데이터 형식 내에 스토리 보드를 사용하고 있으므로 XAML 이름 확인 문제가 발생할 수 있습니다. 스토리 보드는 항상 첫 번째 항목을 대상으로이 문제를 이끌 수 있습니다.

코드 스 니펫에서 스토리 보드 트리거 용으로 DataTrigger을 사용하고 있습니다. 그러나 WPF 및 이전 버전의 Silverlight에서 기존 구문 인 VisualStateManager보다 먼저 지원 될 수 있습니다. storyboard animations for visual states 님에게 추천합니다. 다음 코드는 참조 할 수있는 것과 동일한 결과를 얻을 수 있습니다. 한 번 선택한 항목을 애니메이션으로 처리하려고한다고 생각합니다. VisualStateManager에 애니메이션을 추가하는 버튼 스타일을 사용자 정의합니다.

<ItemsControl Padding="0,0,0,0" ItemsSource="{Binding ItemList}"> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button 
        Height="40" 
        Margin="0,0,5,0" 
        Padding="0,0,0,0" 
        VerticalContentAlignment="Stretch" 
        Foreground="White" 
        Command="{Binding DataContext.SelectedItemCommand, ElementName=PART_RootPanel}" 
        CommandParameter="{Binding}"> 
        <Button.Style> 
         <Style TargetType="Button"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate TargetType="Button"> 
             <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
              <Grid.RenderTransform> 
               <ScaleTransform 
                x:Name="ImageScale" 
                ScaleX="1" 
                ScaleY="1" /> 
              </Grid.RenderTransform> 
              <Rectangle 
               Fill="Orange" 
               RadiusX="10" 
               RadiusY="10" /> 
              <StackPanel 
               Margin="10,0,10,0" 
               VerticalAlignment="Center" 
               Orientation="Horizontal"> 
               <TextBlock Text="{Binding ItemName}" /> 
              </StackPanel> 
              <VisualStateManager.VisualStateGroups> 
               <VisualStateGroup x:Name="CommonStates"> 
                <VisualState x:Name="Pressed"> 
                 <Storyboard> 
                  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
                   <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" /> 
                  </ObjectAnimationUsingKeyFrames> 
                  <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
                  <DoubleAnimation 
                   AutoReverse="True" 
                   Duration="0:0:0.25" 
                   Storyboard.TargetName="RootGrid" 
                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)" 
                   To="1.2" /> 
                  <DoubleAnimation 
                   AutoReverse="True" 
                   Duration="0:0:0.25" 
                   Storyboard.TargetName="RootGrid" 
                   Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)" 
                   To="1.2" /> 
                 </Storyboard> 
                </VisualState> 
               </VisualStateGroup> 
              </VisualStateManager.VisualStateGroups> 
             </Grid> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </Button.Style> 
       </Button> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl>