时间戳

首页 > 解决方案 > WPF 使用 StoryBoard 如何在每次点击时重置样式

c# - WPF 使用 StoryBoard 如何在每次点击时重置样式

问题描述

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

启动动画的事件触发器看起来像这样

<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 重置颜色。想象一下……我点击一个按钮，边框变成蓝色。我单击另一个按钮（相同类型），那个按钮变成蓝色，按钮一个重置为白色。

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

这就是它的样子 在此处输入图像描述

标签： c#.netwpfxaml

解决方案

MouseDown不是推荐的方法来指示选择 a ListViewItem。更可靠的方法是在Style.

在此处输入图像描述

查看下面的代码，你会发现我使用Triggerin aStyle来处理ListViewItem选择状态。如果您使用MouseDownorMouseUp事件，您会注意到您无法枚举所有影响选择的事件。

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

推荐阅读