WPF - XAML - 从父样式调用嵌套样式中的动画
WPF - XAML - Call an animation in a nested style from the parent style
我正在尝试修改 ItemsControl 使其具有水印以指示放入其中的内容的行为。
我在 VisualBrush 中使用标签来显示单词 "OR" 作为 ItemsControl 的背景(该控件将包含 属性 过滤器,它们将被“或”在一起)。背景变化由 ItemsControl 上的 IsMouseOver 触发。
问题是这样的:如果我直接在 Label 中设置不透明度,我可以将我的 VisualBrush(参见 xaml)设置为 appear/disappear,但如果我尝试设置不透明度,则无法设置动画对标签使用嵌套样式。我尝试了几种方法都没有成功,因此非常感谢收到任何关于我的错误的指示。
我已经包含了(一个注释掉了)我试过的两个动画。我还尝试使用 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>
最后我发现我想多了。嵌套样式是不必要的。解决方案是将背景设置为 ItemsControl 中它自己的标记内的 VisualBrush(其内容设置为所需的最终外观),然后直接在 ItemsControl 上使用 EventTriggers 为 VisualBrush 的不透明度设置动画。请注意管理鼠标和拖动用户的各种事件 activity。
感谢所有思考这个问题的人。最后的 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>
我正在尝试修改 ItemsControl 使其具有水印以指示放入其中的内容的行为。
我在 VisualBrush 中使用标签来显示单词 "OR" 作为 ItemsControl 的背景(该控件将包含 属性 过滤器,它们将被“或”在一起)。背景变化由 ItemsControl 上的 IsMouseOver 触发。
问题是这样的:如果我直接在 Label 中设置不透明度,我可以将我的 VisualBrush(参见 xaml)设置为 appear/disappear,但如果我尝试设置不透明度,则无法设置动画对标签使用嵌套样式。我尝试了几种方法都没有成功,因此非常感谢收到任何关于我的错误的指示。
我已经包含了(一个注释掉了)我试过的两个动画。我还尝试使用 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>
最后我发现我想多了。嵌套样式是不必要的。解决方案是将背景设置为 ItemsControl 中它自己的标记内的 VisualBrush(其内容设置为所需的最终外观),然后直接在 ItemsControl 上使用 EventTriggers 为 VisualBrush 的不透明度设置动画。请注意管理鼠标和拖动用户的各种事件 activity。
感谢所有思考这个问题的人。最后的 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>