WPF Effects on Button Text - wpf

I try to add a glow effect in the text of my buttons in my App.xaml but I can not find any Information on how to do it. All the effects I find are applied to the complete button.
Here is my code:
<Application x:Class="RSPolar.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="MainWindow.xaml">
<Application.Resources>
<Style TargetType="Button">
<Setter Property="FontSize" Value="48">
</Setter>
<Setter Property="Foreground" Value="#00EE00">
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Gray" Offset="1"/>
<GradientStop Color="DarkGray" Offset="0.52"/>
<GradientStop Color="Gray" Offset="0.5"/>
<GradientStop Color="LightGray" Offset="0.48"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="10" Opacity="0.5" />
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<BlurEffect Radius="1"></BlurEffect>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>

Try adding Textblock with Effect in Button as content.
<Window.Resources>
<Style TargetType="Button">
<Setter Property="FontSize" Value="48">
</Setter>
<Setter Property="Foreground" Value="#00EE00">
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Gray" Offset="1"/>
<GradientStop Color="DarkGray" Offset="0.52"/>
<GradientStop Color="Gray" Offset="0.5"/>
<GradientStop Color="LightGray" Offset="0.48"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="10" Opacity="0.5" />
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<BlurEffect Radius="1"></BlurEffect>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Button Width="300" Height="200">
<TextBlock Text="Content">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="8" Color="#00EE00" ShadowDepth="0"/>
</TextBlock.Effect>
</TextBlock>
</Button>
Update
Using ContentTemplate in style you can use it for all button.
<Window.Resources>
<Style TargetType="Button">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock FontSize="48" Foreground="#00EE00" Text="{Binding Path=Content,RelativeSource={RelativeSource AncestorType={x:Type Button}}}">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="8" Color="#00EE00" ShadowDepth="0"/>
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="Gray" Offset="1"/>
<GradientStop Color="DarkGray" Offset="0.52"/>
<GradientStop Color="Gray" Offset="0.5"/>
<GradientStop Color="LightGray" Offset="0.48"/>
<GradientStop Color="WhiteSmoke" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<DropShadowEffect Color="Black" Direction="320" ShadowDepth="3" BlurRadius="10" Opacity="0.5" />
</Setter.Value>
</Setter>
<Setter Property="Button.Effect">
<Setter.Value>
<BlurEffect Radius="1"></BlurEffect>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button Width="300" Content="content1" Height="200"/>
<Button Width="300" Content="content2" Margin="0,10,0,0" Height="200"/>
</StackPanel>

Related

Slow ComboBox Performance

As explained in the following article http://vbcity.com/blogs/xtab/archive/2009/12/15/wpf-using-a-virtualizingstackpanel-to-improve-combobox-performance.aspx, I use the VirtualizingStackPanel to improve the performance of my project's ComboBoxes.
And it works great ... until I apply a style to ComboBox to change the layout (I found the style here : http://msdn.microsoft.com/en-us/library/ee230084.aspx)
Here is the source code of a sample which demonstrate the matter (figuring that ItemSource propery of the ComboBox are filled with 10 000 items).
If anyone has an idea ...
<Window.Resources>
<!-- Fill Brushes -->
<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="Black" />
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#E5E5E5" />
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />
<!-- Border Brushes -->
<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#AAA" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#AAA" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#AAA" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#AAA" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />
<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />
<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="16" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" CornerRadius="2" Background="{StaticResource NormalBrush}" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="1" />
<Border x:Name="Border2" Grid.Column="0" CornerRadius="2,0,0,2" Margin="1" Background="{StaticResource WindowBackgroundBrush}" BorderBrush="{StaticResource NormalBorderBrush}" BorderThickness="0,0,1,0" />
<Path x:Name="Arrow" Grid.Column="1" Fill="{StaticResource GlyphBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter TargetName="Border2" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border2" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
<Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
<Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="ComboBoxBaseStyle" TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<Setter Property="MinHeight" Value="20"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton" Template="{StaticResource ComboBoxToggleButton}" Grid.Column="2" Focusable="false" IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite" IsHitTestVisible="False" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" Margin="3,3,23,3" VerticalAlignment="Center" HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox" Style="{x:Null}" Template="{StaticResource ComboBoxTextBox}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="3,3,23,3" Focusable="True" Background="Transparent" Visibility="Hidden" IsReadOnly="{TemplateBinding IsReadOnly}"/>
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsDropDownOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Slide">
<Grid Name="DropDown" SnapsToDevicePixels="True" MinWidth="{TemplateBinding ActualWidth}" MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder" Background="{StaticResource WindowBackgroundBrush}" BorderThickness="1" BorderBrush="{StaticResource SolidBorderBrush}"/>
<ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="false">
<Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
<Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
<Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter TargetName="PART_EditableTextBox" Property="Visibility" Value="Visible"/>
<Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
</Window.Resources>
<StackPanel>
<ComboBox x:Name="CustomerComboBox_WithoutStyle" SelectedValuePath="Id" DisplayMemberPath="Text" >
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
<ComboBox x:Name="CustomerComboBox_WithStyle" SelectedValuePath="Id" DisplayMemberPath="Text" Style="{StaticResource ComboBoxBaseStyle}" >
<ComboBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel />
</ItemsPanelTemplate>
</ComboBox.ItemsPanel>
</ComboBox>
</StackPanel>
The problem of your style is that it does not use any kind of UI Virtualization.
Try replacing the StackPanel with a VirtualizingStackpanel and set the VirtualizationMode to Recycle and you will see a huge performance boost.
Your approach forces WPF to realize a container and FrameworkElement for each of your 10k items, which takes an eternity as you have only 1 UI thread.
Just replace
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
with
<VirtualizingStackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
and see if it gets faster.
To be more precise, you override the ItemsPanel in your derived styles, but have no "ItemsPresenter" in the base style. Instead to use the StackPanel "hardcoded"
So many items probably is the result of a (UI) design flaw.
Try using a listbox or multiple combo boxes where the first combo box is a category and second is a sub category of the first.
having 10000 items in a combox is not very good design. MaxDropDownItems might be able to help you as less rendering is required. (this is the number of visible items shown when clicking the dropdown)
But, you should consider using a listbox. When you apply a listbox you should uses pages and on each page have 1000 records. Or use a search box

Adding parameters to style

I am trying to create a simple button:
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="0" BorderThickness="1" BorderBrush="#83a5d2" x:Name="border">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#e8f1fe" Offset="0"/>
<GradientStop Color="#cbe1fe" Offset="0.5"/>
<GradientStop Color="#a3c7f1" Offset="0.50"/>
<GradientStop Color="#cceffe" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter VerticalAlignment="Center" x:Name="contentPresenter"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But how can I change the CornerRadius? I want to be able to pass a property to the object so that the object will have that corner radius. I cannot use templatebinding because Button does not have a property called CornerRadius.
You can directly use the "Border.CornerRadius" property in your styles. For the sake of simplicity I skipped most other attributes:
<Style x:Name="myBtnStyle" TargetType="{x:Type Button}">
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="Border.CornerRadius" Value="3" />
<!-- more... -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="bdContent" CornerRadius="{TemplateBinding Border.CornerRadius}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
To bind the corner radius to a value you want to set programatically, you could declare it in your Xaml...
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border CornerRadius="{Binding MyCornerRadius}" BorderThickness="1" BorderBrush="#83a5d2" x:Name="border">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#e8f1fe" Offset="0"/>
<GradientStop Color="#cbe1fe" Offset="0.5"/>
<GradientStop Color="#a3c7f1" Offset="0.50"/>
<GradientStop Color="#cceffe" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<ContentPresenter VerticalAlignment="Center" x:Name="contentPresenter"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then create the button(s)...
<Button Style="{StaticResource ButtonStyle}" Content="Hello" DockPanel.Dock="Top" />
And then in your code behind, you could set it...
public CornerRadius MyCornerRadius { get; set; }
public MainWindow()
{
InitializeComponent();
DataContext = this;
MyCornerRadius = new CornerRadius(5, 6, 6, 5);
}
And this will give the effect you're after.

WPF/Styles: Setting Property Values of Template Elements

Suppose I have a style like
<Style x:Key="NotificationItemTemplate" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<DockPanel LastChildFill="False">
<DockPanel.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="#FF565656" /> <!-- How to change color values -->
<GradientStop Offset="1" Color="#FF353535" />
</LinearGradientBrush>
</DockPanel.Background>
...
</DockPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How can I set the color value of a gradient stop as labeled above to a different color, say on MouseOver, I know I use a Trigger, but how do I refer to that color value?
Unfortunately, I'm not sure if you can do it for a single gradient stop. You likely have to trigger to change the entire background brush:
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<DockPanel LastChildFill="False" x:Name="dock">
<DockPanel.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="#FF565656" />
<!-- How to change color values -->
<GradientStop Offset="1" Color="#FF353535" />
</LinearGradientBrush>
</DockPanel.Background>
<ContentPresenter />
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="dock" Property="Background">
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="#00CDFFFF" />
<!-- How to change color values -->
<GradientStop Offset="1" Color="#FF343465" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

WPF set border background in trigger

I need to create a trigger, that will change Border background property, when MouseEnter occurred. I did the follow:
<Border Width="20" Height="30" Focusable="True">
<Border.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Aquamarine" Offset="0"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Aquamarine" Offset="0"/>
<GradientStop Color="Beige" Offset="0.2"/>
<GradientStop Color="Firebrick" Offset="0.5"/>
<GradientStop Color="DarkMagenta" Offset="0.9"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
but it doesn't work. Thanks.
Common mistake. You have set the Border.Background property directly which will always override the value set by your trigger. (Locally set values have a very high precedence, style has a pretty low precedence.)
Instead, you should move your "normal" background into the Style like so:
<Border>
<Border.Style>
<Style TargetType="Border">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Aquamarine" Offset="0"/>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<!-- the trigger you showed -->
</Style.Triggers>
</Style>
</Border.Style>
</Border>

How to change control template from Style.Triggers

I've done it this way:
<Style x:Key="Button" BasedOn="{StaticResource LoginButton}" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="4">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0" Color="#0863a5" />
<GradientStop Offset="1" Color="#00457d" />
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Border CornerRadius="4">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0" Color="#508fbd" />
<GradientStop Offset="1" Color="#397ab0" />
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
Is there any better way to do this? I've scenarios where my control template is having more lines of code, and I'd only require to change a single style like BorderBrush or something. How can I change control template from Style.Triggers efficiently?
If your intention is just to give a different Background to the Border. You can achieve this in the ControlTemplate.Triggers
<Style x:Key="Button" BasedOn="{StaticResource LoginButton}" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate >
<Grid>
<Border x:Name="brd" CornerRadius="4">
<Border.Background>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0" Color="#0863a5" />
<GradientStop Offset="1" Color="#00457d" />
</LinearGradientBrush>
</Border.Background>
</Border>
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" TargetName="brd">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1">
<GradientStop Offset="0" Color="#508fbd" />
<GradientStop Offset="1" Color="#397ab0" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Resources