Get all images that mouse is not over in WPF

Question

I have a WPF Window that gets filled with multple images, I am trying to find a way to blur all the images the mouse is NOT hovering over.

I am using this event to effect images that I am hovering over:

private void Window_MouseMove(object sender, MouseEventArgs e)
{
    if (e.OriginalSource is Image)
    {
        ((Image)e.OriginalSource).Effect = new BlurEffect();
    }
}

This is how I created the images

        StackPanel imgStkpnl = new StackPanel();

        foreach (var urll in Tools.MyGlobals.GoogleImageURLs)
        {
            var image = new System.Windows.Controls.Image();
            var fullFilePath = urll;

            BitmapImage bitmap = new BitmapImage();
            bitmap.BeginInit();
            try
            {
                bitmap.UriSource = new Uri(fullFilePath, UriKind.Absolute);
                bitmap.EndInit();

                image.Source = bitmap;
                image.Stretch = Stretch.Uniform;
                image.HorizontalAlignment = HorizontalAlignment.Left;

                imgStkpnl.Children.Add(image);
            }
            catch { }
        }

If anyone knows a way to effect all the other images that would be a great help, I'm a big newby so go easy on me :) Thanks

Answer 1

I was able to achieve your desired effect using this XAML:

<Window x:Class="Solutions.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"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <StackPanel>

        <StackPanel.Resources>
            <BlurEffect x:Key="BlurEffect"></BlurEffect>

            <Style TargetType="Image">
                <Setter Property="Effect" Value="{StaticResource BlurEffect}"></Setter>

                <Style.Triggers>
                    <EventTrigger RoutedEvent="MouseEnter" >
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Effect">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Null}"></DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Effect">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource BlurEffect}"></DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                </Style.Triggers>
            </Style>
        </StackPanel.Resources>

        <Image Source="cat.jpg" Width="200"></Image>
        <Image Source="cat.jpg" Width="200"></Image>
        <Image Source="cat.jpg" Width="200"></Image>
    </StackPanel>
</Window>

Following on from your comment, to leave the image unblurred, just remove the MouseLeave event trigger