I have problem with ListBox item style, I create two styles and do not know to use it together. 1st style is for ListBox item size, mouse over color and so on, or second is for item background (Alternation count). If I leave one of them they work fine, but how to make them work together? Or maybe I could it write in one style?
My code is:
..... <Style x:Key="Style2"
TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border
Name="Border"
Padding="7"
SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background"
Value="{StaticResource SelectedBackgroundBrush}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FFFFFF"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#F7F7F7"></Setter>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type ListBoxItem}"
TargetType="{x:Type ListBoxItem}"
BasedOn="{StaticResource Style2}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#19f39611"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#19000000"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid >
<ScrollViewer Margin="30,98,362,30">
<ListBox x:Name="lbPersonList" AlternationCount="2">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
You can use BasedOn
<Style x:Key="Style1" TargetType="ListBoxItem">
...
</Style>
<Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem" BasedOn={StaticResource Style1}>
...
</Style>
EDITED
The problem was the Background setter of the ControlTemplate. This is the solution (using AlternationConverter instead of triggers):
<Window.Resources>
<AlternationConverter x:Key="BackgroundConverter">
<SolidColorBrush Color="#19f39611" />
<SolidColorBrush Color="#19000000" />
</AlternationConverter>
<Style x:Key="Style2" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="7" SnapsToDevicePixels="True" Background="{TemplateBinding Background}">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Gray"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Green"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style1" TargetType="{x:Type ListBoxItem}" BasedOn="{StaticResource Style2}">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource BackgroundConverter}}"/>
</Style>
</Window.Resources>
<ListBox x:Name="lbPersonList" AlternationCount="2" ItemContainerStyle="{StaticResource Style1}">
...
Using Dynamic resource you can achieve this using single listboxitem style
<Window.Resources>
<Style x:Key="Lststyle" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Background="Transparent" Padding="7" SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ListBox.AlternationIndex" Value="0">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource Color0}"/>
</Trigger>
<Trigger Property="ListBox.AlternationIndex" Value="1">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource Color1}"/>
</Trigger>
<Trigger Property="ListBoxItem.IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="ListBoxItem.IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel >
<TextBlock Text="Listbox1"></TextBlock>
<ScrollViewer >
<ListBox x:Name="lbPersonList" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2">
<ListBox.Resources>
<SolidColorBrush x:Key="Color0" Color="#19f39611"></SolidColorBrush>
<SolidColorBrush x:Key="Color1" Color="#19000000"></SolidColorBrush>
</ListBox.Resources>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
</ListBox>
</ScrollViewer>
<TextBlock Margin="0,10,0,0" Text="Listbox2"></TextBlock>
<ScrollViewer>
<ListBox x:Name="lbPersonList1" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2">
<ListBox.Resources>
<SolidColorBrush x:Key="Color0" Color="Yellow"></SolidColorBrush>
<SolidColorBrush x:Key="Color1" Color="Blue"></SolidColorBrush>
</ListBox.Resources>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
</ListBox>
</ScrollViewer>
</StackPanel>
Simplified xaml
<Window.Resources>
<Style x:Key="lst1" TargetType="ListBox" >
<Style.Resources>
<SolidColorBrush x:Key="Color0" Color="#19f39611"></SolidColorBrush>
<SolidColorBrush x:Key="Color1" Color="#19000000"></SolidColorBrush>
</Style.Resources>
</Style>
<Style x:Key="lst2" TargetType="ListBox" >
<Style.Resources>
<SolidColorBrush x:Key="Color0" Color="Blue"></SolidColorBrush>
<SolidColorBrush x:Key="Color1" Color="Yellow"></SolidColorBrush>
</Style.Resources>
</Style>
<Style x:Key="Lststyle" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Background="Transparent" Padding="7" SnapsToDevicePixels="True">
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="{DynamicResource Color0}"/>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="{DynamicResource Color1}"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ListBox.AlternationIndex" Value="0">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource Color0}"/>
</Trigger>
<Trigger Property="ListBox.AlternationIndex" Value="1">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource Color1}"/>
</Trigger>
<Trigger Property="ListBoxItem.IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="ListBoxItem.IsEnabled" Value="false">
<Setter Property="Foreground" Value="LightGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel >
<TextBlock Text="Listbox1"></TextBlock>
<ScrollViewer >
<ListBox x:Name="lbPersonList" Style="{StaticResource lst1}" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2">![enter image description here][2]
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
</ListBox>
</ScrollViewer>
<TextBlock Margin="0,10,0,0" Text="Listbox2"></TextBlock>
<ScrollViewer>
<ListBox x:Name="lbPersonList1" Style="{StaticResource lst2}" ItemContainerStyle="{StaticResource Lststyle}" AlternationCount="2">
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
<TextBlock Text="listboxitem1"></TextBlock>
</ListBox>
</ScrollViewer>
</StackPanel>
You should set for each style a proper x:Key and then for one of your style you can use BasedOn={StaticResource Style1} which appends to your current style, style1. (Check documentation: https://msdn.microsoft.com/en-us/library/system.windows.style.basedon(v=vs.110).aspx)
Check this one:
<Style x:Key="Style2"
TargetType="ListBoxItem">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="#19f39611"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="#19000000"></Setter>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border"
Padding="7"
SnapsToDevicePixels="True">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Background"
Value="Red" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListBoxItem}"
BasedOn="{StaticResource Style2}">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Style.Triggers>
<Trigger Property="ListBox.AlternationIndex"
Value="0">
<Setter Property="Background"
Value="CornflowerBlue" />
<Setter Property="Foreground"
Value="Black" />
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex"
Value="1">
<Setter Property="Background"
Value="LightBlue" />
<Setter Property="Foreground"
Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
Related
I have a DataGrid in which I can change the respective colors when my CheckBox is activated. However, my IsMouseOver event only works if my CheckBox is true. As soon as my CheckBox is set to false, my IsMouseOver Effect no longer works, why? Do I have to set a trigger somewhere?
My Code from my DataGrid:
<DataGrid x:Name="datagrid" ItemsSource="{Binding}"
CanUserAddRows="False" CanUserDeleteRows="False"
CanUserResizeRows="True" GridLinesVisibility="None"
ColumnWidth="*" DockPanel.Dock="Bottom"
Background="#222831" Foreground="White"
AutoGenerateColumns="True">
<DataGrid.ContextMenu>
<ContextMenu>
<MenuItem Command="Copy"/>
</ContextMenu>
</DataGrid.ContextMenu>
<DataGrid.Resources>
<!--Design kopfzeile-->
<Style TargetType="{x:Type DataGridColumnHeader}" x:Name="test" >
<Setter Property="Background" Value="#292F3B"/>
<Setter Property="Foreground" Value="LightBlue"/>
<Setter Property="FontWeight" Value="SemiBold"/>
<Setter Property="Height" Value="30"/>
<Setter Property="FontSize" Value="15"/>
<Setter Property="BorderThickness" Value="0,0,2,0" />
<Setter Property="BorderBrush" Value="#333333"/>
<Setter Property="Padding" Value="10 0 0 0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border x:Name="insideHeader" Background="#242A36">
<Border x:Name="borderHeader" BorderThickness="1"
CornerRadius="6"
Background="#2D2D30"
Padding="10,0,0,0"
Margin="2">
<ContentPresenter/>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="borderHeader" Property="Background" Value="#4182C6"/>
</Trigger>
<DataTrigger Binding="{Binding ElementName=toogleButton,Path=IsChecked}" Value="False">
<Setter TargetName="borderHeader" Property="Background" Value="#FA9F34"/>
<Setter Property="Foreground" Value="#2B2B2B"/>
<Setter TargetName="insideHeader" Property="Background" Value="#00336E"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--Deaktivieren Des rowheader-->
<Style TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Background" Value="Transparent"/>
</Style>
<!--Cellen Design-->
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="#292F3B"/>
<Setter Property="Foreground" Value="LightBlue"/>
<Setter Property="BorderThickness" Value="0,0,2,0" />
<Setter Property="BorderBrush" Value="#333333"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border x:Name="insideBorder" Background="#242A36">
<Border x:Name="BorderCell" BorderThickness="1"
CornerRadius="6"
Background="#292F3B"
Padding="10,0,0,0"
Margin="2">
<ContentPresenter/>
</Border>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BorderCell" Property="Background" Value="#4182C6"/>
</Trigger>
<DataTrigger Binding="{Binding ElementName=toogleButton,Path=IsChecked}" Value="False">
<Setter TargetName="BorderCell" Property="Background" Value="#0051B0"/>
<Setter TargetName="insideBorder" Property="Background" Value="#00336E"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
</DataGrid>
change triggers' order. they both set Background. at the moment DataTrigger for IsChecked=false overrides Trigger for IsMouseOver=true, when CheckBox is unchecked, because DataTrigger is applied last.
<DataTrigger Binding="{Binding ElementName=toogleButton,Path=IsChecked}" Value="False">
<Setter TargetName="borderHeader" Property="Background" Value="#FA9F34"/>
<Setter Property="Foreground" Value="#2B2B2B"/>
<Setter TargetName="insideHeader" Property="Background" Value="#00336E"/>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="borderHeader" Property="Background" Value="#4182C6"/>
</Trigger>
I have the below code where I'm trying to change the background color of the button when its disabled. But it still stays at the same background color as it is when its enabled. Its not changing though the button does get disabled. Any help would be much appreciated.
<Button Content="Install" Command="{Binding InstallCommand}" Margin="150,30,30,22" Width="118" FontSize="18" FontWeight="Bold" FontFamily="Segoe UI Light" FontStretch="ExtraExpanded">
<Button.Style>
<Style TargetType="Button">
<Setter Property="IsEnabled" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="#FF4F4F4F"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="1"
Background="{TemplateBinding Background}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="Goldenrod"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I found that in your trigger you are not checking the value .Change your trigger as below.
<Style.Triggers>
<DataTrigger Binding="{Binding InstallEnabled, Converter={StaticResource BooleanToVisibilityConverter}}" Value="False">
<Setter Property="IsEnabled" Value="False" />
<Setter Property="Background" Value="{DynamicResource windowBGBrushBusinessDateChanged}"/>
</DataTrigger>
</Style.Triggers>
You can change the disabled button background by changing the control template of button like below,
<Window.Resources>
<Style x:Key="MyButton2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Background" Value="MediumAquamarine" />
<Setter Property="Foreground" Value="MediumBlue" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="MyContentPresenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="{TemplateBinding Content}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Green" />
<Setter Property="Foreground" Value="DeepPink" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button x:Name="disabledButton"
Width="100"
Height="100"
Content="Button State"
IsEnabled="False"
Style="{StaticResource MyButton2}" />
</Grid>
I am trying to create a style for a TabControl to achieve 2 goals:
Display the selected TabItem with a different background color and in bold.
Format the tab header text, bound to a date in the view model, to hours and minutes like "15:45".
I almost succeeded but the header text is also displaying the date part.
Besides it is displaying 03:45 instead of 15:45.
see screenshot here
Here is the XAML code I am using:
<TabControl ItemsSource="{Binding MC}" >
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header"
/>
<!--<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />-->
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<HeaderedContentControl Header="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
Thanks in advance for any help.
I think this is what you're looking for:
<TabControl ItemsSource="{Binding MC}">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Background" Value="#01535F" />
<Setter Property="Foreground" Value="Azure" />
<Setter Property="FontSize" Value="16" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="Black" Margin="1,1">
<Grid Name="Panel">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" />
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="FontWeight" Value="Bold" />
<Setter TargetName="Panel" Property="Background" Value="#003F44" />
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Panel" Property="Background" Value="#01535F" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="FontWeight" Value="Bold" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabControl.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Path=MarketStartTime, StringFormat={}{0:HH:mm}}"></TextBlock>
</DataTemplate>
</TabControl.ItemTemplate>
</TabControl>
The ItemTemplate is for the header area, the ContentTemplate is for what is showing in the content area. That ContentPresenter in the ContentTemplate will instantiate the controls from the ItemTemplate.
I struggle with Alternation style and selected row background color style in ListViewItem. I could make that they work separately, but together they does not work. Maybe someone know problem?
Code:
<AlternationConverter x:Key="BackgroundConverter">
<SolidColorBrush Color="#19f39611" />
<SolidColorBrush Color="#19000000" />
</AlternationConverter>
<Style x:Key="Style2" TargetType="ListViewItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border
Name="Border"
Padding="2"
SnapsToDevicePixels="true"
Background="Transparent">
<GridViewRowPresenter
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border"
Property="Background" Value="Red"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground"
Value="Beige"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="Style1" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource Style2}">
<Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Self},
Path=(ItemsControl.AlternationIndex),
Converter={StaticResource BackgroundConverter}}"/>
</Style>
.....
<ListView AlternationCount="2" ItemContainerStyle="{StaticResource Style1}" >
I found other way how to do it:
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="FontSize" Value="21"/>
<Setter Property="Height" Value="40"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#E6E6E6"
Name="Border" Padding="2" SnapsToDevicePixels="true">
<GridViewRowPresenter Content="{TemplateBinding Content}"
Columns="{TemplateBinding GridView.ColumnCollection}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
</GridViewRowPresenter>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border"
Property="Background" Value="#FFD65E"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1"/>
<Setter TargetName="Border" Property="BorderBrush" Value="#FFBA59"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- setting up triggers for alternate background colors -->
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#FFFFFF"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#F7F7F7"></Setter>
</Trigger>
</Style.Triggers>
</Style>
This is my ToggleButton:
<ToggleButton Width="100" Height="30" Margin="344,262,530,345" BorderThickness="2" Background="Transparent"
BorderBrush="#38abcf" FontFamily="Resources/#Buxton Sketch" Foreground="Gainsboro" FontSize="14">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="OFF"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="ON"/>
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
Currently on activate state it's look like that:
And the Background color not changed although i set new property.
Update
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="Loops OFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Width="100" Height="30" BorderThickness="2" Background="Transparent" BorderBrush="#38abcf">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="Loops ON"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
Override default template
<ToggleButton>
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Content" Value="OFF"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Name="Border" Width="100" Height="30" BorderThickness="2" Background="Transparent"
BorderBrush="#38abcf">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Red" TargetName="Border" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="ON"/>
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>