Question

我有一个带有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>

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

在堆栈面板中添加另一个图像，然后将其可见性设置为可在鼠标中心看到正确的方法，然后在鼠标左键上交换？

感谢。

Answer 1

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

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

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

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

Answer 2

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

WPF ListBox DataTemplate和图像问题

2 个答案: