How To Style ListBoxItem

3
votes
<Border Grid.Row="1" Padding="15" Margin="15" BorderBrush="LightBlue" Background="AliceBlue" BorderThickness="1">
        <ListBox ItemsSource="{Binding Configs}">
            <ListBox.ItemContainerStyle>
                <Style TargetType="{x:Type ListBoxItem}">
                    <Setter Property="Background" Value="Transparent" />
                    <Setter Property="Focusable" Value="False" />
                    <Setter Property="BorderThickness" Value="0" />
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <view:Config />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Border>

This is the code I've written in XAML. However, it doesn't appear to affect anything.

There are so many posts on SO with similar questions but all of their response are "use ListBox.ItemContainerStyle" which I've done :S Such as There is no ListBox.SelectionMode="None", is there another way to disable selection in a listbox? and WPF, XAML: How to style a ListBoxItem using binding on property of ListBox ItemsSource object?

What I would expect is that there is no background, no border and the item is not focusable.

What have I done wrong?

2
c#.netwpfxaml

2 Answers

2
votes

Redefine the ControlTemplate of your ListBoxItem. The sample code below uses a redish color just to make the point, but you can just replace it with Transparent:

<Window x:Class="WpfApplication235.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:sys="clr-namespace:System;assembly=mscorlib"
    xmlns:local="clr-namespace:WpfApplication235"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
<Window.Resources>

    <x:Array x:Key="SampleData" Type="{x:Type sys:String}">
        <sys:String>Item 1</sys:String>
        <sys:String>Item 2</sys:String>
        <sys:String>Item 3</sys:String>
        <sys:String>Item 4</sys:String>
        <sys:String>Item 5</sys:String>
    </x:Array>

    <Style x:Key="ListBoxItemStyle1" TargetType="{x:Type ListBoxItem}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBoxItem">
                    <TextBlock Text="{Binding}">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Style.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter Property="Background" Value="#1FFF0000"></Setter>
                                    </Trigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Window.Resources>

<Grid>

    <ListBox x:Name="listBox" ItemsSource="{StaticResource SampleData}" 
             ItemContainerStyle="{StaticResource ListBoxItemStyle1}"
             Height="150" Margin="0" Width="250"/>

</Grid>

enter image description here

and using a Transparent background, no focus, no highlighting, as required:

enter image description here

1
votes

You can use style in resource like:

<Window.Resources>

    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="#D8D8D8"/>
        <Setter Property="FontSize" Value="15"/>
        <Setter Property="FontWeight" Value="400"/>
        <Setter Property="Height" Value="30"/>
        <!--and so on whatever you want...-->
    </Style>

</Window.Resources>

And remove code like:

<ListBox.ItemContainerStyle>
    <Style TargetType="{x:Type ListBoxItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="BorderThickness" Value="0" />
    </Style>
</ListBox.ItemContainerStyle>

And don't use any property in listBox which is used in style, other wise it will not behave which is described in style.