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>
Related
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>
I want to set header of datagrid like following link.
Style in HeaderColumn in Datagrid
I have used DataGridColumnHeadersPresenter in my code.
See my following code:
<Style x:Key="XYZ" TargetType="sdk:DataGridColumnHeadersPresenter" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGridRowGroupHeader">
<Border x:Name="ButtonBorder"
CornerRadius="0,0,0,0"
BorderThickness="0"
BorderBrush="Transparent">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1">
<GradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#555" Offset="0.0"/>
<GradientStop Color="#000" Offset="0.8"/>
</GradientStopCollection>
</GradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<ItemsPresenter/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="BreakGridStyle" TargetType="sdk:Datagird">
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="AutoGenerateColumns" Value="False" />
<Setter Property="Width" Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="sdk:DataGrid">
<Grid>
<StackPanel>
<sdk:DataGridColumnHeadersPresenter Name="ABC" Style="{StaticResource XYZ}" />
<ItemsPresenter/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But i got following Error:
The property 'Template' was not found in type 'System.Windows.Controls.Primitives.DataGridColumnHeadersPresenter'.
How to solve this and how to achieve my datagrid's column style as in above link
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.
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>
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>