style trigger on mouse double click to show/hide in wpf

Question

I have a simple project here. How can I make the red dot, start out invisible and then when the listitem is doubleclicked the RedDot for the clicked item, becomes visible for the length of 1 second, then fades back out to 0 over the length of 1 second. I've looked up style triggers and wasn't clear on how to begin going about doing this.

Or as mentioned below If someone could show how to just add a simple animation that runs on doubleclick event

MainWindow.xaml

<Window x:Class="DoubleExample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DoubleExample"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="200">

    <Window.DataContext>
        <local:MainWindowViewModel/>
    </Window.DataContext>

    <Grid>
        <ListView ItemsSource="{Binding People}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="Name" Width="200">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="*"/>
                                    </Grid.ColumnDefinitions>
                                    <TextBlock Grid.Column="0" Text="{Binding Name}" Foreground="Blue" Cursor="Hand" />
                                    <Ellipse Grid.Column="1" Width="10" HorizontalAlignment="Right" Height="10" Fill="Red" Margin="20,0,0,0"  VerticalAlignment="Center"/>
                                </Grid>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

MainWindowViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;

namespace DoubleExample
{
    public class MainWindowViewModel : NotifyBase
    {
        private ObservableCollection<Person> people;
        public ObservableCollection<Person> People
        {
            get { return people; }
            set
            {
                people = value;
                NotifyPropertyChanged("People");
            }
        }


        public MainWindowViewModel()
        {
            People = new ObservableCollection<Person>();

            People.Add(new Person() { Name = "Kim" });
            People.Add(new Person() { Name = "Candy" });
            People.Add(new Person() { Name = "Doug" });

            Console.WriteLine(People.Count);
        }
    }

    public class Person
    {
        public string Name { get; set; }
    }

    public class NotifyBase : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        public void NotifyPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChangedEventHandler handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }
    }
}

Why do you want to make it a style? Couldn't you just add a simple animation that runs on doubleclick event? — Sami, Jan 07 '16 at 20:52

score 1 · Accepted Answer · edited May 23 '17 at 11:51

As per the DoubleClick, there doesn't seem to be a handler built-in. This answer gives the details on how to bind a DoubleClick to a ListItem. For the animation, here's an example:

XAML:

<Ellipse Name="ball" Fill="Red" Width="30" Height="30" Opacity="0" />

Code-behind:

System.Windows.Media.Animation.DoubleAnimation animation = new System.Windows.Media.Animation.DoubleAnimation();
animation.To = 1;
animation.Duration = TimeSpan.FromSeconds(1);
animation.AccelerationRatio = 0.25;
animation.DecelerationRatio = 0.25;
animation.AutoReverse = true;
ball.BeginAnimation(Ellipse.OpacityProperty, animation);

Put this in the event handler. This gives a single flash on the red ball. There is an all-XAML way for this also, but personally I prefer the code-behind.

style trigger on mouse double click to show/hide in wpf

1 Answers1