In the AlternationIndex trigger, why doesn't my background property work? - wpf

code show as below:
This is part of my custom datagrid appearance.
<Style x:Key="DatagridStyle_1" TargetType="DataGrid">
<!--<Setter Property="ColumnHeaderStyle" Value="{DynamicResource Datagrid_HearderStyle_1}"/>
<Setter Property="CellStyle" Value="{DynamicResource Datagrid_CellStyle_1}"/>-->
<Setter Property="RowStyle" Value="{DynamicResource ConTemplate_DgRow_1}"/>
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="AlternationCount" Value="2"/>
<!--<Setter Property="Template" Value="{DynamicResource DataGridTemplate1211}"/>-->
<Style x:Key="ConTemplate_DgRow_1" TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridRow">
<Grid SnapsToDevicePixels="True" Background="Transparent">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
>
</Border>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
/>
</Grid>
<!--<Border BorderThickness="1" Background="LightGreen" SnapsToDevicePixels="True">
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}"/>
</Border>-->
<ControlTemplate.Triggers>
<!--<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>-->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
this part doesn't work,but the other part
<Setter Property="Foreground" Value="LightGreen"/> works fine
In the above code, I set the AlternationIndex trigger in the penultimate part of the code. In the same trigger, the Foreground property has already taken effect, but the Background property has never taken effect. I have modified the cell template and datagrid template before, and set their background color to transparent, but it has no effect.
I'd like to understand why this is the case and how to make setting the background color work.

Related

How to change the size of a radio button border?

XAML:
<RadioButton Margin="15" Grid.Row="0" Grid.Column="3" Style=" {StaticResource SpeedButtonStyle}" Content="TEST"/>
Style:
<!-- Speed Button Style -->
<Style x:Key="SpeedButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgInactive}"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="30"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
</Style.Triggers>
</Style>
I am trying to change the size of the border on my radio button which is styled like a toggle button. I can change the colour of the border but not the size. it seems to be using the default size which is realy thin.
I'm using my templated ToggleRadioButton and you can achieve it by binding BorderThickness to its templated parent.
<Style TargetType="RadioButton" x:Key="SpeedButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}">
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="DarkRed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="Green"/>
<Setter Property="Foreground" Value="LightSeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
EDIT:
I think you had completely different problem. Trigger on IsMouseOver or IsChecked doesn't get rid of default Windows hover colours. So you have to get rid of that, which is achieved but templating ToggleButton with a Border on top of templating your RadioButton with that styled ToggleButton. Note that if you would want to modify it more, you have to bind it's properties in the Border as well in ToggleButton. Difference between TemplateBinding and Binding on TemplatedParent is here and furthermore TemplateBinding is only One Way, so IsChecked should be on TemplatedParent.
This should work now (at least for me it did in new project), just replace the colours.

Style isn't working properly

While learning WPF, I've created a style, that applies rounded corners to a textbox and also set the background color, if the control has the focus:
<Style TargetType="TextBox" x:Name="efTextBoxStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate >
<Border x:Name="border" BorderThickness="1" CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Red"/>
<Setter Property="Background" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
At runtime if the control gets the focus, the border is rendered as expected in red color, but the background color of the textbox doesn't change to blue.
What's wrong?
Setter mus have a TargetName else it won't know where to set the value.
In your case:
<Setter TargetName="border" Property="Background" Value="Blue"/>
That might sound a bit confusing, but for the Background you need your TargetName="border"
For the foreground on the other hand side, you wouldn't need:
<Style TargetType="TextBox" x:Name="efTextBoxStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate x:Name="bal">
<Border x:Name="border" BorderThickness="1" CornerRadius="2">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Red"/>
<Setter TargetName="border" Property="Background" Value="blue"/>
<Setter Property="Foreground" Value="yellow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF Alternation and selected background color doesn't work together

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>

Setting a different color for each tab using the same style

So I have the following style in my Window.Resources:
<Style TargetType="TabItem" x:Key="tiS">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Grid Height="40" Width="186">
<Border Name="tiBorder" Background="Transparent">
<ContentPresenter ContentSource="Header"
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.FontSize="20"/>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="90"/>
<Setter TargetName="tiBorder" Property="Background" Value="{DynamicResource tiB}"/>
<!--<Setter TargetName="tiBorder" Property="Margin" Value="0,-4,0,-4"/>-->
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Panel.ZIndex" Value="80"/>
<Setter TargetName="tiBorder" Property="BorderThickness" Value="0,0,0,1"/>
<Setter TargetName="tiBorder" Property="BorderBrush" Value="{StaticResource tiLineFade}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This style is used on 5 TabItems, each with a different color given by 'DynamicResource tiB' in the trigger.
In each TabItem I have the following resource placed (Color1 is set in the Window.Resources):
<TabItem.Resources>
<SolidColorBrush x:Key="tiB" Color="{StaticResource Color1}"/>
</TabItem.Resources>
I was wondering, is there an easier way to do this or am I doing it right? This is the first time I'm working with styles in WPF so I want to do it right. (This code is working! Looking for a better (if there is one) solution to my situation.)
Here is the full code: http://pastebin.com/igwxgp6M
I believe this will work
<TabControl ...>
<TabControl.ItemsContainerStyle>
<Style TargetType="TabItem">
//Put triggers here
</Style>
<TabControl.ItemsContainerStyle>
</TabControl>

Validation Error Templates For UserControl

I have built an UserControl. I don't like the red border showing around it when validation errors occur. I have a textbox inside my control.
How can I override the validation error style to get rid of the red border in the whole control and just show a red background in the textbox inside my usercontrol?
Thanks!
I am using this template that will color the background of the textbox instead of showing just the border.
<UserControl.Resources>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true" >
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="MistyRose"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="BorderThickness" Value="1.0"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="ToolTip" Value="{Binding RelativeSource={RelativeSource
Self},Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
And all I have to do to your DocPannel Where the controls are located for example for me inside a DockPanel then i have to set its Validation.Error template to nothing this will remove the border.
For Ex:
<TextBox >
<Validation.ErrorTemplate>
<ControlTemplate>
</ControlTemplate>
</Validation.ErrorTemplate>
</TextBox>
On the style for your user control:
<Setter Property="Validation.ErrorTemplate" Value="{x:Null}"/>
On the style for your textbox:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBoxBase}">
<Border
Name="Border"
CornerRadius="5"
Padding="2"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}" >
<ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="LightGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
<Setter Property="Foreground" Value="Gray"/>
</Trigger>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="BorderBrush" TargetName="Border" Value="{DynamicResource ErrorBorderColor}"/>
<Setter Property="Background" TargetName="Border" Value="{DynamicResource ErrorBackgroundColor}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>

Resources