WPF Using the StoryBoard How do I reset styles every click

Question

So I just created a custom control with a storyboard animation.

And the eventtrigger that starts the animation looks like this

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

As you can see, on the MouseDown event I am changing the color of a border, that's it.

How ever after clicking it and it changes color, let's say I click another control. In that case I want to set the most recent border's background to White. At the moment it's changing the border color of every instance of the control I have on the form.

I need to be able to reset the colors using XAML somehow every click so. Picture this.. I click a button, the border goes blue. I click another button (same type) and that one gets blue and button one resets to white.

At the moment it's like I click a button, it turns blue. I click another one and it turns blue too but the old one stays blue.

This is what it looks like

Answer 1

MouseDown is not the recommended method to indicate the selection of a ListViewItem . The more reliable method is to use the property trigger in a Style .

View the code below, and you'll find that I use the Trigger in a Style to handle the ListViewItem selection status. If you use the MouseDown or MouseUp event, you'll notice that you cannot enumerate all the event that affects the selection.

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

When you want to keep the animations on, just replace the setter to actions:

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