2016-08-05 3 views
0

ItemsControl을 수정하여 워터 마크를 삽입하여 해당 콘텐츠의 비헤이비어를 나타냅니다.WPF - XAML - 상위 스타일의 중첩 스타일로 애니메이션 호출

VisualBrush 안의 Label을 사용하여 ItemsControl의 배경으로 단어 "OR"를 표시합니다 (이 컨트롤에는 Or'd가 될 속성 필터가 포함됨). 배경 변경은 ItemsControl의 IsMouseOver에 의해 트리거됩니다.

문제는 다음과 같습니다. 레이블에 직접 불투명도를 설정하면 내 VisualBrush (xaml 참조)를 표시하거나 사라지게 할 수 있지만 라벨에 중첩 스타일을 사용하려고하면 불투명도가 활성화되지 않습니다. . 나는 성공하지 못한 채 몇 가지 접근법을 시도해 왔기 때문에 내 실수에 대한 어떤 조언도 감사하게 받아 들여질 것이다.

나는 두 애니메이션을 모두 포함 시켰습니다. ColorAnimation으로 Label에 Foreground를 설정해 보았습니다.

많은 감사 이안 카슨 결국

<ItemsControl x:Name="OrFilterItemsTarget" 
       ItemsSource="{Binding Assets.OrFilters}" 
       ItemTemplateSelector="{StaticResource FilterTargetTemplateSelector}" 
       ItemContainerStyle="{StaticResource DraggableItemStyle}" 
       BorderThickness="0,0,0,0.5" 
       BorderBrush="DimGray" 
       AllowDrop="True" 
       IsHitTestVisible="True" 
       Margin="0,2.95,15.934,77" 
       HorizontalAlignment="Right" 
       Width="105"> 
    <ItemsControl.Style> 
     <Style TargetType="{x:Type ItemsControl}"> 
      <Style.Resources> 
       <Style x:Key="LabelStyle" 
         TargetType="{x:Type Label}"> 
        <Style.Resources> 
         <Storyboard x:Key="FadeUp"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Storyboard.TargetProperty="Opacity" 
                  FillBehavior="HoldEnd"> 
           <SplineDoubleKeyFrame KeyTime="00:00:2" 
                Value="0.5" /> 
          </DoubleAnimationUsingKeyFrames> 
          <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" 
              From="0" To="0.5" 
              Duration="0:0:2" />--> 
         </Storyboard> 
         <Storyboard x:Key="FadeDown"> 
          <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
                  Storyboard.TargetProperty="Opacity" 
                  FillBehavior="Stop"> 
           <SplineDoubleKeyFrame KeyTime="00:00:2" 
                 Value="0" /> 
          </DoubleAnimationUsingKeyFrames> 
          <!--<DoubleAnimation Storyboard.TargetProperty="Opacity" 
              From="0.5" To="0" 
              Duration="0:0:2" />--> 
         </Storyboard> 
        </Style.Resources> 
        <Style.Triggers> 
         <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=OrFilterItemsTarget}" 
            Value="True"> 
          <DataTrigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource FadeUp}" /> 
          </DataTrigger.EnterActions> 
         </DataTrigger> 
         <DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=OrFilterItemsTarget}" 
             Value="False"> 
          <DataTrigger.EnterActions> 
           <BeginStoryboard Storyboard="{StaticResource FadeDown}" /> 
          </DataTrigger.EnterActions> 
         </DataTrigger> 
        </Style.Triggers> 
       </Style> 
       <VisualBrush x:Key="FilterContentType" 
          AlignmentX="Center" 
          AlignmentY="Center" 
          Stretch="None"> 
        <VisualBrush.Visual> 
         <Label Content="OR" 
           Foreground="DarkGray" 
           Style="{StaticResource LabelStyle}"> 
         </Label> 
        </VisualBrush.Visual> 
       </VisualBrush> 
      </Style.Resources> 
      <Style.Triggers> 
       <Trigger Property="IsMouseOver" 
         Value="True"> 
        <Setter Property="Background" 
          Value="{StaticResource FilterContentType}" /> 
       </Trigger> 
       <Trigger Property="IsMouseOver" 
         Value="False"> 
        <Setter Property="Background" 
          Value="Transparent" /> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </ItemsControl.Style> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Orientation="Horizontal" 
         Background="Transparent"> 
       <i:Interaction.Behaviors> 
        <ei:FluidMoveBehavior AppliesTo="Children" 
              Duration="0:0:0.3"> 
         <ei:FluidMoveBehavior.EaseY> 
          <BackEase EasingMode="EaseIn" 
             Amplitude="0.1" /> 
         </ei:FluidMoveBehavior.EaseY> 
        </ei:FluidMoveBehavior> 
       </i:Interaction.Behaviors> 
      </WrapPanel> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl> 

답변

0

나는 문제를-생각하는 동안 나는 깨달았다. 중첩 된 스타일은 필요하지 않았습니다. 해결책은 ItemsControl 내의 자체 태그 안에 VisualBrush (내용을 원하는 최종 모양으로 설정)를 설정 한 다음 ItemsControl에서 직접 EventTriggers를 사용하여 VisualBrush의 불투명도를 애니메이션으로 만드는 것이 었습니다. 마우스를 움직이거나 사용자 활동을 끌기 위해 다양한 이벤트를 기록하십시오.

이 문제에 대해 생각해 본 사람 덕분입니다. 최종 XAML은 이렇게 보입니다. 그러면 유용 할 것입니다.

<ItemsControl x:Name="OrFilterItemsTarget" 
       ItemsSource="{Binding Assets.OrFilters}" 
       ItemTemplateSelector="{StaticResource FilterTargetTemplateSelector}" 
       ItemContainerStyle="{StaticResource DraggableItemStyle}" 
       BorderThickness="0,0,0,0.5" 
       BorderBrush="DimGray" 
       AllowDrop="True" 
       IsHitTestVisible="True" 
       Margin="0,2.95,15.934,77" 
       HorizontalAlignment="Right" 
       Width="105"> 
    <ItemsControl.Background> 
     <VisualBrush x:Name="OrFilterContentType" 
         AlignmentX="Center" 
         AlignmentY="Center" 
         Stretch="None" 
         Opacity="0"> 
      <VisualBrush.Visual> 
       <Label Content="OR" 
         Foreground="DarkGray" 
         Opacity="0.5" /> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </ItemsControl.Background> 
    <ItemsControl.Triggers> 
     <EventTrigger RoutedEvent="ItemsControl.MouseEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="0" To="1" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.DragEnter"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="0" 
              To="1" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.MouseLeave"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.DragLeave"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" 
              To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
     <EventTrigger RoutedEvent="ItemsControl.Drop"> 
      <EventTrigger.Actions> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetName="OrFilterContentType" 
              Storyboard.TargetProperty="(Brush.Opacity)" 
              From="1" 
              To="0" 
              Duration="0:0:0.7" /> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger.Actions> 
     </EventTrigger> 
    </ItemsControl.Triggers> 
    <ItemsControl.ItemsPanel> 
     <ItemsPanelTemplate> 
      <WrapPanel Orientation="Horizontal" 
         Background="Transparent"> 
       <i:Interaction.Behaviors> 
        <ei:FluidMoveBehavior AppliesTo="Children" 
              Duration="0:0:0.3"> 
         <ei:FluidMoveBehavior.EaseY> 
          <BackEase EasingMode="EaseIn" 
             Amplitude="0.1" /> 
         </ei:FluidMoveBehavior.EaseY> 
        </ei:FluidMoveBehavior> 
       </i:Interaction.Behaviors> 
      </WrapPanel> 
     </ItemsPanelTemplate> 
    </ItemsControl.ItemsPanel> 
</ItemsControl>