Question

我正试图在鼠标移动到图像控制时创建这样的叠加层。如何使用WPF进行操作？

请咨询

alt text

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叠加层，其中包含用于编辑和删除的按钮（因此用户可以更改/删除图像）

WPF覆盖帮助

2 个答案: