How to change control template from Style.Triggers - wpf

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>

Related

IsMouseOver is false when mouse is over child elements in custom WPF button template

I'm trying to create a straight-forward, colored button in WPF that changes colors when the mouse is over and again when the button is pressed. I've been working in web projects lately and it's insane how much more complicated styling WPF is vs. HTML.
Commentary aside, although the MS documentation on UIElement.IsMouseOver states that it includes child elements, I'm experiencing the opposite. My trigger changes the color when my pointer is right over the border of the button, but as soon as it moves a few pixels farther inward, it changes back. Using Snoop, as I move the pointer pixel by pixel toward the center of the button, I can see that IsMouseOver is true for the border, then for the ContentPresenter, then for the inner TextBlock, but they are mutually exclusive. When IsMouseOver is true for a child element, it's false for the parents. I've seen lots of examples using the same approach as mine, but it's not working. I've gone through quite a few edits so maybe I have some erroneous syntax. How do I make the trigger apply when the mouse is anywhere within the button.
Here is my code. I define the brushes as resources of the button, override the default control template replacing the Chrome border with a regular Border, and then replace the brushes in Style Triggers.
<Grid Name="grdResults" Grid.Row="3" Margin="0" Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
...
</Grid.RowDefinitions>
<Button Grid.ColumnSpan="2" Grid.RowSpan="2" Content="X" BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,3,0" Padding="5,1">
<Button.Resources>
<Style x:Key="ButtonFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="true" Fill="Transparent" Stroke="WhiteSmoke" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<LinearGradientBrush x:Key="BorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF9B9B9B" Offset="0"/>
<GradientStop Color="#FF666666" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="BackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA21E00" Offset="0"/>
<GradientStop Color="#FF550000" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB63200" Offset="0"/>
<GradientStop Color="#FF681800" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseDownBorderBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF666666" Offset="0"/>
<GradientStop Color="#FF9B9B9B" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseDownBackgroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF550000" Offset="0"/>
<GradientStop Color="#FFA21E00" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ForegroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FFB9B9B9" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseDownForegroundBrush" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB9B9B9" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Button.Resources>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
<Setter Property="Background" Value="{StaticResource BackgroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource BorderBrush}"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Foreground" Value="{StaticResource ForegroundBrush}"/>
<Setter Property="FontWeight" Value="Bold" />
<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}">
<Border x:Name="Border" CornerRadius="4" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
<ContentPresenter Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource MouseOverBackgroundBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="{StaticResource MouseDownBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource MouseDownBorderBrush}" />
<Setter Property="Foreground" Value="{StaticResource MouseDownForegroundBrush}" />
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<TextBlock Text="Posts Processed:" HorizontalAlignment="Right" Height="16" VerticalAlignment="Top" Margin="13,0,0,0" />
<TextBlock Grid.Column="1" Name="tbPostsProcessed" Margin="3,0,13,0" Text="{Binding PostsProcessed}" HorizontalAlignment="Left"/>
Edit:
I've also just discovered the MouseOver trigger seems to work everywhere to the right of the X (button content). Very strange. IsPressed also seems to only work on the same pixels that MouseOver works on.

WPF Effects on Button Text

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>

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.

Checkbox template in WPF

I encountered a situation in the application i was developing. I want to write a template for a checkbox where i should be able to disable only the tick mark box and keep the label enabled. Is this really possible. I came up with a template, but when i disable the checkbox both the label and the tick mark get disabled.
just have a look at this xaml
<Window x:Class="WpfApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" >
<Window.Resources>
<Style x:Key="CheckBoxFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Border>
<Rectangle Margin="15,0,0,0" Stroke="#60000000" StrokeThickness="1" StrokeDashArray="1 2"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- PressedBrush is used for Pressed in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="PressedBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#BBB" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="0.1"/>
<GradientStop Color="#EEE" Offset="0.9"/>
<GradientStop Color="#FFF" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="PressedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#444" Offset="0.0"/>
<GradientStop Color="#888" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- Simple CheckBox -->
<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="FocusVisualStyle" Value="{DynamicResource CheckBoxFocusVisual}"/>
<Setter Property="Background" Value="{DynamicResource NormalBrush}"/>
<Setter Property="BorderBrush" Value="{DynamicResource NormalBorderBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CheckBox}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<!-- BulletDecorator is used to provide baseline alignment between the checkmark and the Content -->
<BulletDecorator x:Name="test" Grid.Column="0">
<BulletDecorator.Bullet>
<Grid Width="13" Height="13">
<Border x:Name="Border"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<Path x:Name="CheckMark" Stroke="{DynamicResource GlyphBrush}"
StrokeThickness="2"
SnapsToDevicePixels="False" Data="M 0 0 L 13 13 M 0 13 L 13 0"/>
</Grid>
</BulletDecorator.Bullet>
</BulletDecorator>
<ContentPresenter Grid.Column="1"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"/>
</Grid>
<!-- This uses Visibility to hide and show the CheckMark on IsChecked -->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Visibility" Value="Collapsed" TargetName="CheckMark"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{DynamicResource MouseOverBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background" Value="{DynamicResource PressedBrush}" TargetName="Border"/>
<Setter Property="BorderBrush" Value="{DynamicResource PressedBorderBrush}" TargetName="Border"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background" Value="gray" TargetName="Border"/>
<Setter Property="BorderBrush" Value="black" TargetName="Border"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<CheckBox HorizontalAlignment="Left"
Margin="0,5,0,0" Style="{DynamicResource CheckBoxStyle1}"
VerticalAlignment="Top" Width="182" Height="17"
Content="Disabled" IsEnabled="False" IsChecked="True" />
<CheckBox HorizontalAlignment="Left"
Margin="125,5,0,0" Style="{DynamicResource CheckBoxStyle1}"
VerticalAlignment="Top" Width="182" Height="17"
Content="Active" IsEnabled="true" />
</Grid>
I had the same problem and came up with a quite stupid solution:
<StackPanel Orientation="Vertical" >
<TextBlock Text="Set Global Edition" TextWrapping="Wrap" HorizontalAlignment="Center" />
<CheckBox x:Name="GlobalEdition" IsChecked="{Binding IsGlobal}" HorizontalAlignment="Center" />
</StackPanel>
Since the TextBlock & Checkbox are separated, changing the Checkbox state won't influence the text attached to it.
(If I remember well, a Textbox does not change its appearance if disabled, maybe you could try with a TextBox instead of a label)

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>

Resources