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

Question

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

动画改变了 Opacity 并且触发器被用来在 MouseOver 上添加阴影效果。我遇到的问题是，尽管两个按钮共享相同的模板，但无论是否未选择 ListViewItem，只有其中一个按钮在鼠标悬停时具有所需的动画效果。除非我首先选择它的 ListViewItem，否则第二个按钮(“编辑”按钮)不会设置动画。

演示图片

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

在此状态下，ListViewItem 上没有鼠标，因此没有显示 MouseOver 效果(颜色变化等)。

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

在此状态(以及所有后续状态)中，ListViewItem 具有 MouseOver，导致样式反射(reflect)它。

选择 ListViewItem 让“编辑”动画开始工作:当我选择 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}"/>

项目模板

此项目模板包含两个有问题的按钮。我还尝试重新组织它们，以便删除按钮位于第一位。无论我在 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>

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

编辑

事实证明，“编辑”按钮的 CanExecute 方法返回 false(这是预期的)。当我让 CanExecute 始终返回 true 时，动画正常工作。

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

Answer 1

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