Develop Reference

Styling ListViewItem in WPF [duplicate]

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>

How to avoid error icon from WPF validation overlapping other elements

I'm working on a WPF app and want to implement validation.
For displaying error messages etc. i'm using a style for the TextBox:
<Style TargetType="{x:Type TextBox}">
<Setter Property="Height"
Value="25"/>
<Setter Property="VerticalAlignment"
Value="Top"/>
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="true">
<Border Background="Red"
DockPanel.Dock="right"
Margin="5,0,0,0"
Width="20"
Height="20"
CornerRadius="10"
ToolTip="{Binding ElementName=customAdorner, Path=AdornedElement.(Validation.Errors)[0].ErrorContent}">
<TextBlock Text="!"
VerticalAlignment="Center"
HorizontalAlignment="Center"
FontWeight="Bold"
Foreground="White">
</TextBlock>
</Border>
<AdornedElementPlaceholder Name="customAdorner"
VerticalAlignment="Center" >
<Border BorderBrush="Red"
BorderThickness="1" />
</AdornedElementPlaceholder>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<!--Additional style trigger for changing the background color of the textbox-->
<Style.Triggers>
<Trigger Property="Validation.HasError"
Value="true">
<Setter Property="Background"
Value="LightPink"/>
</Trigger>
</Style.Triggers>
</Style>
When an error in one of my textboxes occurs, the textbox gets a red border and to the right a red dot with a white "!" appears.
Now the problem is that the red dot to the right is overlapping the neighbour element.
Is there a way to avoid that kind of thing?
You can download an example from here:
WPF validation example
Then choose the project "Validation_ValidationRule" as startproject.
Thanks in advance!

I have changed your Window.Resources
<Window.Resources>
<Style x:Key="myErrorTemplate" TargetType="Control">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<DockPanel LastChildFill="True">
<Ellipse DockPanel.Dock="Right"
ToolTip="{Binding ElementName=myTextbox,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
Width="15" Height="15"
Margin="-25,0,0,0"
StrokeThickness="1" Fill="Red" >
<Ellipse.Stroke>
<LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">
<GradientStop Color="#FFFA0404" Offset="0"/>
<GradientStop Color="#FFC9C7C7" Offset="1"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
<TextBlock DockPanel.Dock="Right"
ToolTip="{Binding ElementName=myControl,
Path=AdornedElement.(Validation.Errors)[0].ErrorContent}"
Foreground="White"
FontSize="11pt"
Margin="-15,5,0,0" FontWeight="Bold">!
</TextBlock>
<Border BorderBrush="Red" BorderThickness="1">
<AdornedElementPlaceholder Name="myControl"/>
</Border>
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="ToolTip"
Value="{Binding RelativeSource={x:Static RelativeSource.Self},
Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="TextBox" BasedOn="{StaticResource myErrorTemplate}" />
<Style TargetType="CheckBox" BasedOn="{StaticResource myErrorTemplate}" />
<Style TargetType="ComboBox" BasedOn="{StaticResource myErrorTemplate}" />
</Window.Resources>
Try to adapt this for your needs

fire an event in ViewModel on ListBoxItem click

Issue
I am having some problems finding the correct property to use to bind a click event on a ListBoxItem to a property in my ViewModel.
Code
Here is my ListBox XAML code:
<ListBox dd:DragDrop.IsDragSource="True" dd:DragDrop.IsDropTarget="True" Background="#ececec" SelectedItem="{Binding SelectedSlideDataItem}" ItemsSource="{Binding SlideDataItems}" Grid.Column="2" Grid.Row="10" Grid.RowSpan="4" Grid.ColumnSpan="13">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<!--<Setter Property="Padding" Value="5,0,5,5" />-->
<Setter Property="Height" Value="110"/>
<Setter Property="Width" Value="200"/>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="ToolTip">
<Setter.Value>
<Image Source="{Binding BackgroundImage}" Height="240" Width="400" />
</Setter.Value>
</Setter>
<Setter Property="Control.Background" Value="#d64b36" />
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#c83a25" />
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" Color="#c83a25" />
<SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}" Color="#c83a25"/>
</ListBox.Resources>
</ListBox>
So when a user clicks one of the items in the ListBox. I need an event to fire in my ViewModel.

1) With Interactivity and MVVM :
<ListBox>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding YourCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ListBox>
2) - Or in Style without MVVM
<Style TargetType="ListViewItem">
<EventSetter Event="MouseDoubleClick" Handler="ListViewItem_MouseDoubleClick"/>
</Style>

Use MouseLeftButtonUp event
<ListBox dd:DragDrop.IsDragSource="True" dd:DragDrop.IsDropTarget="True"
Background="#ececec" SelectedItem="{Binding SelectedSlideDataItem}" ItemsSource="
{Binding SlideDataItems}" Grid.Column="2" Grid.Row="10" Grid.RowSpan="4"
Grid.ColumnSpan="13" MouseLeftButtonUp={//Bind with VM}/>

Name header for context menu

The title seems easier than first thought, but I have a context menu that is bound to a list of items. I want to be able to display a title for the context menu to access the list. Currently it just shows up as blank and then allows me to view the list, however I need it to display a title "Add Existing Properties". Also if someone can help me with my image problem that would be much appreciated :). Instead of the first one having the image name I want that to display the name "Add Existing Properties"
<DataTemplate x:Key="AddNodeTemplate">
<Border BorderThickness="1" Background="#F7F7F7">
<Border.BorderBrush>
<DrawingBrush Viewport="8,8,8,8" ViewportUnits="Absolute" TileMode="Tile">
<DrawingBrush.Drawing>
<DrawingGroup>
<GeometryDrawing Brush="#F7F7F7">
<GeometryDrawing.Geometry>
<GeometryGroup>
<RectangleGeometry Rect="0,0,50,50"/>
<RectangleGeometry Rect="50,50,50,50"/>
</GeometryGroup>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingGroup>
</DrawingBrush.Drawing>
</DrawingBrush>
</Border.BorderBrush>
<StackPanel>
<Button x:Name="ButtonAdd" Click="ButtonAdd_Click" Height="30" Width="130">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="#F7F7F7">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image Source="Images/icon_plus.bmp" HorizontalAlignment="Left" Margin="5,0,0,0"/>
<TextBlock Text="Add Property" HorizontalAlignment="Center" Grid.Column="1" VerticalAlignment="Center" Foreground="LightGray" FontStyle="Italic" FontSize="12"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="#F7F7F7"/>
</Style>
</Button.Style>
<Button.ContextMenu>
<ContextMenu>
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Icon">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Image Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}" Margin="3" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</MenuItem.Resources>
</MenuItem>
<MenuItem Header="Upscale well logs"/>
<MenuItem Header="Upscale well_top attributes"/>
<MenuItem Header="Upscale point attributes"/>
<MenuItem Header="Calculate"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</StackPanel>
</Border>
</DataTemplate>
What is displayed

This style <Style TargetType="MenuItem"> in fact also applies on the top level MenuItem (the one you hardcodedly set its Header to Add Exisiting Properties). You need to use a Trigger to filter that out based on the Role property. All the sub menu items have Role of SubMenuItem, so it should be like this:
<Style TargetType="MenuItem">
<Style.Triggers>
<Trigger Property="Role" Value="SubMenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding Name}"/>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
<!-- ... -->
</Style>
Edit: About the Icon, you explicitly set it to a DataTemplate which is not rendered, instead it uses the string returned by ToString() (hence the text System.Windows.DataTemplate in place of the icon). You can just remove DataTemplate like this:
<!-- define a non-shared resource of Image -->
<Style TargetType="MenuItem">
<Style.Resources>
<Image x:Key="img" x:Shared="False" Width="12" Height="12" Source="{Binding Icon, Converter={StaticResource ImageToSourceConverter}}"
Margin="3" VerticalAlignment="Center"/>
</Style.Resources>
<!-- ... -->
</Style>
<Setter Property="Icon" Value="{StaticResource img}"/>
Final solution:
<Style TargetType="MenuItem">
<Style.Resources>
<Style TargetType="ContentPresenter">
<Style.Triggers>
<Trigger Property="ContentSource" Value="Icon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Image Source="{Binding}"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
<Setter Property="Icon" Value="{Binding Icon,
Converter={StaticResource ImageToSourceConverter}}"/>
<!-- ... -->
</Style>

you can either use
`
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{TemplateBinding Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
or
<MenuItem Header="Add Exisiting Properties" ItemsSource="{Binding Path=AvailableProperties}">
<MenuItem.Resources>
<Style TargetType="MenuItem">
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Header}" />
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
`

How to change slider's selection color in WPF

I have a slider. Is there any way to change the blue color of the selection region to another color (e.g. Black)

Overriding system colors won't work with custom templates.
Set the "IsSelectionRangeEnabled" to true, "SelectionStart" to your beginning value and "SelectionEnd" to your end value. You can bind "SelectionEnd" to "Value" if you want it to be automatic...
<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Slider}">
<Grid VerticalAlignment="Center">
<Border x:Name="borderBackground" Margin="6,0" Height="4" Background="Gray" />
<Canvas Margin="0,-4,0,0" VerticalAlignment="Center">
<Border x:Name="PART_SelectionRange" HorizontalAlignment="Left" Height="4" Background="{TemplateBinding Foreground}" />
</Canvas>
<Track x:Name="PART_Track">
<Track.Thumb>
<Thumb Width="10" Height="20" />
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="IsSelectionRangeEnabled" Value="True" />
<Setter Property="SelectionStart" Value="{Binding Minimum, RelativeSource={RelativeSource Self}}" />
<Setter Property="SelectionEnd" Value="{Binding Value, RelativeSource={RelativeSource Self}}" />
<Setter Property="Foreground" Value="Red" />
</Style>

You can override the default SystemColors to change the color of the selection area.
<Slider Margin="0,10,0,0" Width="287" Value="6" IsSelectionRangeEnabled="True" SelectionEnd="6" >
<Slider.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Black" />
<SolidColorBrush x:Key="{x:Static SystemColors.ControlDarkDarkBrushKey}" Color="Silver" />
</Slider.Resources>
</Slider>
Result: