I have a Border inside a DataTemplate for a ListBox. When the mouse is over the item, I want to show the Border. Here's my XAML:
<ListBox Grid.Row="3"
Grid.Column="0"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
MaxWidth="350">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="SteelBlue"
BorderThickness="0"
HorizontalAlignment="Stretch"
CornerRadius="3"
MinHeight="65"
Margin="3">
<Border.Style>
<Style>
<Style.Triggers>
<Trigger Property="Border.IsMouseOver" Value="True">
<Setter Property="Border.BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
Height="50"
Width="50"
Margin="5"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding UnitIdentifier}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding IPAddress}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You can see that I have a trigger defined in the Border control to set the BorderThickness to 1. However when I run it and mouse over the item, nothing happens.
What am I doing wrong here?
Thanks
Try this:
<Style>
<Setter Property="BorderThickness" Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
The style is applied to the Border control, so there is no need to specify "Border" again on the bindings. I've found that it sometimes (always?) seems that an attribute defined directly on the control will override the change from a trigger. You will also have to remove the borderTickness attribute from the Border control as well.
Also, keep an eye on the Output Window while running. Binding errors will happen silently in the application, but generally show up as red text in the output window that can sometimes help track down errors.
Related
I have a ListBox inside a UserControl with its style defined in the ListBox.Resources, but the style is being ignored. We add a generic ListBox style in the Application.Resources.
Why does the Application.Resources style take presedence over the style defined in the control's resources?
This is how I define the ListBox and its style:
<ListBox x:Name="myListBox" SelectionMode="Extended" >
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="0" Padding="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<CheckBox x:Name="myCheckBox" Grid.Column="0" IsChecked="{Binding MyBoolean}"
HorizontalAlignment="Center" IsThreeState="False" VerticalAlignment="Center" Background="Transparent" Click="myCheckBox_Click"/>
<TextBlock Grid.Column="1" Text="{Binding ItemName}" VerticalAlignment="Center" Margin="4,1,2,4">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
This is how we add the ListBox generic style in the App.xaml - Application.Resources:
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MyAssembly;component/MyListBoxGenericStyle.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Also, if I define the Style inside the ListBox.ItemContainerStyle it seems to work:
<ListBox x:Name="myListBox" SelectionMode="Extended" >
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Margin="0" Padding="2" Grid.Column="0" Grid.ColumnSpan="2" x:Name="Background" CornerRadius="0" Background="Transparent" BorderThickness="0" BorderBrush="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
<CheckBox x:Name="myCheckBox" Grid.Column="0" IsChecked="{Binding MyBoolean}"
HorizontalAlignment="Center" IsThreeState="False" VerticalAlignment="Center" Background="Transparent" Click="myCheckBox_Click"/>
<TextBlock Grid.Column="1" Text="{Binding ItemName}" VerticalAlignment="Center" Margin="4,1,2,4">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Black" />
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.Resources>
</ListBox>
You should define the style listed under the list-box resources under the dictionary instead. Putting styles or templates under the element to be manipulated is akin to ignoring CSS and doing styles directly in the element in HTML.
You can give the dictionary resource template a name and reference it in the tag as
<ListBox ItemTemplate="{StaticResource MyTemplate}">
Check if MyListBoxGenericStyle.xaml's style doesn't have ItemContainerStyle set explicitly to another value. This would render your default style useless.
Also, you can check by means of Snoop where does your ListBoxItem gets it style from (i.e. locally set, resources, theme, etc).
Here's the list I'm creating
You can see that there's a border around each list item. For some reason, the border does not stretch horizontally.
Here's the ListBox XAML:
<ListBox Grid.Row="3"
Grid.Column="0"
BorderBrush="SteelBlue"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
MaxWidth="350">
<ListBox.Resources>
<Style TargetType="ListBoxItem">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black"/>
</Style.Resources>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<Border HorizontalAlignment="Stretch"
BorderBrush="SteelBlue"
CornerRadius="3"
MinHeight="65"
Margin="3">
<Border.Style>
<Style TargetType="Border">
<Setter Property="BorderThickness" Value="0" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Source="/DFT.Falcon6.UI.Desktop;component/Media/Images/fc6logo.png"
Height="50"
Width="50"
Margin="5"/>
<TextBlock Grid.Row="0"
Grid.Column="1"
Text="{Binding UnitIdentifier}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
<TextBlock Grid.Row="1"
Grid.Column="1"
Text="{Binding IPAddress}"
Style="{StaticResource devicetextStyle}"
Margin="2"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I've got the border's HorizontalAlignment set to Stretch.Anyone see what's wrong?
Thanks
What your looking for is HorizontalContentAlignment="Stretch" on the ListBox
<ListBox Grid.Row="3"
Grid.Column="0"
BorderBrush="SteelBlue"
ItemsSource="{Binding Devices}"
SelectedItem="{Binding SelectedDevice}"
HorizontalContentAlignment="Stretch"
MaxWidth="350">
I have a ListView with three TextBlock for each Item.
The first one has the default color (black) and the others has the property Foreground set to gray.
When I select an item the color of the first TextBlock becomes blue but the others stay gray and are hard to read.
I want that all the text become white color when the item is selected.
How I do that ?
Edit :
My style :
<UserControl.Resources>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
My ListView
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" MouseDoubleClick="lvResultat_MouseLeftDoubleClick" >
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis"
Foreground="Gray"/>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I also tried things like
<Style TargetType="ListViewItem">
<Style.Resources>
<!--<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="White" />-->
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="White" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="White" />
</Style.Resources>
</Style>
EDIT 2 :
I have discovered that the custom style changes the color of Textblock which have the default property as Foreground (black).
If I specife Black for the color of the text of the first textblock, the text doesn't change anymore of color when the item is selected.
Picture :
You could achieve what you are trying to do by converting your code from having DataTemplate for a ListViewItem to having a ControlTemplate
This is what I tried:
ListViewItem Style:
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="ContentBorder"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Margin="4">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
<Setter Property="Background" TargetName="ContentBorder" Value="DeepSkyBlue" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and then I removed DataTemplate from the ListView XAML:
<ListView x:Name="lvResultat" Grid.Row="0" Grid.Column="1" Background="{x:Null}"
Margin="4"
HorizontalContentAlignment="Stretch"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
IsSynchronizedWithCurrentItem="True"
ItemsSource="{Binding ResultatsRecherche}" SelectedItem="{Binding ResultatSelectione, Mode=TwoWay}" BorderBrush="{x:Null}" >
</ListView>
However, if you must use DateTemplate, then what you could do is have a property called IsSelected on your ViewModel, ResultatRechercheViewModel and then have DataTriggers on that property in your DataTemplate.
Updated DataTemplate:
<ListView.ItemTemplate>
<DataTemplate DataType="viewModel:ResultatRechercheViewModel">
<Grid Height="86" Margin="2" >
<Grid.RowDefinitions>
<RowDefinition Height="1.5*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="1*"/>
<RowDefinition Height="0.5*"/>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Titre}"
FontSize="20" FontWeight="Bold" />
<TextBlock Text="{Binding SousTitre}" Grid.Row="1" Name="st"
FontStyle="Italic" Foreground="Gray"/>
<TextBlock Text="{Binding Resume}" Grid.Row="2" TextTrimming="WordEllipsis" Name="r"
Foreground="Gray"/>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="Foreground" TargetName="st" Value="White" />
<Setter Property="Foreground" TargetName="r" Value="White" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
And, you need to update your ViewModel code to set IsSelected property, Below is code from my MainViewModel:
public ResultatRechercheViewModel ResultatSelectione
{
get { return _resultatSelectione; }
set
{
if (_resultatSelectione != null)
{
_resultatSelectione.IsSelected = false;
}
_resultatSelectione = value;
_resultatSelectione.IsSelected = true;
}
}
Hope this resolves your problem or gives you some ideas to resolve your problem.
Try this syntax
<ListView>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
...
</ListView>
Foreground Try use style for listView items:
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="White"/>
</Trigger>
</Style.Triggers>
</Style>
I have ObservableCollection with items which I want to display in a ListBox.
Also I write a template for ListboxItem for correct display of my collection.
On this stage everything works fine.
in .cs
Sensors = new ObservableCollection<Sensor>();
...
lstBox.ItemsSource = Sensors;
in .xaml
...
<DataTemplate x:Key="SensorTileTemplate">
<Border>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.ColumnSpan="3"></TextBlock>
<Image Source="{Binding ImageModel.ImgSource}" Style="{StaticResource ImageGlowStyle}" Height="72" Grid.Row="1" Grid.Column="0"></Image>
<StackPanel Grid.Row="1" Grid.Column="1" Margin="5">
<TextBlock Text="IP:"></TextBlock>
<TextBlock Text="Port:"></TextBlock>
<TextBlock Text="Command port:"></TextBlock>
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="2" Margin="5">
<TextBlock Text="{Binding DeviceAddress}"></TextBlock>
<TextBlock Text="{Binding DeviceDataPort}"></TextBlock>
<TextBlock Text="{Binding DeviceControlPort}"></TextBlock>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
<Style x:Key="ContainerStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected}" Value="True">
<Setter Property="ListBoxItem.Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
</ListBox>
The problem appears when I need to group certain items using expander as a group container.
in .cs
...
ICollectionView view = CollectionViewSource.GetDefaultView(Sensors);
view.GroupDescriptions.Add(new PropertyGroupDescription("GroupNumber"));
lstBox.ItemsSource = view;
...
in .xaml
<!--Same Template and Style-->
...
...
<Style x:Key="GroupContainerStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True">
<Expander.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Group #" />
<TextBlock Text="{Binding Name}" />
</StackPanel>
</Expander.Header>
<Expander.Content>
<ItemsPresenter />
</Expander.Content>
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<ListBox Name="lstBox" Focusable="False"
SelectionChanged="lstBox_SelectionChanged"
HorizontalContentAlignment="Stretch"
ItemTemplate="{StaticResource SensorTileTemplate}"
ItemContainerStyle="{StaticResource ContainerStyle}">
<ListBox.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupContainerStyle}" />
</ListBox.GroupStyle>
</ListBox>
This code works and groups items but items become invisible.
So without grouping items display correctly but with grouping expanders show nothing in it.
I think there is something about ItemsPresenter in Expander but can't figure out what.
The problem was in one third party theme I use in my app. That theme has a ListBox template like:
<Style TargetType="{x:Type ListBox}">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Background="{DynamicResource ControlBackgroundBrush}" />
<ScrollViewer Margin="1" Style="{DynamicResource NuclearScrollViewer}" Focusable="false" Background="{x:Null}">
<StackPanel Margin="1,1,1,1" IsItemsHost="true" />
</ScrollViewer>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Border" />
<Setter Property="BorderBrush" Value="{DynamicResource DisabledBorderBrush}" TargetName="Border" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So I use an ItemsPresenter instead of the StackPanel in that template and everything works now.
This is my XAML so far.
<ScrollViewer Grid.Column="1" Grid.RowSpan="2">
<ListBox Background="Black" ItemsSource="{Binding Path=ActiveLog}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Background="Black">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Foreground="White">
<TextBlock >Date:</TextBlock>
<TextBlock Text="{Binding Path=LogDate}"/>
</TextBlock>
<TextBlock Grid.Column="1" Grid.Row="0" Foreground="White">
<TextBlock >Severity:</TextBlock>
<TextBlock Text="{Binding Path=Severity}"/>
</TextBlock>
<TextBlock Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" Foreground="LightGray" Text="{Binding Path=Message}"></TextBlock>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.Template>
<ControlTemplate>
<StackPanel Background="Black" IsItemsHost="True" >
</StackPanel>
</ControlTemplate>
</ListBox.Template>
</ListBox>
</ScrollViewer>
The only problem is that the selected item has a blue box to the right. I assume there is a way to change the selection color, but I can't find it.
<UserControl.Resources>
<Style x:Key="myLBStyle" TargetType="{x:Type ListBoxItem}">
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Transparent"/>
</Style.Resources>
</Style>
</UserControl.Resources>
and
<ListBox ItemsSource="{Binding Path=FirstNames}"
ItemContainerStyle="{StaticResource myLBStyle}">
You just override the style of the listboxitem (see the: TargetType is ListBoxItem)
Or you can apply HighlightBrushKey directly to the ListBox. Setter Property="Background" Value="Transparent" did NOT work. But I did have to set the Foreground to Black.
<ListBox ... >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="IsSelected" Value="True" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
</Style.Resources>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
You need to use ListBox.ItemContainerStyle.
ListBox.ItemTemplate specifies how the content of an item should be displayed. But WPF still wraps each item in a ListBoxItem control, which by default gets its Background set to the system highlight colour if it is selected. You can't stop WPF creating the ListBoxItem controls, but you can style them -- in your case, to set the Background to always be Transparent or Black or whatever -- and to do so, you use ItemContainerStyle.
juFo's answer shows one possible implementation, by "hijacking" the system background brush resource within the context of the item style; another, perhaps more idiomatic technique is to use a Setter for the Background property.
I had to set both HighlightBrushKey and ControlBrushKey to get it to be correctly styled. Otherwise, whilst it has focus this will correctly use the transparent HighlightBrusKey. Bt, if the control loses focus (whilst it is still highlighted) then it uses the ControlBrushKey.
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="Transparent" />
</Style.Resources>
When Using .Net 4.5 and above, use InactiveSelectionHighlightBrushKey instead of ControlBrushKey:
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="Transparent" />
</Style.Resources>
Hope this helps someone out.
I've tried various solutions and none worked for me, after some more research I've found a solution that worked for me here
https://gist.github.com/LGM-AdrianHum/c8cb125bc493c1ccac99b4098c7eeb60
<Style x:Key="_ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="Yellow"/>
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ListBox ItemContainerStyle="{DynamicResource _ListBoxItemStyle}"
Width="200" Height="250"
ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBoxItem>Hello</ListBoxItem>
<ListBoxItem>Hi</ListBoxItem>
</ListBox>
I posted it here, as this is the first google result for this problem so some others may find it useful.
You have to create a new template for item selection like this.
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
BorderThickness="{TemplateBinding Border.BorderThickness}"
Padding="{TemplateBinding Control.Padding}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True">
<ContentPresenter
Content="{TemplateBinding ContentControl.Content}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
If selection is not important, it is better to use an ItemsControl wrapped in a ScrollViewer. This combination is more light-weight than the Listbox (which actually is derived from ItemsControl already) and using it would eliminate the need to use a cheap hack to override behavior that is already absent from the ItemsControl.
In cases where the selection behavior IS actually important, then this obviously will not work. However, if you want to change the color of the Selected Item Background in such a way that it is not visible to the user, then that would only serve to confuse them. In cases where your intention is to change some other characteristic to indicate that the item is selected, then some of the other answers to this question may still be more relevant.
Here is a skeleton of how the markup should look:
<ScrollViewer>
<ItemsControl>
<ItemsControl.ItemTemplate>
<DataTemplate>
...
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>