WPF ListBox DataTemplate 和图像问题

发布于 2024-07-11 07:47:35 字数 1155 浏览 12 评论 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 上交换回来？

谢谢。

原文

I have a ListBox with a StackPanel that contains an image and label.

<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>

I want to show a third image (glow.png) behind the currently moused over image. I can't seem to add a second image to the stack panel, and set it's visibility to hidden. I haven't even tackled the mouseover part yet.

Is adding another image inside the stack panel, and then setting it's visibility to visible the right approach on mouseenter, and then swapping back on mouseleave?

Thanks.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

回忆那么伤 2024-07-18 07:47:35

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

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

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

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

You certainly can have one image behind another. Instead of directly adding the image to your StackPanel, add a Grid and then add both images, like this:

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

You might also like to look into Bitmap Effects, using which you can introduce a "glow" effect onto any WPF element.

Edit: Another way to achieve the effect you want (I believe) is to swap out the image's Source property in a trigger. I'm not going to try to write the XAML from memory here, but you could catch the IsMouseOver property for the image itself, and when it switches to True you could set its Source to the "glowing" version of the image.

回复收藏 0 原文