WPF ListBox DataTemplate и вопрос изображения

У меня есть ListBox с StackPanel, который содержит изображение и метку.

<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) за текущим изображением, наведенным курсором мыши. Кажется, я не могу добавить второе изображение на панель стека и установить скрытую видимость. Я еще даже не занимался частью с наведением мыши.

Является ли добавление другого изображения внутри панели стека, а затем настройка его видимости видимым правильным подходом при входе мыши, а затем обратное переключение при выходе из мыши?

Спасибо.


image wpf listbox mouseenter mouseleave
person John Batdorf    schedule 23.12.2008    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы, конечно, можете иметь одно изображение за другим. Вместо того, чтобы напрямую добавлять изображение в StackPanel, добавьте сетку, а затем добавьте оба изображения, например:

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

Вы также можете ознакомиться с эффектами растрового изображения, с помощью которых можно ввести эффект «свечения» на любой элемент WPF.

Редактировать. Еще один способ добиться желаемого эффекта (я полагаю) — это поменять местами свойство Source изображения в триггере. Я не собираюсь писать здесь XAML из памяти, но вы можете поймать свойство IsMouseOver для самого изображения, и когда оно переключится на True, вы можете установить его Source на «светящуюся» версию изображения.

person Matt Hamilton    schedule 23.12.2008
comment
Вероятно, стоит отметить, что классы BitmapEffect были помечены как устаревшие с версии .NET 3.5 SP1. Вместо этого вы можете использовать DropShadowEffect с аппаратным ускорением для получения того же эффекта, что и старый OuterGlowBitmapEffect, как показано в одном из сообщений Карла Шиффлетта. - person Nigel Spencer; 23.12.2008
comment
Хотел бы ты опубликовать это как ответ вместо комментария, Найджел - я бы проголосовал за тебя! - person Matt Hamilton; 23.12.2008

arrow_upward
1
arrow_downward

Другая возможность — добавить рамку к вашему изображению, установить любой цвет бордюрной кисти и непрозрачность до 0. В обработчике событий MouseEnter установите непрозрачность до 1.

person Community    schedule 23.12.2008