I am trying to set the background color of a tab header but it is not filling the entire header, but leaving a margin around my template. I need to get it to completely fill the tab's header with the background color.
Here is some trivial code that demonstrates the behavior:
<Window x:Class="WpfApplication7.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl Name="TabControl">
<TabControl.ItemTemplate>
<DataTemplate>
<Grid Background="BlueViolet">
<TextBlock Height="20" Width="60" Text="TEST"/>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
</Grid>
</Window>
Code behind:
using System.Windows;
using System.Windows.Controls;
namespace WpfApplication7
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
TabControl.Items.Add(new Grid());
}
}
}
You have to strip out the TabItem control template if you want the Background to be filled.
The original control template of a TabItem looks like this,
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="{StaticResource LightBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="{StaticResource WindowBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
As you can see inside the Template it has a Border and its child is a ContentPresenter which is basically what you modified in your ItemTemplate for the TabControl it doesn't fill out because the Border has its own background color which you can see it defined as LightBrush. In order to change this behavior you have to customize your TabItem template something like this.
<TabControl Name="TabControl">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border
Name="Border"
Margin="0,0,-4,0"
Background="BlueViolet"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0" >
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
Margin="12,2,12,2"
RecognizesAccessKey="True"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100" />
<Setter TargetName="Border" Property="Background" Value="BlueViolet" />
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,0" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock Height="20" Width="60" Text="TEST"/>
</Grid>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
Notice I explicitly changed the Background to BlueViolet
Another alternative is to set Padding to a small value and add a margin to a TextBlock:
<Style TargetType="{x:Type TabItem}">
<Setter Property="Padding" Value="1" />
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Border Background="Orange">
<ContentPresenter>
<ContentPresenter.Content>
<TextBlock Margin="4" Text="{Binding Header}"/>
</ContentPresenter.Content>
</ContentPresenter>
</Border>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I have Listbox with a Checkbox. That's the way how I built it:
<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<CheckBox Name="_Border" Margin="5,2" IsChecked="{TemplateBinding IsSelected}">
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is my ListBox:
<ListBox
VerticalAlignment="Stretch"
ItemsSource="{Binding Items}"
SelectionMode="Multiple"
ItemContainerStyle="{StaticResource _ListBoxItemStyleCheckBox}">
<ListBoxItem>ListBox Item #1</ListBoxItem>
<ListBoxItem>ListBox Item #2</ListBoxItem>
<ListBoxItem>ListBox Item #3</ListBoxItem>
</ListBox>
When I hover over the Checkbox I get the default color (blue). How can I change this color?
I don't want to change the color of the text. Only the border color of the Checkbox.
Thank you for any help!
You should create template.
CheckBox Template Sample
<Style TargetType="{x:Type CheckBox}" x:Key="chb">
<Setter Property="Margin" Value="5 2 5 2"/>
<Setter Property="IsChecked" Value="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=IsSelected}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border x:Name="border"
Grid.Column="0"
Width="20"
Height="20"
Background="Transparent"
BorderBrush="Black"
BorderThickness="2">
<Viewbox x:Name="view"
Width="22"
Height="22"
Visibility="Collapsed"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Canvas Width="24" Height="24">
<Path Data="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" Fill="#333333"/>
</Canvas>
</Viewbox>
</Border>
<TextBlock Grid.Column="1"
Text="{Binding RelativeSource={RelativeSource AncestorType=ListBoxItem}, Path=Content}"
Margin="5 0 0 0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Red"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="view" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Connnecting by using StaticResource
<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<CheckBox Name="_Border" Style="{StaticResource chb}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
It will be shown like this.
And I brought Path SVG Data in CheckBox at 'Material Design Icons'.
https://materialdesignicons.com/
<Style x:Key="_ListBoxItemStyleCheckBox" TargetType="ListBoxItem">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<CheckBox Name="_Border" Margin="5,2" IsChecked="{TemplateBinding IsSelected}">
<CheckBox.Resources>
<Style TargetType="{x:Type CheckBox}">
<Setter Property="BorderBrush" Value="LightGray" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</CheckBox.Resources>
<ContentPresenter />
</CheckBox>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Css helps you do this,for instance
ListBox tr.rowHover:hover
{
background-color: Yellow;
}
<asp ..... rowstyle-cssclass="rowHover" ...../>
So I decided to try to give a button a custom style.
Yet when I assign it the Style it wont use it, why is this?
I tried creatinga button with a textbox, image and a ellipse with a label on that too.
I want the button to change color when I hover over it but its making my button disappear.
Window resources
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
And then the button
<Button Background="Transparent"
Style="{StaticResource MenuButton}"
Height="25"
BorderThickness="0">
<StackPanel Orientation="Horizontal">
<Image Source="Resources/earth-globe.png"
Height="20"
Width="20"
HorizontalAlignment="Left"
Margin="0,0,5,0"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="Fant"/>
<Label Content="Websites"
Foreground="White"
VerticalAlignment="Center"
Width="100"
Height="24"/>
<Grid HorizontalAlignment="Right" Height="20" Width="20">
<Ellipse Width="20"
Height="20"
Fill="#555555"
Margin="0,0,0,0">
</Ellipse>
<TextBlock Text="10"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="12"
TextAlignment="Center"
Foreground="White"/>
</Grid>
</StackPanel>
</Button>
You do not want to put that style in the template portion of the style because a template is used for customizing the full control look (i.e. making a button a circle) and a way of giving the developer more flexibility over styling. What you could do is make a style that is applied to the button. Instead try this:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#272727" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
If you did want to modify the template property though, also a valid approach you need to add a <ContentPresenter />. See the below example:
<Window.Resources>
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter />
<ControlTemplate.Triggers>
<Trigger Property="Background" Value="#272727">
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
However, with the minimal styling you have it seems like a poor use case to modify the template and I would recommend the first approach.
Add missing ContentPresenter to your DataTemplate.
<Style x:Key="MenuButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter /> <!--This thing was missing-->
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="RED" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I've got the following style defined in the resources of a UserControl:
<Style x:Key="MenuItemButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Width="40" Height="40" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="1,1,1,1" CornerRadius="3">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Button.Foreground" Value="#666666" />
<Setter Property="Button.Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Cursor" Value="Hand" />
<Setter Property="Button.Foreground" Value="White" />
<Setter Property="Button.Background" Value="#666666" />
</Trigger>
</Style.Triggers>
</Style>
For example I use it like the following:
<Button Click="Toolbar_DocumentMarkup_Click" Name="BtnUnderline" Margin="10,0,0,0" Style="{StaticResource MenuItemButton}">
<fa:FontAwesome VerticalAlignment="Center" Icon="Underline" FontSize="24"/>
</Button>
I need to set the border's width and the height programmatically from the code behind so that the view will be updated on runtime.
What I tried so far:
Access the style through the Resources:
var style = Resources["MenuItemButton"] as Style
but I can't find the right properties in this style object.
Another idea:
Define the width and height as DependencyProperties or implement INotifyPropertyChanged, but I think in my case it's much easier to just set these two values programmatically.
Some oppinions or suggestions on this problem?
Add this to your resources:
<sys:Double x:Key="ButtonHeight">200</sys:Double>
<sys:Double x:Key="ButtonWidth">200</sys:Double>
<Style x:Key="MenuItemButton" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Width="40" Height="40" Background="{TemplateBinding Background}" BorderBrush="Transparent" BorderThickness="1,1,1,1" CornerRadius="3">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="{DynamicResource ButtonHeight}" />
<Setter Property="Width" Value="{DynamicResource ButtonWidth}" />
<Setter Property="Button.Foreground" Value="#666666" />
<Setter Property="Button.Background" Value="Transparent" />
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Button.Cursor" Value="Hand" />
<Setter Property="Button.Foreground" Value="White" />
<Setter Property="Button.Background" Value="#666666" />
</Trigger>
</Style.Triggers>
And then in your code behind you change it in your event using:
this.Resources["ButtonHeight"] = ...
and
this.Resources["ButtonWidth"] = ...
EDIT: forgot that of course you need to add the path to system
xmlns:sys="clr-namespace:System;assembly=mscorlib"
I have a window that has tow group boxes, each group box has 3 buttons, all of the buttons apply the 3 styles. the styles is:
<Style x:Key="SaveButtonStyle" TargetType="Button" >
<Setter Property="Content">
<Setter.Value>
<DockPanel>
<Image Source="/SalesSolution;component/Images/save.png" Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />
<Label Content="Save" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
</DockPanel>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
<Style x:Key="UpdateButtonStyle" TargetType="Button" >
<Setter Property="Content">
<Setter.Value>
<DockPanel>
<Image Source="/SalesSolution;component/Images/Refresh_font_awesome.png" Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />
<Label Content="Update" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
</DockPanel>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
<Style x:Key="DeleteButtonStyle" TargetType="Button" >
<Setter Property="Content">
<Setter.Value>
<DockPanel>
<Image Source="/SalesSolution;component/Images/delete.png" Stretch="UniformToFill" Height="40" Width="40" VerticalAlignment="Center" />
<Label Content="Delete" HorizontalAlignment="Right" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalContentAlignment="Center" FontSize="16" />
</DockPanel>
</Setter.Value>
</Setter>
<Setter Property="Height" Value="40"/>
<Setter Property="Width" Value="100"/>
</Style>
The buttons' XAML code:
//These three buttons do not applied the styles:
<Button HorizontalAlignment="Left" Name="buttonCompanySave" VerticalAlignment="Center" Click="buttonCompanySave_Click" Margin="188,215,0,323" Style="{StaticResource SaveButtonStyle}" />
<Button HorizontalAlignment="Left" Name="buttonCompaniesUpdate" VerticalAlignment="Center" Click="buttonCompanyUpdate_Click" Margin="188,274,0,264" Style="{StaticResource UpdateButtonStyle}" />
<Button HorizontalAlignment="Left" Name="buttonCompanyDelete" VerticalAlignment="Center" Click="buttonCompanyDelete_Click" Margin="188,333,0,205" Style="{StaticResource DeleteButtonStyle}" />
//These three buttons apply the styles:
<Button HorizontalAlignment="Left" Name="buttonItemSave" VerticalAlignment="Bottom" Click="buttonItemSave_Click" Style="{StaticResource SaveButtonStyle}" />
<Button HorizontalAlignment="Center" Name="buttonItemsUpdate" VerticalAlignment="Bottom" Click="buttonItemsUpdate_Click" Style="{StaticResource UpdateButtonStyle}" />
<Button HorizontalAlignment="Right" Name="buttonItemDelete" VerticalAlignment="Bottom" Click="buttonItemDelete_Click" Style="{StaticResource DeleteButtonStyle}" />
The strange problem is: if I move the blank buttons(buttonCompanySave,buttonCompaniesUpdate,buttonCompanyDelete) to the other group box, they apply the styles !. I try to figure out this problem but I don't find the solution, I even create new group boxes and buttons.
It happens cause your style changes Content property and when you set new Content value, then default style of Button is applied which does not have any Image and Label.
Instead of this you should create ContentPresenter for setting Content property dynamically and create your Image near the ContentPresenter. In addition, to exclude multiple Style's you can use DataTrigger to change Source of Image. Please, see the following example:
<Style x:Key="BaseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{x:Null}"/>
<Setter Property="Background" Value="#ffffff"/>
<Setter Property="BorderBrush" Value="#cccccc"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="#333333"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="16,3,16,3"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Chrome" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="true">
<StackPanel>
<TextBlock x:Name="txtBlck" Text="Update"/>
<Image x:Name="img">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Update">
<Setter Property="Source" Value="/SalesSolution;component/Images/update.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Save">
<Setter Property="Source" Value="/SalesSolution;component/Images/save.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Content, ElementName=Presenter}" Value="Delete">
<Setter Property="Source" Value="/SalesSolution;component/Images/delete.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<ContentPresenter Name="Presenter" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</StackPanel>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="#333333" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#dddddd" />
<Setter Property="BorderBrush" Value="#cccccc" />
<Setter Property="Foreground" Value="#333333" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#1ba1e2" />
<Setter Property="BorderBrush" Value="#1ba1e2"/>
<Setter Property="Foreground" Value="#ffffff"/>
</Trigger>
<Trigger Property="IsFocused" Value="true">
<Setter TargetName="Chrome" Property="BorderBrush" Value="#1ba1e2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
#StepUp: I Updated your code then it is working fine now:
<Image x:Name="img" Stretch="Uniform" StretchDirection="Both">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=txtBlck}" Value="Update">
<Setter Property="Source" Value="/SalesSolution;component/Images/update.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Text, ElementName=txtBlck}" Value="Save">
<Setter Property="Source" Value="/SalesSolution;component/Images/save.png"/>
</DataTrigger>
<DataTrigger Binding="{Binding Text, ElementName=txtBlck}" Value="Delete">
<Setter Property="Source" Value="/SalesSolution;component/Images/delete.png"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
If you have not: Move your button styles into App.xaml.
Or at least into the resource section of the window:
<Window ... >
<Window.Resources>
<!--Your button styles:-->
</Window.Resources>
</Window>
I am using the Microsoft Surface SDK and I am having trouble styling the selected item.
So far I have:
<s:SurfaceListBox Name="listy" Background="Transparent"
FontSize="50" Foreground="White" BorderBrush="White"
HorizontalContentAlignment="Center"
Margin="5,5,5,100" SelectionMode="Single">
<s:SurfaceListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" Foreground="White" />
</DataTemplate>
</s:SurfaceListBox.ItemTemplate>
<s:SurfaceListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<ContentPresenter HorizontalAlignment="Center" />
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Grey" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</s:SurfaceListBox.ItemContainerStyle>
</s:SurfaceListBox>
But that fails, and there are no tutorials for this at all on the internet - i searched for hours.
Thanks for any help!
I think the problem is that there is nothing using that Background. You could wrap the ContentPresenter in a Border and target it in the Trigger
<ControlTemplate TargetType="{x:Type s:SurfaceListBoxItem}">
<Border x:Name="Border">
<ContentPresenter HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>