WPF - XAML - 從父風格調用嵌套樣式的動畫

Question

我試圖修改一個ItemsControl以具有水印來指示放入其中的內容的行爲。我使用VisualBrush內的標籤來顯示單詞「OR」作爲ItemsControl的背景（控件將包含將Or'd在一起的屬性過濾器）。 ItemsControl上的IsMouseOver會觸發背景變化。

問題是這樣的：我可以讓我的VisualBrush（請參閱xaml）出現/消失，如果我直接在標籤中設置不透明度，但我不能讓不透明度動畫，如果我嘗試使用標籤的嵌套樣式。我已經嘗試了幾種方法，但沒有成功，所以我會感激地接受任何關於我的錯誤的指示。

我已經包括（一個註釋掉）我試過的兩個動畫。我也嘗試用ColorAnimation設置標籤上的前景，但沒有成功。

非常感謝 伊恩·卡森

<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> 

Answer 1

最後，我意識到我是過度思考的問題。嵌套樣式是不必要的。解決方案是將背景設置爲ItemsControl內部的VisualBrush（其內容設置爲期望的最終外觀），然後使用EventController直接在ItemsControl上設置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>