0

我有一个带有 StackPanel 的 ListBox，其中包含图像和标签。

<ListBox.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Horizontal" IsItemsHost="True" />
    </ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
    <DataTemplate>
        <StackPanel Orientation="Vertical">
            <Image Source="{Binding Image}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Image_MouseLeftButtonDown" ToolTip="Click to see this product on adidas.com" VerticalAlignment="Top" HorizontalAlignment="Left"  />
            <Label Content="{Binding Name}" Cursor="Hand" Tag="{Binding Link}" MouseLeftButtonDown="Label_MouseLeftButtonDown" VerticalAlignment="Bottom" Foreground="White" Style="{StaticResource Gotham-Medium}" FontSize="8pt"  HorizontalAlignment="Center" />
        </StackPanel>
    </DataTemplate>
</ListBox.ItemTemplate>

我想在当前鼠标悬停的图像后面显示第三张图像（glow.png）。我似乎无法向堆栈面板添加第二张图像，并将其可见性设置为隐藏。我什至还没有解决鼠标悬停部分。

是否在堆栈面板中添加另一个图像，然后将其可见性设置为在 mouseenter 上可见正确的方法，然后在 mouseleave 上换回？

谢谢。

4

2 回答 2

2

您当然可以将一张图片放在另一张图片后面。不要直接将图像添加到 StackPanel，而是添加一个 Grid，然后添加两个图像，如下所示：

<StackPanel Orientation="Vertical">
    <Grid>
        <Image Source="..." />
        <Image Source="{Binding Image}" ... />
    </Grid>
    <Label Content="{Binding Name}" ... />
</StackPanel>

您可能还想查看Bitmap Effects，使用它可以在任何 WPF 元素上引入“发光”效果。

编辑：实现您想要的效果的另一种方法（我相信）是在触发器中换出图像的 Source 属性。我不打算在这里尝试从内存中编写 XAML，但您可以捕获图像本身的 IsMouseOver 属性，当它切换到 True 时，您可以将其 Source 设置为图像的“发光”版本。

于 2008-12-23T03:49:11.307 回答
1

另一种可能性是为您的图像添加边框，将边框的颜色设置为您想要的任何颜色，并将不透明度设置为 0。在您的 MouseEnter 事件处理程序中，将不透明度设置为 1。

于 2008-12-23T15:44:04.470 回答