I've got a MainResources.xaml file in which I have a style that defines how each of my windows in my application look:
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background" Value="WhiteSmoke" />
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
Instead of "WhiteSmoke" I want my background to be this gradient:
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
But the following attempt causes VS2008 to tell me "Style setters do not support child elements":
<Style x:Key="MainBorderStyle" TargetType="{x:Type Border}">
<Setter Property="Background">
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
</Setter>
<Setter Property="BorderBrush" Value="LightGray" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="CornerRadius" Value="5" />
<Setter Property="SnapsToDevicePixels" Value="True" />
</Style>
What is the correct way to put a gradient color as the background for this style?
You are missing the <Setter.Value>
<Style ...>
<Setter Property="...">
<Setter.Value>
<LinearGradientBrush />
</Setter.Value>
</Setter>
</Style>
Related
Trigger is not working. IsMouseOver is not changing style of the Button. I am not sure what is wrong with my code. I am trying to change the style property of the button on mouse over property. It keeps throwing error.
Basically I am trying to use different style on mouse over event
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Style" Value="{StaticResource ResourceKey=FancyButtonInvertStyle}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="FancyButtonInvertStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
Instead of trying to change the Style in the Trigger, change the Background directly in it. Keeps you also from repeating the Style completely over again.
<Style x:Key="FancyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="FontSize" Value="{Binding FontSize}"/>
<Setter Property="Foreground" Value="{Binding Foreground}"/>
<Setter Property="FontWeight" Value="{Binding FontWeight}"/>
<Setter Property="Width" Value="{Binding Width}"/>
<Setter Property="Height" Value="{Binding Height}"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="White" />
<GradientStop Offset="0.2" Color="DarkGray" />
<GradientStop Offset="0.6" Color="Black" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0.0" Color="Black" />
<GradientStop Offset="0.4" Color="DarkGray" />
<GradientStop Offset="0.6" Color="White" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
I'm not sure if you even can change the Style of itself in the Trigger the way you intend to, because it is not set via a Setter Tag in the target control itself.
I have a TabControl Template and style, but i am having some issues with the clickable are in the tabs.
You will notice that my tab (Border below) has a width and height specified, but unfortunately, the entire border is not clickable, it is only the text inside it, so if i have one letter in the tab, you have to point your mouse exactly on the letter to select the tab.
How can i make it that if you click anywhere on inside the border it selects the tab?
Here is my ControlTemplate:
<Style x:Key="MainTabItem" TargetType="TabItem">
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem">
<Border Name="Border" BorderThickness="1,1,1,0" BorderBrush="#EAF1F7" CornerRadius="3,3,0,0" Height="60" Width="70" Margin="-2,0,2,0">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EDF1FA" Offset="0"/>
<GradientStop Color="#EAF1F7" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter TargetName="Border" Property="BorderThickness" Value="0" />
<Setter TargetName="Border" Property="BorderThickness" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MainTabControl" TargetType="TabControl">
<Setter Property="BorderThickness" Value="2"></Setter>
<Setter Property="BorderBrush" Value="#CFE2F0"></Setter>
<Setter Property="Background" Value="#EAF1F7"/>
<Setter Property="BorderBrush" Value="#EAF1F7"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Direction="150" BlurRadius="20" ShadowDepth="5" Opacity=".3"/>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="#EAF1F7" />
<GradientStop Offset=".2" Color="#EAF1F7" />
<GradientStop Offset=".6" Color="#C7D7E4" />
<GradientStop Offset="1" Color="#EAF1F7" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
To the border add Background="Transparent".
The reason is that default value for background is null, and pixels with 'null' value are not hit test visible. Transparent pixels are hit test visible (and that's the main reason why 'null' and 'Transparent' exist together).
I want to bind the gradient property to the button. I am using below code. I am able to bind the style. Can you suggest how should i bind the linergradientbrush property??
<Window.Resources>
<ResourceDictionary>
<LinearGradientBrush x:Key="buttonStyleGradient" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0" />
<GradientStop Color="#FFACC3F5" Offset="1" />
</LinearGradientBrush>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
</Style>
</ResourceDictionary>
</Window.Resources><Button Style="{StaticResource buttonStyle}" >
<Label>Home</Label>
</Button>
Just add the buttonStyleGradient to the buttonStyle as a Background Property:
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="FontFamily" Value="Vrinda"/>
<Setter Property="FontSize" Value="24"/>
<Setter Property="Padding" Value="8,4" />
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}" />
</Style>
And if you don't want to add it to the style, you can manually put in on the button like this:
<Button Style="{StaticResource buttonStyle}" Background="{StaticResource buttonStyleGradient}" >
You need a property to apply the gradient to, try Background:
<Setter Property="Background" Value="{StaticResource buttonStyleGradient}"/>
How can i display custom sort direction image in wpf datagrid header?
I use this style in my datagrid. How can I add images for ascending and descending sort directions?
<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#fbfdfc" Offset="0.1" />
<GradientStop Color="#d4d5d9" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="Padding" Value="3"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="SortDirection" Value="{x:Null}" />
</MultiTrigger.Conditions>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#ffd8a8" Offset="0.0" />
<GradientStop Color="#ffad41" Offset="0.5" />
<GradientStop Color="#fedf78" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush" Value="Black" />
</MultiTrigger>
</Style.Triggers>
</Style>
If you want to change the triangles you need to override the Template, you can trigger on the SortDirection and display a different image accordingly. (Get the default templates from MSDN (Default WPF Themes link))
I have the following style defined in my Resource Dictionary:
<!-- ListViewItem Styles-->
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
<!-- /ListViewItem Styles-->
When i was using windows XP the behavior that I was getting was my gradients were used for the Hightlight and the selection. Now i have switched over to using Windows 7 and it seems like the gradients are no longer used the highlight/selection colors are now the light blue of the VS look.
Any suggestions on why this would be happening and how do I fix this in such a way that it works the same on Windows XP and Windows 7 (we have a multiplatform environment)
Thank you.
Full Solution after comments
<LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="{x:Static SystemColors.ControlBrushKey}" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#F7D073" Offset="0"/>
<GradientStop Color="#F1A62F" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x:Key="MouseOverBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="#E4F0FD" Offset="0"/>
<GradientStop Color="#D7EAFD" Offset="1"/>
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataForeground, Converter={StaticResource ColorToBrushConverter}}" />
<Setter Property="Padding" Value="1,0,1,0" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource MouseOverBrush}" />
<Setter Property="BorderBrush" Value="#C6E1FC" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</Trigger>
<!-- This part of the triger is for when Windows Aero theme is turned on Win Vista/7-->
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}, Path=IsSelected}" Value="True" />
<Condition Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListView}, Path=IsKeyboardFocusWithin}" Value="False" />
</MultiDataTrigger.Conditions>
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="Black" />
<Setter Property="BorderBrush" Value="#909090" />
<Setter Property="BorderThickness" Value="1" />
</MultiDataTrigger>
</Style.Triggers>
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="2"/>
</Style>
</Style.Resources>
</Style>
The default Style on Aero is a bit different then the Luna themes. In Aero, there is a trigger like so in the default Style:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" Value="{StaticResource ListItemSelectedFill}"/>
<!-- ... -->
</Trigger>
While on Luna, it looks like:
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Bd" Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>
So you can see the default Style for Aero, doesn't use the HighlightBrushKey at all. This is mostly because those brushes are based on a single solid color. But the Aero theme has a lot of gradients, which can't be represented by the old style colors.
You would need to set the Background property as well to apply it on Aero, like so:
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<!-- ... -->
</Trigger>