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>
Related
I want to add border to radiobutton with text on isChecked
I tried Style.Trigger but it didn't seem to have action
Also tried via ControlTemplate.Trigger but referencing to both grid and text box says Parameter is not recognized
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style BasedOn="{StaticResource {x:Type ToggleButton}}"
TargetType="{x:Type RadioButton}"
x:Key="MenuButtonTheme">
<Style.Setters>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBlock Text="{TemplateBinding Property=Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0">
</TextBlock>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<!-- <Setter TargetName="ButtonText" Property="BorderThickness" Value="5"></Setter> -->
<!-- <Setter TargetName="GridMain" Property="BorderThickness" Value="5"></Setter> -->
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Transparent"></Setter>
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="5"></Setter>
<Setter Property="BorderBrush" Value="#7289da"></Setter>
</Trigger>
</Style.Triggers>
</Style>
The TextBlock doesn't have a border, so it's impossible to set a value for the border either.
It can be solved in two ways.
Use instead of TextBlock element TextBox in read-only mode.
<ControlTemplate TargetType="RadioButton">
<Grid VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBox Text="{TemplateBinding Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0"
IsReadOnly="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<Setter TargetName="ButtonText" Property="BorderThickness" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Since you have only one element in the panel, you can use Border instead.
<ControlTemplate TargetType="RadioButton">
<Border VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Background="{TemplateBinding Background}"
x:Name="GridMain">
<TextBlock Text="{TemplateBinding Property=Content}"
x:Name="ButtonText"
VerticalAlignment="Center"
Margin="20,0,0,0">
</TextBlock>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="ButtonText" Property="Margin" Value="30,0,0,0"></Setter>
<Setter TargetName="GridMain" Property="BorderThickness" Value="5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="GridMain" Property="Background" Value="#424549"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
I have a close button. My requirement is that when a user mouse goes over the button the button background color will change.
I have a path inside the button for "X" symbol. When mouseover the path is the background is changing is working correctly. But very near to mouse over the path then only the background color is changed.
So please could anyone suggest how to resolve this,
MyStyleCode:
<Style x:Key="closeButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="White" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bd">
<Path Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L8,8 M8,0 L0,8"
Stroke="White"
StrokeThickness="2" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter TargetName="bd" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="bd" Property="Background" Value="Red" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="bd" Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Button
<Button Grid.Column="1"
Width="40"
Height="25"
Margin="0,0,5,0"
HorizontalAlignment="Right"
VerticalAlignment="Center"
HorizontalContentAlignment="Center"
Style="{StaticResource closeButtonStyle}"
ToolTip="Close" />
Try setting the Style.Triggers for your Button. Not to your Content alone (Path for your case). Like,
<Style x:Key="closeButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bd" Background="{TemplateBinding Background}">
<Path Margin="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M0,0 L8,8 M8,0 L0,8"
Stroke="Black"
StrokeThickness="2" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
<Trigger Property="Button.IsPressed" Value="true">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
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>
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>
I have a style for button as per below code.
<Style TargetType="Button" x:Key="TransparentButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border HorizontalAlignment="Center" x:Name="borderTemplate"
Background="Transparent">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Gray" />
<Setter TargetName="borderTemplate"
Property="Border.BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="borderTemplate"
Property="Border.BorderBrush" Value="Lime" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I need to set the background of button
1.To gray as soon as “MouseUp“ event occurred.
2.And set it to Default(say white)as soon as Focus Of Button being changed or say Focus Being lost.
Is there any way to solve this using Trigger or EventTrigger??.
See One example for above code with image
Button with Above style.
<Button Background="Black" Style="{StaticResource TransparentButton}"
Content="0123456789" Height="15" HorizontalAlignment="Left"
Name="button2" VerticalAlignment="Top" Margin="70,17,0,0" />
Button will look as per below image after above style being applied.
This can be done by using RadioButton instead of Button
just have a look at this
<Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
<Setter Property="Background" Value="#F4F4F4"/>
<Setter Property="BorderBrush" Value="{StaticResource CheckBoxStroke}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Border HorizontalAlignment="Center" x:Name="borderTemplate" Background="Transparent" VerticalAlignment="Center">
<ContentPresenter x:Name="contentPresenter" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFE4E4E4"/>
<Setter Property="HorizontalAlignment" TargetName="contentPresenter" Value="Center"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" TargetName="borderTemplate" Value="#FFA1A1A1"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid x:Name="LayoutRoot">
<StackPanel/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,86.04,0,0" Style="{StaticResource RadioButtonStyle1}"/>
<RadioButton Content="RadioButton" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="116,106,0,0" Style="{StaticResource RadioButtonStyle1}"/>
</Grid>