如何避免将 ControlTemplate 中的 Coloranimation 应用于使用模板的每个对象
How to avoid that a Coloranimation in a ControlTemplate gets applied to every object using the template
我在样式的 ControlTemplate 中声明了 ColorAnimations。
它应该做什么:
每当鼠标悬停在对象上时,这个特定对象的颜色应该是动画的。
它的作用是:
每当我将鼠标悬停在其中一个对象上时,都会为应用样式的每个对象设置动画颜色,即使 属性 激活动画并未在所有对象上发生变化。
我之前尝试过的:
我尝试使用 Eventtrigger 而不是普通触发器,但问题仍然存在。
我也尝试使用 "Name" 属性 而不是 "x:Name" 但这也没有帮助。
也没有使用 Storyboard.TargetName 但 Storyboard.Target 并使用与 RelativeSource 的绑定来让它找到对象.. 每当我将鼠标悬停在任何对象上时,使用这种样式的每个对象都会动画化
如果我使用 Setters 而不是故事板和 ColorAnimations 来更改背景,它会按预期工作。
风格
<Style x:Key="Fraction_ScrollViewer_ScrollBar_Thumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border
x:Name="Border"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderThickness="0" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard
Name="IsMouseOver_True"
HandoffBehavior="Compose">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
To="{StaticResource 'Color_CoolGrey'}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard
Name="IsMouseOver_False">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
To="{StaticResource 'Color_MidGrey'}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
Thumb 样式用于 ScrollViewer 中使用的 Scrollbar 样式。
然后在 2 个位置使用 Scrollviewer Style:
1:
<Style x:Key="LabelTreeView" TargetType="{x:Type TreeView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeView}">
<ScrollViewer
Style="{StaticResource ScrollViewer}"
Focusable="False"
CanContentScroll="False"
Padding="4">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2:
<ScrollViewer
Style="{StaticResource ScrollViewer}"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ItemsControl
BorderThickness="0"
Background="{StaticResource Brush_Transparent}"
ItemTemplate="{StaticResource CharacterSequenceChar}"
ItemsSource="{Binding DisplayedCharacterSequenceCharacters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
是什么导致了这种行为以及如何在仍然使用动画的情况下避免这种行为?
显然所有按钮在其背景中共享同一个 Brush 实例 属性。
您可以明确地为模板中的每个边框指定一个单独的画笔:
<Border x:Name="Border" ...>
<Border.Background>
<SolidColorBrush Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"/>
</Border.Background>
</Border>
我在样式的 ControlTemplate 中声明了 ColorAnimations。
它应该做什么:
每当鼠标悬停在对象上时,这个特定对象的颜色应该是动画的。
它的作用是:
每当我将鼠标悬停在其中一个对象上时,都会为应用样式的每个对象设置动画颜色,即使 属性 激活动画并未在所有对象上发生变化。
我之前尝试过的:
我尝试使用 Eventtrigger 而不是普通触发器,但问题仍然存在。 我也尝试使用 "Name" 属性 而不是 "x:Name" 但这也没有帮助。 也没有使用 Storyboard.TargetName 但 Storyboard.Target 并使用与 RelativeSource 的绑定来让它找到对象.. 每当我将鼠标悬停在任何对象上时,使用这种样式的每个对象都会动画化
如果我使用 Setters 而不是故事板和 ColorAnimations 来更改背景,它会按预期工作。
风格
<Style x:Key="Fraction_ScrollViewer_ScrollBar_Thumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border
x:Name="Border"
CornerRadius="5"
Background="{TemplateBinding Background}"
BorderThickness="0" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard
Name="IsMouseOver_True"
HandoffBehavior="Compose">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
To="{StaticResource 'Color_CoolGrey'}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard
Name="IsMouseOver_False">
<Storyboard>
<ColorAnimation
Storyboard.TargetName="Border"
Storyboard.TargetProperty="Background.(SolidColorBrush.Color)"
To="{StaticResource 'Color_MidGrey'}"
Duration="0:0:0.2" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
Thumb 样式用于 ScrollViewer 中使用的 Scrollbar 样式。 然后在 2 个位置使用 Scrollviewer Style:
1:
<Style x:Key="LabelTreeView" TargetType="{x:Type TreeView}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeView}">
<ScrollViewer
Style="{StaticResource ScrollViewer}"
Focusable="False"
CanContentScroll="False"
Padding="4">
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
2:
<ScrollViewer
Style="{StaticResource ScrollViewer}"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Auto">
<ItemsControl
BorderThickness="0"
Background="{StaticResource Brush_Transparent}"
ItemTemplate="{StaticResource CharacterSequenceChar}"
ItemsSource="{Binding DisplayedCharacterSequenceCharacters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
是什么导致了这种行为以及如何在仍然使用动画的情况下避免这种行为?
显然所有按钮在其背景中共享同一个 Brush 实例 属性。
您可以明确地为模板中的每个边框指定一个单独的画笔:
<Border x:Name="Border" ...>
<Border.Background>
<SolidColorBrush Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"/>
</Border.Background>
</Border>