I have a ControlTemplate like this :
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center"
VerticalAlignment="Center" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0"
Opacity="0.5" />
</Setter.Value>
</Setter>
<Setter Property="FontWeight" Value="SemiBold"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
When IsMouseOver property changes to True, I want all the images inside the contentPresenter to have the DropShadowEffect, not the button itself.
I tried changing the setter property to Image.Effect but it doesn't work.
How can I do it?
This is how my button looks like when Mouse is over:
And this is how it looks when it is not:
As you can see, both the Image and TextBlock is getting dropshadow effect. But I want only the Image to get it.
You can take the style recommended by Sinatr and put it in the ControlTemplate.Resources section of your button's control template. Here's an example that worked for me. It also handles the IsPressed event, during which I assume you want adjust the drop shadow effect for just the image:
<ControlTemplate x:Key="BtnTemplate" TargetType="{x:Type Button}">
<Grid Background="Transparent">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="FontWeight" Value="SemiBold"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
<ControlTemplate.Resources>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
<DataTrigger.Setters>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="0.5"/>
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding IsPressed, RelativeSource={RelativeSource AncestorType=Button}}" Value="True">
<DataTrigger.Setters>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20" Color="Black" ShadowDepth="0" Opacity="1" />
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
</Style>
</ControlTemplate.Resources>
</ControlTemplate>
You don't really need to define Button template, rather create an Image style
<Style x:Key="style"
TargetType="Image">
<Style.Triggers>
<DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Button}}"
Value="True">
<DataTrigger.Setters>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="20"
Color="Black"
ShadowDepth="0"
Opacity="0.5" />
</Setter.Value>
</Setter>
</DataTrigger.Setters>
</DataTrigger>
</Style.Triggers>
and apply it to each image you show inside button
<Button>
...
<Image Style="{StaticResource style}" ... />
...
</Button>
Related
I'm trying to create a round button which has a border shown when hovering and has an object binded color.
I tried to make this but when thes button's color is other than transparent, I can't click on it. Could you help me pls ? I am new to wpf and don't understand everything about it.
<Page.Resources>
<DataTemplate x:Key="Stone">
<StackPanel DataContext="{Binding}">
<Border CornerRadius="15" Height="30" Width="30" Margin="0" >
<Button Content="{Binding}" Tag="{Binding Name}" Height="30" Width="30" Margin="0" Click="Button_Click" Background="Transparent" BorderThickness="0">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding StrColor}" Value="black">
<Setter Property="Background" Value="Black"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="white">
<Setter Property="Background" Value="White"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="none">
<Setter Property="Background" Value="Transparent"></Setter>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="Gray"/>
<Setter Property="BorderThickness" Value="3"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="Goban">
<ItemsControl ItemsSource="{Binding }" ItemTemplate="{DynamicResource Stone}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</DataTemplate>
</Page.Resources>
<StackPanel Name="Goban">
<ItemsControl Height="570" Margin="20" x:Name="LstPlateau" ItemsSource="{Binding LstPlateau, Mode=Default}" ItemTemplate="{DynamicResource Goban}">
<ItemsControl.Background>
<ImageBrush ImageSource="../Pictures/goban19.png" Stretch="Fill" />
</ItemsControl.Background>
</ItemsControl>
</StackPanel>
For more details, i'm using mvvm light and, when I click a transparent button, the command fire but it don't whith other color (breakpoint not reached in the command).
Thank you for your help :)
The button is inside the border and "invisible"
To get a round button (or another shape other than rectangular), you need to change the template of the button itself.
Here's an example of a FULL circular button template.
Record it in a resource dictionary and use it in your button.
I did not set color bindings, because I did not understand from your code where they are used.
<SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
<SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
<SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
<SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
<SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
<SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
<SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
<SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
<Style x:Key="FocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ButtonRoundStyle" TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{DynamicResource FocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource Button.Static.Background}"/>
<Setter Property="BorderBrush" Value="{DynamicResource Button.Static.Border}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse x:Name="ellipse"
Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{Binding BorderThickness.Left, RelativeSource={RelativeSource AncestorType=Button}}"
Fill="{TemplateBinding Background}" SnapsToDevicePixels="true">
</Ellipse>
<ContentPresenter x:Name="contentPresenter" Focusable="False"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}" RecognizesAccessKey="True"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsDefaulted" Value="true">
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Pressed.Border}"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Fill" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Background}"/>
<Setter Property="Stroke" TargetName="ellipse" Value="{DynamicResource Button.Disabled.Border}"/>
<Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{DynamicResource Button.Disabled.Foreground}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
All keys are obtained through DynamicResource.
Therefore, they can be redefined at the place where the template is applied.
I edited the question, in my project I try ...
After complementing the question with the complete XAML code, if I understood it correctly, the pattern I showed is applied like this:
<Button Content="{Binding}" Tag="{Binding Name}"
Height="130" Width="130" Margin="0"
Click="Button_Click">
<Button.Resources>
<SolidColorBrush x:Key="Button.MouseOver.Border" Color="Gray"/>
</Button.Resources>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource ButtonRoundStyle}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding StrColor}" Value="black">
<Setter Property="Background" Value="Black"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="white">
<Setter Property="Background" Value="White"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding StrColor}" Value="none">
<Setter Property="Background" Value="Transparent"></Setter>
</DataTrigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderThickness" Value="3"/>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
I am creating WPF Desktop application in Visual studio 2019 with .NetCore 3.1
<Style TargetType="{x:Type ToggleButton}"
x:Key="toggle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked"
Value="True">
<Setter Property="Background"
Value="Beige" />
</Trigger>
<Trigger Property="IsChecked"
Value="False">
<Setter Property="Background"
Value="Brown" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Grid>
<ToggleButton Style="{DynamicResource toggle}" Width="150" Height="150" Background="Aquamarine"/>
</Grid>
So it show the message
The member IsChecked is not recognized or is not accessible.
Anybody have any idea what I might be doing wrong with this piece of my code. Thanks.
For anyone else, the property IsChecked is not accessible because the ControlTemplate does not have any TargetType.
What worked for me was -
<ControlTemplate TargetType={x:Type ToggleButton}>
<ControlTemplate.Triggers>
...
</ControlTemplate.Triggers>
</ControlTemplate>
Jawed,
You can try with the below code:
<Window.Resources>
<Style TargetType ="{x:Type ToggleButton}" x:Key="toggle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border CornerRadius="3" Background="{TemplateBinding Background}">
<ContentPresenter Margin="3"
HorizontalAlignment="Center"
VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush> <SolidColorBrush.Color>Beige</SolidColorBrush.Color>
</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush>
<SolidColorBrush.Color>Brown</SolidColorBrush.Color>
</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<ToggleButton Style="{DynamicResource toggle}" Width="150" Height="150"/>
</Grid>
Thanks,
I have created a custom control as you see below (Generic.xaml):
<Style TargetType="{x:Type local:MyCC}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:MyCC}">
<Grid Name="grd" Height="{Binding Height}" Width="{Binding Width}">
<Rectangle Name="FirstRec" Fill="Blue"/>
<Rectangle Name="SecondRec" Fill="Black" Margin="1"/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter Property = "Background" Value = "Red" />
</Trigger>
</Style.Triggers>
</Style>
For FirstRec I want to get the Foreground color of the CC (instead of blue) and for the SecondRec I need to get the Background (instead of black). Therefore now the trigger does not work properly! I also don't want to bind the Height and Width of the Grid because the CC has its own height and width but I don't know how to use it! Would you please help me?!
EDIT:
It is actually a switch that has a status. if status == 0 it shows an empty rectangle. if status == 1 it shows a filled rectangle. if status == 3 || status == 4 it shows a red cross on it. here is the cc:
<Style TargetType="{x:Type local:BreakerCC}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:BreakerCC}">
<Grid Name="grd" Background="{TemplateBinding Background}" >
<Rectangle Name="MainRectangle" StrokeThickness="1" Stroke="{TemplateBinding Foreground}"/>
<Path Name="Line1" Stroke="Red" StrokeThickness="1" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="0,0" EndPoint="1,1" />
</Path.Data>
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="0x00">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x01">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x02">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x03">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<Path Name="Line2" Stroke="Red" StrokeThickness="1" Stretch="Fill">
<Path.Data>
<LineGeometry StartPoint="0,1" EndPoint="1,0" />
</Path.Data>
<Path.Style>
<Style TargetType="Path">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="0x00">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x01">
<Setter Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x02">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="0x03">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is the definition in MainWindow.xaml
<Window.Resources>
<Style x:Key="230KV" TargetType="Control">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style x:Key="132KV" TargetType="Control">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Green"/>
</Style>
<Style x:Key="400KV" TargetType="Control">
<Setter Property="Background" Value="Black"/>
<Setter Property="Foreground" Value="Purple"/>
</Style>
</Window.Resources>
<Grid>
<StackPanel>
<CC:BreakerCC Status="{Binding Status}" Style="{StaticResource 132KV}" Height="20" Width="20"/>
</StackPanel>
</Grid>
But when the status is 3 or 4 i need to change the Foreground to Red and that doesn't work!
Use TemplateBindings for the Brushes. Binding Width and Height is not at all necessary.
<Style TargetType="local:MyCC">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyCC">
<Grid>
<Rectangle Fill="{TemplateBinding Foreground}"/>
<Rectangle Fill="{TemplateBinding Background}" Margin="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
As a note, instead of a Grid you would usually have a Border element and assign TemplateBindings to its Background, BorderBrush and BorderThickness properties - as done by default by Visual Studio when you create a new custom control.
EDIT: It seems that you do not need a custom control at all. Just create ContentControl styles like these:
<Window.Resources>
<Style TargetType="ContentControl" x:Key="BaseStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Path x:Name="path" Stroke="{TemplateBinding Foreground}"
Data="{TemplateBinding Content}" Stretch="Fill"/>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=Status}" Value="0">
<Setter TargetName="path"
Property="Visibility" Value="Hidden"/>
</DataTrigger>
<DataTrigger Binding="{Binding Path=Status}" Value="1">
<Setter TargetName="path"
Property="Visibility" Value="Hidden"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background" Value="Black"/>
<Setter Property="BorderBrush" Value="{Binding Foreground,
RelativeSource={RelativeSource Self}}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
</Style>
<Style x:Key="230KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Foreground" Value="Red"/>
</Style>
<Style x:Key="132KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Foreground" Value="Green"/>
</Style>
<Style x:Key="400KV" TargetType="ContentControl" BasedOn="{StaticResource BaseStyle}">
<Setter Property="Foreground" Value="Purple"/>
</Style>
</Window.Resources>
<StackPanel>
<ContentControl Style="{StaticResource 230KV}">
<PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
</ContentControl>
<ContentControl Style="{StaticResource 132KV}">
<PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
</ContentControl>
<ContentControl Style="{StaticResource 400KV}">
<PathGeometry>M0,0 L1,1 M0,1 L1,0</PathGeometry>
</ContentControl>
</StackPanel>
I want to Style an Border inside a ControlTemplate. But I don't know how to access it. My Style looks like this:
<Style x:Key="RedCell" TargetType="DataGridCell" BasedOn="{StaticResource MYDGCellStyle}">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridCell">
<Grid>
<Grid Grid.ZIndex="86" x:Name="CellContenGrind" Background="{TemplateBinding Background}" />
<Border Grid.ZIndex="87" x:Name="ContentBorder" BorderBrush="White" Background="Crimson" CornerRadius="25">
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
<Grid Grid.ZIndex="88" x:Name="CellGridFocused"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="CellGridFocused" Value="{DynamicResource Brush_DataGridCellFocused}" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" TargetName="CellContenGrind" Value="{DynamicResource Brush_DataGridSelected}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding ungelesen}" Value="0">
<Setter Property="Background" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
I need the Background="{TemplateBinding Background}" on my CellContentGrind because of some other stuff, so I can't just move that to my Border.
If ungelesen = 0, I want the Background of my ContentBorder to be Green. How can I do that?
Why not move the Style to the Border itself?
<Border Grid.ZIndex="87"x:Name="ContentBorder" BorderBrush="White" CornerRadius="25">
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background" Value="Crimson" />
<Style.Triggers>
<DataTrigger Binding="{Binding ungelesen}" Value="0">
<Setter Property="Background" Value="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
Note that Background is set with Setter now to make overridable with DataTrigger.
I have following Checkbox.xaml file. I want to apply two different Dropshadow effect on mouse over on CheckBox. So I have taken two MultiTriggers. I want to remove those MultiTriggers and combine them into single trigger using DataBinding to Background of Border element. Because Border element will always have right background due to first trigger I have applied.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="..\Colors\Colors.xaml"></ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
<ControlTemplate x:Key="CheckBoxTemplate" TargetType="CheckBox" >
<BulletDecorator >
<BulletDecorator.Bullet>
<Border x:Name="Border"
Width="13"
Height="13"
CornerRadius="0"
Background="{StaticResource TextNormalBrush}"
BorderThickness="3"
BorderBrush="Black">
</Border>
</BulletDecorator.Bullet>
<ContentPresenter Margin="4,0,0,0"
VerticalAlignment="Center"
HorizontalAlignment="Left"
RecognizesAccessKey="True" />
</BulletDecorator>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="Border" Property="Background" Value="{StaticResource AlternateLinearBrush}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"></Condition>
<Condition Property="IsChecked" Value="False"></Condition>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="Border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Direction="0" BlurRadius="15" Opacity="1" Color="{StaticResource TextNormalColor }">
</DropShadowEffect>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"></Condition>
<Condition Property="IsChecked" Value="True"></Condition>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter TargetName="Border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Direction="0" BlurRadius="15" Opacity="1" Color="{StaticResource AlternateColor }">
</DropShadowEffect>
</Setter.Value>
</Setter>
</MultiTrigger.Setters>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}">
<Setter Property="Template" Value="{StaticResource CheckBoxTemplate}" />
<Setter Property="Foreground" Value="{StaticResource TextNormalBrush}" />
<Setter Property="TextOptions.TextHintingMode" Value="Animated"/>
</Style>
</ResourceDictionary>
Do you mean somthing like:
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" Direction="0" BlurRadius="15" Opacity="1" Color="{Binding RelativeSource={RelativeSource AncestorType={x:Type Border}}, Path=Background.Color}">
</DropShadowEffect>
</Setter.Value>
</Setter>
</Trigger>
In this example the Shadow-Effact always has the background-color of its Border.