使用相同 ControlTemplate 的两个按钮中的一个没有动画答案

【问题标题】：One out of two buttons using same ControlTemplate does not animate使用相同 ControlTemplate 的两个按钮中的一个没有动画
【发布时间】：2015-05-11 21:02:36
【问题描述】：

我有一个ListView，它使用DataTemplate 来渲染每个项目，每个项目都有一个编辑和删除按钮。这两个按钮是模板化的，因此它们使用Path 来显示图标，并在鼠标悬停时使用情节提要进行动画处理。

动画改变Opacity，并使用触发器在MouseOver 上添加阴影效果。我遇到的问题是，尽管两个按钮共享相同的模板，但只有一个按钮在鼠标悬停时具有所需的动画行为，无论是否未选择 ListViewItem。第二个（编辑按钮）不会动画，除非我先选择它的 ListViewItem。

图片展示

Untouched ListView：垃圾桶（删除）工作正常，而编辑完全突出显示。将鼠标移到编辑按钮上不会播放任何动画。

在这种状态下，ListViewItem 没有鼠标悬停，因此没有显示 MouseOver 效果（颜色变化等）。

将鼠标悬停在“删除”按钮上：删除按钮继续按预期工作。用我的效果突出显示鼠标。

在此状态（以及所有后续状态）中，ListViewItem 具有 MouseOver，导致样式反映它。

选择 ListViewItem 让 Edit 动画开始工作： 当我选择 ListViewItem 时，Edit 按钮现在继续前进并开始向右制作动画。

Animations Working w/ Selected ListViewItem：现在您可以看到“编辑”按钮在鼠标悬停时亮起。

我不确定为什么共享同一个模板的两个按钮会有不同的行为。

列表视图

这是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}"/>

项目模板

此项目模板包含有问题的两个按钮。我也尝试重新组织它们，以便首先删除按钮。我将按钮放在 XAML 中的顺序无关紧要，编辑按钮会继续损坏，直到选择 ListViewItem。

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

按钮图标模板

这是按钮实际使用的模板。请注意，我在整个应用程序的多个位置使用此模板，它工作正常。它用于 GroupBox 和 Expander 标题、具有多个按钮的 DataGrid 列以及作为独立控件。只是在此 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>

任何解决此问题的帮助都会很棒。

编辑

事实证明，Edit 按钮的 CanExecute 方法返回 false（这是预期的）。当我让 CanExecute 始终返回 true 时，动画可以正常工作。

所以现在的问题是，当按钮被禁用时，我如何让情节提要的东西全部工作？

【问题讨论】：

该面板在第一个屏幕截图中是否处于活动状态？为什么第一个屏幕截图中列表视图的背景颜色不同？那个时候鼠标在上面吗？我对这里的进展有点困惑（但问题的细节很好）
也许你的 EditAttributeCommand.CanExecute 返回 false，当未选择项目时，这会导致动画不起作用？
@MatthewFrontino 抱歉，第一张图片没有鼠标悬停在 ListViewItem 上。剩下的图片可以。我更新了 OP 来说明这一点。 @WojciechKulik 这正是问题所在！我将相应地更新我的问题，因为现在的问题是，由于 CanExecute 禁用了按钮，我如何在 IsEnabled=False 时允许动画工作。

标签： wpf datatemplate controltemplate visualstatemanager

【解决方案1】：

我猜问题是 EditAttributeCommand.CanExecute 返回 false 并且它阻止了动画。这是这两个按钮唯一不同的地方，这就是我猜测的原因。

【讨论】：

这实际上是问题所在。按钮被禁用时我无法使用动画吗？
我会将其标记为已回答并发布一个新问题，询问我是否可以为 MouseOver 上的禁用按钮设置动画，以免使该主题偏离其原始主题。再次感谢。
不客气，我正在考虑这个问题。嗯...我猜它会阻止更改 VisualStates，但您可以使用 MouseEnter 事件手动完成。
查看完之后，我的 CanExecute 唯一要做的就是确保首先选择了一个项目。我不希望用户必须首先选择ListViewItem，所以我删除了CanExecute 并更新了按钮以将他们的DataContext 作为CommandParameter 传递。这消除了在这种情况下对 CanExecute 的需求。