使用StoryBoard的WPF如何單擊每次重置樣式

Question

因此，我剛剛使用情節提要動畫創建了一個自定義控件。

啟動動畫的事件觸發看起來像這樣

<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來重置顏色。 想象一下..我單擊一個按鈕，邊框變為藍色。 我單擊另一個按鈕（相同類型），該按鈕變為藍色，並且按鈕一個重置為白色。

此刻，就像我單擊一個按鈕一樣，它變成藍色。 我單擊另一個，它也會變成藍色，但是舊的保持藍色。

這就是它的樣子

Answer 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替換為action：

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