Добавление изображения поверх ListBoxItem в WPF

У меня есть ListBox с некоторыми ListBoxItems. Каждый ListBoxItem содержит текст и фоновое изображение. Когда пользователь щелкает ListBoxItem, я хочу добавить изображение поверх ListBoxItem (оно украшает элемент дополнительным оформлением).

Я ищу способ наложить изображение на нажатый ListBoxItem. Вот код, который у меня есть:

    <ListBox Margin="0,34,0,25.113" Background="{x:Null}" BorderThickness="0">
        <ListBoxItem Content="First Item" Height="71.96" Margin="0,10,0,0">
            <ListBoxItem.Background>
                <ImageBrush ImageSource="Untitled-4.png"/>
            </ListBoxItem.Background>
        </ListBoxItem>
    </ListBox>

wpf listboxitem
person Ali    schedule 16.11.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поместите свой ListBoxItem.Content на панель, которая позволяет перекрывать элементы управления, например Grid, и сделайте Visibililty верхнего изображения основанным на ListBoxItem.IsSelected

<ListBox.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</ListBox.Resources>

<ListBoxItem Height="71.96" Margin="0,10,0,0">
    <ListBoxItem.Background>
        <ImageBrush ImageSource="Untitled-4.png"/>
    </ListBoxItem.Background>
    <Grid>
        <TextBlock Text="First Item" 
                   VerticalAlignment="Center" HorizontalAlignment="Center" />

        <Image Source="SomeImage.jpg"
               Visibility="{Binding IsSelected, 
                   RelativeSource={RelativeSource AncestorType={x:Type ListBoxItem}}, 
                   Converter={StaticResource BooleanToVisibilityConverter}}" />
    </Grid>
</ListBoxItem>

Изменить

Вы также можете удалить синий фон для SelectedItem, перезаписав цвет HighlightBrush и сделав его прозрачным.

<ListBox.Resources>
    <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />

    <Style TargetType="{x:Type ListBoxItem}">
        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
        </Style.Resources>
    </Style>
</ListBox.Resources>

person Rachel    schedule 16.11.2011
comment
Спасибо, как-то заработало! Однако, когда я нажимаю на элемент, я получаю синий элемент, который, как мне кажется, связан с событием выбора. Можно ли удалить этот синий выделение при нажатии? Спасибо. - person Ali; 16.11.2011
comment
Во-вторых, похоже, что текст отделен от других элементов. Я хотел, чтобы текст был посередине, но теперь текст находится сверху, а изображение (в сетке) - под ним; изображение не перекрывает содержимое сетки. - person Ali; 16.11.2011
comment
@Ali Я обновил свой ответ. Установите TextBlock Alignment, чтобы расположить его в центре сетки, и настройте стиль ListBoxItem, чтобы изменить цвет кисти Highlight Brush. - person Rachel; 16.11.2011