使用相同 ControlTemplate 的两个按钮中有一个没有动画
One out of two buttons using same ControlTemplate does not animate
我有一个 ListView，它使用 DataTemplate 呈现每个项目，每个项目都有一个编辑和删除按钮。这两个按钮是模板化的，因此它们使用 Path 来显示图标，并在鼠标悬停时使用情节提要动画。
动画改变了 Opacity 并使用触发器在 MouseOver 上添加阴影效果。我遇到的问题是，尽管两个按钮共享相同的模板，但只有其中一个具有所需的动画行为，当鼠标悬停在上面时无论 ListViewItem 是否 selected 不是。第二个（编辑按钮）不会动画，除非我先 select 它是 ListViewItem。
演示图片
未触及的 ListView：垃圾桶（删除）工作正常，而编辑完全突出显示。将鼠标移到编辑按钮上会导致播放 none 个动画。
在此状态下，ListViewItem 上没有鼠标，因此没有显示鼠标悬停效果（颜色变化等）。
将鼠标悬停在“删除”按钮上：“删除”按钮继续按预期工作。使用我的效果在鼠标悬停时突出显示。
在此状态（以及所有后续状态）中，ListViewItem 具有 MouseOver，导致样式反映它。
选择 ListViewItem 让“编辑”动画开始工作：当我 select ListViewItem 时，“编辑”按钮现在继续并开始正确设置动画。
使用选定 ListViewItem 的动画：现在您可以看到“编辑”按钮在鼠标悬停时亮起。
我不确定为什么共享相同模板的两个按钮会有不同的行为。
ListView
这是 ListView，使用 AdminQuantlistAttributeTemplate，渲染出您在上图中看到的内容。
<ListView DockPanel.Dock="Top"
Margin="5 0 0 0"
x:Name="AttributesListView"
ItemsSource="{Binding Path=AttributesView}"
ItemTemplate="{StaticResource AdminQuantlistAttributeTemplate}"
SelectedItem="{Binding Path=SelectedAttribute}"/>
项目模板
此项目模板包含两个有问题的按钮。我也试过 re-organize 它们，所以删除按钮是第一个。无论我按什么顺序将按钮放在 XAML 中，编辑按钮都会继续损坏，直到 ListViewItem 被 select 编辑。
<DataTemplate x:Key="AdminQuantlistAttributeTemplate"
DataType="qlModels:QuantlistAttribute">
<GroupBox>
<GroupBox.Header>
<TextBlock FontSize="14"
Foreground="{DynamicResource IdealForegroundColorBrush}">
<Run Text="Attribute" />
<Run Text="{Binding Path=SortOrder, Converter={StaticResource IncrementNumberConverter}, ConverterParameter=1}" />
</TextBlock>
</GroupBox.Header>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Left"
Margin="0 0 15 0">
<!-- The broken Edit Button -->
<Button Command="{Binding ElementName=AttributesListView,
Path=DataContext.EditAttributeCommand}"
Margin="0 0 0 20"
Template="{DynamicResource ButtonIconTemplate}"
ToolTip="Edit Quantlist Attribute">
<Rectangle Width="20"
Height="20"
Fill="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType=Button,
Mode=FindAncestor}}"
OpacityMask="{StaticResource EditIconBrush}" />
</Button>
<!-- The working Remove Button -->
<Button Command="{Binding ElementName=AttributesListView,
Path=DataContext.RemoveAttributeCommand}"
Template="{DynamicResource ButtonIconTemplate}"
ToolTip="Delete Quantlist Attribute">
<Rectangle Width="20"
Height="20"
Fill="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType=Button,
Mode=FindAncestor}}"
OpacityMask="{StaticResource DeleteIconBrush}" />
</Button>
</StackPanel>
<TextBlock DockPanel.Dock="Top">
<Run Text="Weight"
FontWeight="Bold" />
<Run Text="{Binding Path=AttributeWeight.Name}" />
</TextBlock>
<TextBlock Text="{Binding Path=Narrative}"
DockPanel.Dock="Top" />
<ItemsControl ItemsSource="{Binding Path=References}"
DockPanel.Dock="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0 0 20 0">
<Run Text="Reference:"
FontWeight="Bold"
FontSize="13" />
<Run Text="{Binding Path=Reference}" />
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
</GroupBox>
</DataTemplate>
ButtonIconTemplate
这是按钮实际使用的模板。请注意，我在多个位置使用此模板 through-out 应用程序并且它工作正常。它用于 GroupBox 和 Expander headers、具有多个按钮的 DataGrid 列以及 stand-alone 控件。只是在这个ListView中使用时（只放在我正在使用的应用程序中），它不起作用。
<ControlTemplate x:Key="ButtonIconTemplate"
TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.05" />
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0:0:0.05" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="ButtonRect"
Fill="Transparent" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Content="{TemplateBinding Content}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="-5"
Color="{DynamicResource BlackColor}"
Opacity="1"
BlurRadius="15" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
按钮使用的视觉画笔
<VisualBrush x:Key="DeleteIconBrush"
Stretch="Uniform">
<VisualBrush.Visual>
<Canvas Width="24"
Height="24">
<Path Fill="#FF000000"
Data="F1 M 25.3333,23.75L 50.6667,23.75C 51.5411,23.75 51.8541,27.3125 51.8541,27.3125L 24.1458,27.3125C 24.1458,27.3125 24.4589,23.75 25.3333,23.75 Z M 35.625,19.7917L 40.375,19.7917C 40.8122,19.7917 41.9583,20.9378 41.9583,21.375C 41.9583,21.8122 40.8122,22.9584 40.375,22.9584L 35.625,22.9584C 35.1878,22.9584 34.0416,21.8122 34.0416,21.375C 34.0416,20.9378 35.1878,19.7917 35.625,19.7917 Z M 27.7083,28.5L 48.2916,28.5C 49.1661,28.5 49.875,29.2089 49.875,30.0834L 48.2916,53.8334C 48.2916,54.7078 47.5828,55.4167 46.7083,55.4167L 29.2917,55.4167C 28.4172,55.4167 27.7083,54.7078 27.7083,53.8334L 26.125,30.0834C 26.125,29.2089 26.8339,28.5 27.7083,28.5 Z M 30.0833,31.6667L 30.4792,52.25L 33.25,52.25L 32.8542,31.6667L 30.0833,31.6667 Z M 36.4167,31.6667L 36.4167,52.25L 39.5833,52.25L 39.5833,31.6667L 36.4167,31.6667 Z M 43.1458,31.6667L 42.75,52.25L 45.5208,52.25L 45.9167,31.6667L 43.1458,31.6667 Z " />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
<VisualBrush x:Key="EditIconBrush"
Stretch="Uniform">
<VisualBrush.Visual>
<Canvas Width="24"
Height="24">
<Path Fill="{DynamicResource BlackBrush}"
Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
任何解决此问题的帮助都很棒。
编辑
事实证明，“编辑”按钮的 CanExecute 方法 return 为 false（这是预期的）。当我让 CanExecute return 始终为真时，动画正常工作。
所以现在的问题是，当按钮被禁用时，如何让故事板的东西全部工作？
我想问题是 EditAttributeCommand.CanExecute returns false 并且它阻止了动画。这是这两个按钮唯一不同的地方，这就是我猜测的原因。
我有一个 ListView，它使用 DataTemplate 呈现每个项目，每个项目都有一个编辑和删除按钮。这两个按钮是模板化的，因此它们使用 Path 来显示图标，并在鼠标悬停时使用情节提要动画。
动画改变了 Opacity 并使用触发器在 MouseOver 上添加阴影效果。我遇到的问题是，尽管两个按钮共享相同的模板，但只有其中一个具有所需的动画行为，当鼠标悬停在上面时无论 ListViewItem 是否 selected 不是。第二个（编辑按钮）不会动画，除非我先 select 它是 ListViewItem。
演示图片
未触及的 ListView：垃圾桶（删除）工作正常，而编辑完全突出显示。将鼠标移到编辑按钮上会导致播放 none 个动画。
在此状态下，ListViewItem 上没有鼠标，因此没有显示鼠标悬停效果（颜色变化等）。
将鼠标悬停在“删除”按钮上：“删除”按钮继续按预期工作。使用我的效果在鼠标悬停时突出显示。
在此状态（以及所有后续状态）中，ListViewItem 具有 MouseOver，导致样式反映它。
选择 ListViewItem 让“编辑”动画开始工作：当我 select ListViewItem 时，“编辑”按钮现在继续并开始正确设置动画。
使用选定 ListViewItem 的动画：现在您可以看到“编辑”按钮在鼠标悬停时亮起。
我不确定为什么共享相同模板的两个按钮会有不同的行为。
ListView
这是 ListView，使用 AdminQuantlistAttributeTemplate，渲染出您在上图中看到的内容。
<ListView DockPanel.Dock="Top"
Margin="5 0 0 0"
x:Name="AttributesListView"
ItemsSource="{Binding Path=AttributesView}"
ItemTemplate="{StaticResource AdminQuantlistAttributeTemplate}"
SelectedItem="{Binding Path=SelectedAttribute}"/>
项目模板
此项目模板包含两个有问题的按钮。我也试过 re-organize 它们，所以删除按钮是第一个。无论我按什么顺序将按钮放在 XAML 中，编辑按钮都会继续损坏，直到 ListViewItem 被 select 编辑。
<DataTemplate x:Key="AdminQuantlistAttributeTemplate"
DataType="qlModels:QuantlistAttribute">
<GroupBox>
<GroupBox.Header>
<TextBlock FontSize="14"
Foreground="{DynamicResource IdealForegroundColorBrush}">
<Run Text="Attribute" />
<Run Text="{Binding Path=SortOrder, Converter={StaticResource IncrementNumberConverter}, ConverterParameter=1}" />
</TextBlock>
</GroupBox.Header>
<DockPanel LastChildFill="True">
<StackPanel DockPanel.Dock="Left"
Margin="0 0 15 0">
<!-- The broken Edit Button -->
<Button Command="{Binding ElementName=AttributesListView,
Path=DataContext.EditAttributeCommand}"
Margin="0 0 0 20"
Template="{DynamicResource ButtonIconTemplate}"
ToolTip="Edit Quantlist Attribute">
<Rectangle Width="20"
Height="20"
Fill="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType=Button,
Mode=FindAncestor}}"
OpacityMask="{StaticResource EditIconBrush}" />
</Button>
<!-- The working Remove Button -->
<Button Command="{Binding ElementName=AttributesListView,
Path=DataContext.RemoveAttributeCommand}"
Template="{DynamicResource ButtonIconTemplate}"
ToolTip="Delete Quantlist Attribute">
<Rectangle Width="20"
Height="20"
Fill="{Binding Path=Foreground,
RelativeSource={RelativeSource AncestorType=Button,
Mode=FindAncestor}}"
OpacityMask="{StaticResource DeleteIconBrush}" />
</Button>
</StackPanel>
<TextBlock DockPanel.Dock="Top">
<Run Text="Weight"
FontWeight="Bold" />
<Run Text="{Binding Path=AttributeWeight.Name}" />
</TextBlock>
<TextBlock Text="{Binding Path=Narrative}"
DockPanel.Dock="Top" />
<ItemsControl ItemsSource="{Binding Path=References}"
DockPanel.Dock="Top">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Margin="0 0 20 0">
<Run Text="Reference:"
FontWeight="Bold"
FontSize="13" />
<Run Text="{Binding Path=Reference}" />
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DockPanel>
</GroupBox>
</DataTemplate>
ButtonIconTemplate
这是按钮实际使用的模板。请注意，我在多个位置使用此模板 through-out 应用程序并且它工作正常。它用于 GroupBox 和 Expander headers、具有多个按钮的 DataGrid 列以及 stand-alone 控件。只是在这个ListView中使用时（只放在我正在使用的应用程序中），它不起作用。
<ControlTemplate x:Key="ButtonIconTemplate"
TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="1"
Duration="0:0:0.05" />
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0:0:0.05" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="ButtonRect"
Fill="Transparent" />
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Content="{TemplateBinding Content}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver"
Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="-5"
Color="{DynamicResource BlackColor}"
Opacity="1"
BlurRadius="15" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
按钮使用的视觉画笔
<VisualBrush x:Key="DeleteIconBrush"
Stretch="Uniform">
<VisualBrush.Visual>
<Canvas Width="24"
Height="24">
<Path Fill="#FF000000"
Data="F1 M 25.3333,23.75L 50.6667,23.75C 51.5411,23.75 51.8541,27.3125 51.8541,27.3125L 24.1458,27.3125C 24.1458,27.3125 24.4589,23.75 25.3333,23.75 Z M 35.625,19.7917L 40.375,19.7917C 40.8122,19.7917 41.9583,20.9378 41.9583,21.375C 41.9583,21.8122 40.8122,22.9584 40.375,22.9584L 35.625,22.9584C 35.1878,22.9584 34.0416,21.8122 34.0416,21.375C 34.0416,20.9378 35.1878,19.7917 35.625,19.7917 Z M 27.7083,28.5L 48.2916,28.5C 49.1661,28.5 49.875,29.2089 49.875,30.0834L 48.2916,53.8334C 48.2916,54.7078 47.5828,55.4167 46.7083,55.4167L 29.2917,55.4167C 28.4172,55.4167 27.7083,54.7078 27.7083,53.8334L 26.125,30.0834C 26.125,29.2089 26.8339,28.5 27.7083,28.5 Z M 30.0833,31.6667L 30.4792,52.25L 33.25,52.25L 32.8542,31.6667L 30.0833,31.6667 Z M 36.4167,31.6667L 36.4167,52.25L 39.5833,52.25L 39.5833,31.6667L 36.4167,31.6667 Z M 43.1458,31.6667L 42.75,52.25L 45.5208,52.25L 45.9167,31.6667L 43.1458,31.6667 Z " />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
<VisualBrush x:Key="EditIconBrush"
Stretch="Uniform">
<VisualBrush.Visual>
<Canvas Width="24"
Height="24">
<Path Fill="{DynamicResource BlackBrush}"
Data="M20.71,4.04C21.1,3.65 21.1,3 20.71,2.63L18.37,0.29C18,-0.1 17.35,-0.1 16.96,0.29L15,2.25L18.75,6M17.75,7L14,3.25L4,13.25V17H7.75L17.75,7Z" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
任何解决此问题的帮助都很棒。
编辑
事实证明，“编辑”按钮的 CanExecute 方法 return 为 false（这是预期的）。当我让 CanExecute return 始终为真时，动画正常工作。
所以现在的问题是，当按钮被禁用时，如何让故事板的东西全部工作？
我想问题是 EditAttributeCommand.CanExecute returns false 并且它阻止了动画。这是这两个按钮唯一不同的地方，这就是我猜测的原因。