在 WPF 中的 ListBoxItem 顶部添加图像

Question

我有一个带有一些 ListBoxItems 的 ListBox。每个 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>

Answer 1

将您的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>

编辑

您还可以通过覆盖 HighlightBrush 颜色并使其透明来移除 SelectedItem 的蓝色背景

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