WPF 使用 StoryBoard 如何在每次点击时重置样式答案

【问题标题】：WPF Using the StoryBoard How do I reset styles every clickWPF 使用 StoryBoard 如何在每次点击时重置样式
【发布时间】：2018-08-18 16:34:29
【问题描述】：

所以我刚刚创建了一个带有故事板动画的自定义控件。

而启动动画的事件触发器是这样的

<EventTrigger RoutedEvent="MouseDown">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <ColorAnimation
                                            Storyboard.TargetName="SelectedBorder"
                                            Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
                                            To="#00C8FC" Duration="0:0:0.25">
                                        </ColorAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>

如您所见，在MouseDown 事件中，我正在更改边框的颜色，就是这样。

点击它并改变颜色后，假设我点击了另一个控件。在这种情况下，我想将最近边框的背景设置为白色。目前它正在改变表单上每个控件实例的边框颜色。

我需要能够以某种方式在每次点击时使用 XAML 重置颜色。画这个。。我单击一个按钮，边框变为蓝色。我单击另一个按钮（相同类型），那个按钮变成蓝色，而按钮一个重置为白色。

现在就像我点击一个按钮，它变成蓝色。我点击另一个，它也变成蓝色，但旧的保持蓝色。

这就是它的样子

【问题讨论】：

您想保留它直到单击另一个按钮，还是只在每个按钮上按下鼠标按钮？
我希望它是蓝色的，直到我点击另一个按钮
那你的方法是错误的。您应该改用 RadioButtons。创建和使用 RadioButton 样式和模板。
啊！好想法
您可能还想看看视觉状态。见这里：docs.microsoft.com/en-us/dotnet/framework/wpf/controls/…

标签： c# .net wpf xaml

【解决方案1】：

MouseDown 不是表示选择ListViewItem 的推荐方法。更可靠的方法是在Style 中使用属性触发器。

查看下面的代码，你会发现我在Style 中使用了Trigger 来处理ListViewItem 的选择状态。如果您使用MouseDown 或MouseUp 事件，您会注意到无法枚举所有影响选择的事件。

<ListView>
    <ListViewItem>Coll Programmer1</ListViewItem>
    <ListViewItem>MinecraftGeek1</ListViewItem>
    <ListViewItem>Steve</ListViewItem>
    <ListViewItem>John</ListViewItem>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid Name="RootPanel" Background="Transparent" Height="48">
                            <Rectangle Name="SelectedBorder" Width="8" Fill="#00c9fe"
                                       HorizontalAlignment="Left" Visibility="Collapsed" />
                            <ContentPresenter Margin="12 0 0 0" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter TargetName="SelectedBorder" Property="Visibility" Value="Visible" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="RootPanel" Property="Background" Value="#00c9fe" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

当你想保持动画打开时，只需将 setter 替换为操作：

<ListView>
    <ListViewItem>Coll Programmer1</ListViewItem>
    <ListViewItem>MinecraftGeek1</ListViewItem>
    <ListViewItem>Steve</ListViewItem>
    <ListViewItem>John</ListViewItem>
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListViewItem">
                        <Grid Name="RootPanel" Background="Transparent" Height="48">
                            <Rectangle Name="SelectedBorder" Width="8" Fill="#00C8FC"
                                   HorizontalAlignment="Left" Opacity="0.0" />
                            <ContentPresenter Margin="12 0 0 0" />
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Trigger.EnterActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="SelectedBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1" Duration="0:0:0.25">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.EnterActions>
                                <Trigger.ExitActions>
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="SelectedBorder"
                                                Storyboard.TargetProperty="Opacity"
                                                Duration="0:0:0.25">
                                            </DoubleAnimation>
                                        </Storyboard>
                                    </BeginStoryboard>
                                </Trigger.ExitActions>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="RootPanel" Property="Background" Value="#00C8FC" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListView.ItemContainerStyle>
</ListView>

【讨论】：