Справка по наложению WPF

Question

Я пытаюсь создать такое наложение, когда мышь перемещается над изображением.как мне это сделать с помощью WPF?

пожалуйста, совет

Answer 1

Вы создаете как изображение, так и наложение, и привязываете свойство видимости наложения к свойству IsMouseOver изображения и наложения.

Вы также можете сделать это с помощью триггеров вместо привязки.Это тоже работает.

Обновление: вот пример кода.XAML может выглядеть так:

<Grid>
    <Grid.Resources>
        <local:OverlayVisibilityConverter x:Key="OverlayVisibilityConverter" />
    </Grid.Resources>
    <Image x:Name="myImage" Source="MyImage.JPG" />
    <Image x:Name="myOverlay" 
           Source="MyOverlay.jpg"
           VerticalAlignment="Center"
           Opacity="0.2">
        <Image.Visibility>
            <MultiBinding Converter="{StaticResource OverlayVisibilityConverter}">
                <Binding ElementName="myOverlay" Path="IsMouseOver" />
                <Binding ElementName="myImage" Path="IsMouseOver" />
            </MultiBinding>
        </Image.Visibility>
    </Image>
</Grid>

Конечно, оверлей не должен быть изображением и может быть чем угодно.Я просто использовал изображение в образце.Непрозрачность может быть любой между 0 и 1.

Код для конвертера может выглядеть следующим образом:

   class OverlayVisibilityConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            var isMouseOverOverlay = (bool)values[0];
            var isMouseOverImage = (bool)values[1];

            if (isMouseOverImage || isMouseOverOverlay)
                return Visibility.Visible;
            else
                return Visibility.Hidden;
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

Answer 2

Мне не понравилась сложность другого ответа, так как я чувствовал, что это слишком много для чего-то такого простого, поэтому я попробовал его, используя события MouseEnter и MouseLeave, и, похоже, он работает довольно хорошо.

XAML:

<Grid MouseEnter="Grid_MouseEnter" MouseLeave="Grid_MouseLeave">
    <Image x:Name="MainImage" Source="..." />
    <Image x:Name="OverlayImage" Source="..." />
</Grid>

С сопроводительным кодом:

private void Grid_MouseEnter(object sender, MouseEventArgs e)
{
    OverlayImage.Visibility = System.Windows.Visibility.Visible;
}

private void Grid_MouseLeave(object sender, MouseEventArgs e)
{
    OverlayImage.Visibility = System.Windows.Visibility.Collapsed;
}

Вам не нужно использовать изображение для наложения, это может быть что угодно. В моем реальном случае у меня был оверлей StackPanel, который содержал кнопки для редактирования и удаления (чтобы пользователь мог изменить / удалить изображение)