2011-08-26 4 views
3

이 XAML의 목적은 ListBox에 애니메이션을 적용하는 것입니다.DataTrigger.EnterActions.BeginStoryboard Beginning

  1. 예상대로 선정 ListBoxItem의 이러한 스토리 보드가 작동되지 않습니다 X2
  2. NotSelected ListBoxItem의이 확대 된 X.5 아무것도 선택되어 있지 않은 경우
  3. , 그들은 확대 한 그러나 X1

확대 된 .

여기에 분명 뭔가

거기 (단지 Kaxaml, 또는 즐겨 찾기. XAML 편집기에이 모든 일을 복사)?

<Page 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:sys="clr-namespace:System;assembly=mscorlib" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Page.Resources> 

    <x:Array Type="{x:Type sys:String}" x:Key="MyData"> 
     <sys:String>One</sys:String> 
     <sys:String>Two</sys:String> 
     <sys:String>Three</sys:String> 
     <sys:String>Four</sys:String> 
     <sys:String>Five</sys:String> 
     <sys:String>Six</sys:String> 
     <sys:String>Seven</sys:String> 
     <sys:String>Eight</sys:String> 
    </x:Array> 

    </Page.Resources> 

    <ListBox ItemsSource="{Binding Source={StaticResource MyData}}" Name="ListBoxA"> 
    <ListBox.ItemTemplate> 
     <DataTemplate> 
     <DataTemplate.Triggers> 

      <!-- selected (Grow) --> 
      <MultiDataTrigger> 
       <MultiDataTrigger.Conditions> 
        <Condition Value="True" Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" /> 
        <Condition Value="1" Binding="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" /> 
       </MultiDataTrigger.Conditions> 
       <MultiDataTrigger.EnterActions> 
        <BeginStoryboard Name="BeginStoryboardSelected"> 
         <Storyboard> 
         <ParallelTimeline> 
          <DoubleAnimation To="2" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleX" /> 
          <DoubleAnimation To="2" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleY" /> 
         </ParallelTimeline> 
         </Storyboard> 
        </BeginStoryboard> 
       </MultiDataTrigger.EnterActions> 
      </MultiDataTrigger> 

      <!-- none selected --> 
      <MultiDataTrigger> 
       <MultiDataTrigger.Conditions> 
        <Condition Value="False" Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" /> 
        <Condition Value="0" Binding="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" /> 
       </MultiDataTrigger.Conditions> 
       <MultiDataTrigger.EnterActions> 
        <BeginStoryboard Name="BeginStoryboardNoneSelected"> 
         <Storyboard> 
         <ParallelTimeline> 
          <DoubleAnimation To="1" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleX" /> 
          <DoubleAnimation To="1" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleY" /> 
         </ParallelTimeline> 
         </Storyboard> 
        </BeginStoryboard> 
       </MultiDataTrigger.EnterActions> 
      </MultiDataTrigger>   

      <!-- shrink --> 
      <MultiDataTrigger> 
       <MultiDataTrigger.Conditions> 
        <Condition Value="False" Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" /> 
        <Condition Value="1" Binding="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" /> 
       </MultiDataTrigger.Conditions> 
       <MultiDataTrigger.EnterActions> 
        <BeginStoryboard Name="BeginStoryboardNotSelected"> 
         <Storyboard> 
         <ParallelTimeline> 
          <DoubleAnimation To=".5" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleX" /> 
          <DoubleAnimation To=".5" DecelerationRatio="0.5" Duration="00:00:00.500" Storyboard.TargetName="MyTransform" Storyboard.TargetProperty="ScaleY" /> 
         </ParallelTimeline> 
         </Storyboard> 
        </BeginStoryboard> 
       </MultiDataTrigger.EnterActions> 
      </MultiDataTrigger>   

     </DataTemplate.Triggers> 

     <!-- debug content --> 
     <UniformGrid Columns="3"> 
      <TextBlock Text="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}, StringFormat={} SelectedItems.Count is {0}}" Margin="0,0,10,0" Foreground="Gray" /> 
      <TextBlock Text="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, StringFormat={} ListBoxItem.IsSelected is {0}}" Margin="0,0,10,0" Foreground="Gray" /> 
      <TextBlock Text="{Binding .}"> 
      <TextBlock.LayoutTransform> 
       <ScaleTransform ScaleX="1" ScaleY="1" x:Name="MyTransform"/> 
      </TextBlock.LayoutTransform> 
      </TextBlock> 
     </UniformGrid> 

     </DataTemplate> 
    </ListBox.ItemTemplate> 
    </ListBox> 

</Page> 
+0

나는 보통 StackOverflow에 대한 내 XAML를 포맷하려고 노력하지만,이 경우, 다른 편집기로 복사/붙여 넣으면 그냥 쉽게 너무 길기 때문에 (그리고 애니메이션 작업을하기 위해 모두 필요합니다). –

답변

2

나는 가장 좋은 해결 방법의 모르겠지만, 문제는 트리거가 더 이상 유효 할 때 트리거가 여전히에 "적용 취소"자신의 애니메이션 값을해야 할 것입니다. 따라서 귀하의 경우 첫 번째 트리거가 적용될 수 있지만 마지막 트리거의 ExitAction에 의해 효과적으로 제거됩니다.

ExitAction을 지정하지 않으므로 EnterAction의 애니메이션을 지우려면 BeginAnimation(..., null)을 수행하기 만하면됩니다. 트리거를 재정렬하여이를 확인할 수 있으며, 마지막 트리거가 항상 적용되는 것을 볼 수 있습니다.

비슷한 질문은 here입니다. 그러나 그것은 심지어 그것으로 보인다, 예상대로 작동하지 않습니다.

저는 사용자를 위해 확대/축소 애니메이션을 처리하는 사용자 정의 컨트롤을 사용합니다. 뭔가 같은 :

public class AnimatedZoomDecorator : Decorator { 

    public static readonly DependencyProperty ZoomLevelProperty = DependencyProperty.Register("ZoomLevel", 
     typeof(double), typeof(AnimatedZoomDecorator), new FrameworkPropertyMetadata(1.0, OnZoomLevelPropertyValueChanged)); 

    public double ZoomLevel { 
     get { return (double)this.GetValue(ZoomLevelProperty); } 
     set { this.SetValue(ZoomLevelProperty, value); } 
    } 

    private static void OnZoomLevelPropertyValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) { 
     AnimatedZoomDecorator control = d as AnimatedZoomDecorator; 
     if (control != null) { 
      ScaleTransform scaleTransform = control.LayoutTransform as ScaleTransform; 
      if (scaleTransform == null) 
       control.LayoutTransform = scaleTransform = new ScaleTransform(); 

      DoubleAnimation animation = new DoubleAnimation() { 
       To = control.ZoomLevel, 
       DecelerationRatio = 0.5, 
       Duration = new Duration(TimeSpan .FromMilliseconds(500)), 
      }; 

      scaleTransform.BeginAnimation(ScaleTransform.ScaleXProperty, animation); 
      scaleTransform.BeginAnimation(ScaleTransform.ScaleYProperty, animation); 
     } 
    } 

} 

다음과 같이 사용될 수있는 :

<DataTemplate> 
    <local:AnimatedZoomDecorator x:Name="zoom"> 
     <TextBlock Text="{Binding .}" /> 
    </local:AnimatedZoomDecorator> 

    <DataTemplate.Triggers> 

     <!-- shrink --> 
     <MultiDataTrigger> 
      <MultiDataTrigger.Conditions> 
       <Condition Value="False" 
         Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" /> 
       <Condition Value="1" 
         Binding="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" /> 
      </MultiDataTrigger.Conditions> 
      <Setter TargetName="zoom" Property="ZoomLevel" Value="0.5" /> 
     </MultiDataTrigger> 

     <!-- selected (Grow) --> 
     <MultiDataTrigger> 
      <MultiDataTrigger.Conditions> 
       <Condition Value="True" 
         Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}}" /> 
       <Condition Value="1" 
         Binding="{Binding Path=SelectedItems.Count, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBox}}}" /> 
      </MultiDataTrigger.Conditions> 
      <Setter TargetName="zoom" Property="ZoomLevel" Value="2" /> 
     </MultiDataTrigger> 

    </DataTemplate.Triggers> 
</DataTemplate> 
+0

선택하지 않은 경우 줌 = 1에 대한 계정 정보가 표시되지 않습니다. –

+0

@Jerry - 기본 줌이므로 트리거가 적용되지 않으면 1.0으로 재설정됩니다. – CodeNaked

+0

감사합니다. 문제를 확실히 설명했습니다. –

관련 문제