I have a Style defined for my DataGridCell
<Style x:Key="MYDGCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template" Value="{DynamicResource MYDGCellControlTemplate}" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=IsReadOnly}" Value="True">
<Setter Property="Background">
<Setter.Value>
<SolidColorBrush Color="Gray" Opacity="0.3" />
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid x:Name="CellGrid">
<Border Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Transparent" />
<GradientStop Offset="0.8" Color="Transparent" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
During Runtime I add additional Triggers for specific Columns like this in my Code
Style Sty = null;
if (Sty == null)
{
Sty = new Style(typeof(DataGridCell));
Sty.BasedOn = (Style)Application.Current.TryFindResource("MYDGCellStyle");
}
DataTrigger t = new DataTrigger();
t.Binding = new Binding("ProductionStatus");
t.Value = "I";
Setter s = new Setter();
s.Property = DataGridCell.BackgroundProperty;
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
t.Setters.Add(s);
Sty.Triggers.Add(t);
DGC.CellStyle = Sty;
But if I focus one of the Cells where a DataTrigger I added in my Code is triggerd the Color isn't displayed correctly.
How can I display the fuchsia Sides in front of the Gold Background?
Grey Cell Focused:
Gold Cell Focused:
UPDATE
<ControlTemplate x:Key="MYDGCellControlTemplate" TargetType="{x:Type DataGridCell}">
<Grid>
<Grid Grid.ZIndex="99" x:Name="CellGrid"/>
<Border Grid.ZIndex="98" Background="{TemplateBinding Background}">
<ContentPresenter VerticalAlignment="Center" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.1" Color="#00FF00FF" />
<GradientStop Offset="0.9" Color="#00FF00FF" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
Your problem might be, that you apply a golden color brush above the fuchsia edges, so they get tinted by 50% of gold.
s.Value = new SolidColorBrush(Colors.Gold) { Opacity = 0.5 };
Additionally you should be aware that using Transparent in XAML means "white with no opacity", so if you want to fade out funchsia you should not fade to transparent white, but to transparent fuchsia instead.
White: #FFFFFFFF
Transparent: #00FFFFFF
Fuchsia opaque: #FFFF00FF
Fuchsia transparent: #00FF00FF
To enforce the z-order you could use an additional container around the item given and apply the status here "during runtime". Anyway this will not be an MVVM approach.
The better way might be to define a custom template-parameter (bool IsSpecificColumn) in your XAML, which will be set in your code "during runtime". Using MultiTrigger you can also define a third state for gold+fuchsia.
If you have to combine even more states you should let WPF do the job and use the approach with the boxed containers mentioned above together with template-parameters.
Try creating a new "IsFocused" trigger in your new style(I ProductionStatus)like this:
<Trigger Property="IsFocused" Value="true">
<Setter Property="Background" TargetName="CellGrid">
<Setter.Value>
<LinearGradientBrush Opacity="2" StartPoint="0,0.5" EndPoint="1,0.5">
<GradientStop Offset="0" Color="Fuchsia" />
<GradientStop Offset="0.2" Color="Gold" />
<GradientStop Offset="0.8" Color="Gold" />
<GradientStop Offset="1" Color="Fuchsia" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
I know you are doing it on code behind, but I think you'll understand me(easyer to copy-paste).
Related
I'm trying to create a template for my buttons that have:
Border corner radius
Background as gradient
Change border color on hover
So far I got here:
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Test" Name="btn01" Style="{StaticResource aimDark}" />
</Grid>
The Problem:
First my Content in the button doesn't appear, in fact there isn't text been render in my button.
And I don't know how to change only the border color in the Hover Event.
In ControlTemplate you should specify ContentPresenter to display the Content of a Button.
<Window.Resources>
<Style TargetType="Button" x:Key="aimDark">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#0e0e0e" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
CornerRadius="4"
BorderBrush="#000000"
BorderThickness="1">
<Border.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Color="#006d23" Offset="0" />
<GradientStop Color="#006d23" Offset="0.05" />
<GradientStop Color="#00c741" Offset="0.45" />
<GradientStop Color="#00c741" Offset="1" />
</LinearGradientBrush>
</Border.Background>
<RenderOptions.EdgeMode>Aliased</RenderOptions.EdgeMode>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
The template that you created does not have a ContentPresenter, and that's required in order to show the content (text or other). I suggest you start from the default Button template and make changes as you need.
You need a ContentPresenter to make the content of the button appear.
Also if you define a name in ControlTemplate>Border you can modify it when a action is trigger like this:
<Style x:Key="mylayout" TargetType="Button">
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Margin" Value="5,5,5,0" />
<Setter Property="Height" Value="20" />
<Setter Property="Foreground" Value="#949494" />
<Setter Property="Background" Value="the_gradient" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="4" BorderBrush="#000000" BorderThickness="1" Background="{TemplateBinding Background}" Name="border">
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" TargetName="border" Value="#e9eceb" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In WPF, I created a rectangle like this:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="clr-namespace:DiagramDesigner"
xmlns:c="clr-namespace:DiagramDesigner.Controls"
x:Class="GeoOvwSample.RectangleGeometryRoundedCornerExample"
>
<Brush x:Key="ItemStroke">#FFD69436</Brush>
<LinearGradientBrush x:Key="ItemBrush" StartPoint="0,0" EndPoint="0,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="#FAFBE9" Offset="0" />
<GradientStop Color="Orange" Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
<Brush x:Key="ItemStroke1">#ACADCD</Brush>
<LinearGradientBrush x:Key="ItemBrush1" StartPoint="0,0" EndPoint="0,1" >
<GradientStop Color="#FEFEFE" Offset="0"/>
<GradientStop Color="#BDBEDE" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="FlowChartRectangleStyle" TargetType="Rectangle">
<Setter Property="Fill" Value="{StaticResource ItemBrush}"/>
<Setter Property="Stroke" Value="{StaticResource ItemStroke}"/>
<Setter Property="StrokeThickness" Value="1"/>
<Setter Property="StrokeLineJoin" Value="Round"/>
<Setter Property="Stretch" Value="Fill"/>
<Setter Property="IsHitTestVisible" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="True"/>
</Style>
<Style x:Key="Data" TargetType="Rectangle" BasedOn="{StaticResource FlowChartRectangleStyle}">
</Style>
<Style x:Key="Data_DragThumb" TargetType="Rectangle" BasedOn="{StaticResource Data}">
<Setter Property="IsHitTestVisible" Value="true"/>
<Setter Property="Height" Value="300"/>
<Setter Property="Width" Value="200"/>
<Setter Property="Tag" Value="DataShape" />
</Style>
<s:Toolbox x:Key="FlowChartStencils" ItemSize="100,90" SnapsToDevicePixels="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ItemsControl.Items>
<Rectangle Style="{StaticResource Data}" ToolTip="DataTest" StrokeThickness="2">
<s:DesignerItem.DragThumbTemplate>
<ControlTemplate>
<Rectangle Style="{StaticResource Data_DragThumb}" x:Name="DataShape" Tag="DataShapeTag" />
</ControlTemplate>
</s:DesignerItem.DragThumbTemplate>
</Rectangle>
</ItemsControl.Items>
</s:Toolbox>
</ResourceDictionary>
This displays a rectangle on the panel, and I can select and drag it in my GUI. Now I want to create a kind of textblock on the shape so that it displays its tooltip value, and thus the tooltip value appears together with the shape all together. I tried to create the textblock and bind it with the rectangle shape but somehow my code is not correct. How to do it? Or is there a simpler method? Thank you.
You can simply add the TextBlock into any container control with (but after) the Rectangle element and then data bind the value of the Rectangle.ToolTip to the TextBlock.Text property. Try something like this:
<StackPanel>
<Rectangle Name="Rectangle" Style="{StaticResource Data}" ToolTip="DataTest"
StrokeThickness="2" />
<TextBlock Text="{Binding ToolTip, ElementName=Rectangle}" />
</StackPanel>
I have this style for a button:
<Style x:Key="ButtonStyle1" TargetType="{x:Type local:ButtonExt}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ButtonExt}">
<Grid Name="grid" Margin="0,0,0,0">
<Rectangle Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="1" Color="{DynamicResource button_background_gradient1}" />
<GradientStop Offset="0" Color="#FF004F96" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Effect>
<DropShadowEffect BlurRadius="3" Opacity="0.4" ShadowDepth="6" />
</Rectangle.Effect>
</Rectangle>
<Rectangle Width="0.7" Margin="0,0,43,1" HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="#FF434343">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
<GradientStop Offset="0" Color="#FFF7F7F7" />
<GradientStop Offset="1" Color="#FFD6D6D6" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True" />
<Trigger Property="IsDefaulted" Value="True" />
<Trigger Property="Button.IsPressed" Value="True">
<Setter TargetName="grid" Property="Margin" Value="2,2,-1,-1" />
<Setter TargetName="rectangle" Property="Effect" Value="{x:Null}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True" />
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and another style based on this style:
<Style x:Key="ButtonStyle2" BasedOn="{StaticResource ButtonStyle1}">
<Setter Property="Rectangle.Fill">
<Setter.Value>
In the first style, I have two rectangles. In the second style, which is based on style 1, I would like to change the property of just one rectangle (which I named it "rectangle"). How can I do that?
Expose a property for the rectangle's fill in the ButtonEx class.
In the template, use {TemplateBinding} to bind the Fill to this new property.
In the derived style, set a new value to this property.
How to change column header's background color when using WPF datagrid? Need to modify xaml directly?
Use a style with a setter targeted at DataGridColumnHeader:
<DataGrid>
<DataGrid.Resources>
<Style BasedOn="{StaticResource {x:Type DataGridColumnHeader}}" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Background" Value="Blue" />
</Style>
</DataGrid.Resources>
</DataGrid>
Try this:
<windows.Resources>
<LinearGradientBrush x:Key="HeaderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF6B8E95" Offset="0"/>
<GradientStop Color="#FF14A7C1" Offset="1"/>
<GradientStop Color="#FF1E424E" Offset="0.509"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF1D4855" Offset="0.542"/>
<GradientStop Color="#FF193A44" Offset="0.526"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="HeaderBorderBrush" StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#FF1D1D1D" Offset="0.614"/>
<GradientStop Color="#FF007F96" Offset="0.853"/>
<GradientStop Color="#FF0AEAFA" Offset="1"/>
</LinearGradientBrush>
<Style x:Key="HeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="{StaticResource HeaderBrush}" />
<Setter Property="Foreground" Value="White" />
<Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
<Setter Property="BorderThickness" Value="0" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="30" />
<Setter Property="Cursor" Value="Hand" />
</Style>
</Windows.Resources>
<Grid>
<DataGrid Name="dataGrid1" ColumnHeaderStyle="{StaticResource HeaderStyle}"/>
</Grid>
This is the result:
<DataGridTextColumn Header="ID">
<DataGridTextColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Green"/>
</Style>
</DataGridTextColumn.HeaderStyle>
</DataGridTextColumn>
Style style = new Style(typeof(System.Windows.Controls.Primitives
.DataGridColumnHeader));
style.Setters.Add(new Setter(ToolTipService.ToolTipProperty
,"Your tool tip here"));
style.Setters.Add(new Setter { Property = BackgroundProperty, Value
= Brushes.Yellow });
dgExcelSheet.Columns[1].HeaderStyle = style;
I found out that for me, it is not possible to change only background color without loosing other styles (paddig/borders/...)
So i wrote some style which is simillar to original in: aero2.normalcolor.xaml
Style contains mouseover, press and sort effect
Here is result
You can also create your own colors
<!--DATAGRID-->
<LinearGradientBrush x:Key="ThemeDGHeader_Background" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0.42"/>
<GradientStop Color="#FFEAEAEA" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Border" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFF7F8FA" Offset="0"/>
<GradientStop Color="#FFD5D5D5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFDAF4FF" Offset="0.42"/>
<GradientStop Color="#FFACE2F9" Offset="0.6"/>
<GradientStop Color="#FFA1DCF5" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Pressed" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFBCE4F9" Offset="0.42"/>
<GradientStop Color="#FF8CD5F7" Offset="0.6"/>
<GradientStop Color="#FF77C6EE" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="ThemeDGHeader_Sorted" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE7F8FF" Offset="0.42"/>
<GradientStop Color="#FFDEF5FF" Offset="0.6"/>
<GradientStop Color="#FFBCE8FB" Offset="1"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ThemeDGHeader_MouseOverBorder" Color="#FF76C8F0"/>
<SolidColorBrush x:Key="ThemeDGHeader_PressedBorder" Color="#FF7EC2E2"/>
<SolidColorBrush x:Key="ThemeDGHeader_SortedBorder" Color="#FF9DD8F5"/>
<SolidColorBrush x:Key="ThemeDG_Border" Color="#FF688CAF"/>
<!--DATAGRID HEADER-->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="SizeWE"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DCHS">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border x:Name="BR"
BorderThickness="1,0,1,1"
Padding="0,0,2,0"
BorderBrush="{StaticResource ThemeDGHeader_Border}"
Background="{StaticResource ThemeDGHeader_Background}">
<Border x:Name="BRIN"
CornerRadius="1"
Padding="4,4,4,2"
BorderThickness="0,0,0,0"
BorderBrush="{StaticResource ThemeDGHeader_PressedBorder}"
>
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
/>
</Border>
</Border>
<Path x:Name="SortArrow"
HorizontalAlignment="Center" VerticalAlignment="Top"
Width="7" Height="4" Margin="0,1,0,0"
Stretch="Fill"
RenderTransformOrigin="0.5,0.5"
Visibility="Visible"
Data="M0,0 L1,0 0.5,1 z" >
<Path.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0,0">
<GradientStop Color="#FF9DC3D8" Offset="1"/>
<GradientStop Color="#FF7AA8C4" Offset="0.403"/>
<GradientStop Color="#FF4B7085" Offset="0.017"/>
</LinearGradientBrush>
</Path.Fill>
</Path>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="{x:Null}">
<Setter TargetName="SortArrow" Property="Visibility" Value="Collapsed"/>
</Trigger>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Setter.Value>
</Setter>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible"/>
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Sorted}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_SortedBorder}"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="BR" Property="Border.Background" Value="{StaticResource ThemeDGHeader_MouseOver}"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDGHeader_MouseOverBorder}"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="BR" Property="Border.Padding" Value="0,0,0,0"/>
<Setter TargetName="BRIN" Property="Border.Background" Value="{StaticResource ThemeDGHeader_Pressed}" />
<Setter TargetName="BRIN" Property="Border.BorderThickness" Value="1,1,1,0"/>
<Setter TargetName="BR" Property="Border.BorderBrush" Value="{StaticResource ThemeDG_Border}"/>
<Setter TargetName="BR" Property="Border.BorderThickness" Value="1,0,1,0"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Using:
<DataGrid ColumnHeaderStyle="{StaticResource DCHS}"/>
try this
<Style.Triggers >
<Trigger Property="SortDirection" Value="Ascending" >
<Setter Property="Background" Value="{StaticResource SelectedSolidColor}" />
</Trigger>
</Style.Triggers>
</Style>
Just wondering if anyone knows how to change the look of the button on a wpf combobox?
In case you are wondering I just want to change the shape of it and the background.
Thanks.
You can easily modify the ControlTemplate or style of controls using Expression Blend.
Here is one example which will use the Simple Style for the ComboBox and i have modified the Toggle button Color to red.
<LinearGradientBrush x:Key="NormalBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#EEE" Offset="0.0"/>
<GradientStop Color="#CCC" Offset="1.0"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="NormalBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#CCC" Offset="0.0"/>
<GradientStop Color="#444" Offset="1.0"/>
</LinearGradientBrush>
<!-- LightBrush is used for content areas such as Menu, Tab Control background -->
<LinearGradientBrush x:Key="LightBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#EEE" Offset="1.0"/>
</LinearGradientBrush>
<!-- MouseOverBrush is used for MouseOver in Button, Radio Button, CheckBox -->
<LinearGradientBrush x:Key="MouseOverBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF" Offset="0.0"/>
<GradientStop Color="#AAA" Offset="1.0"/>
</LinearGradientBrush>
<!-- 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>
<!-- SelectedBackgroundBrush is used for the Selected item in ListBoxItem, ComboBoxItem-->
<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD"/>
<!-- Disabled Brushes are used for the Disabled look of each control -->
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888"/>
<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE"/>
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA"/>
<!-- Used for background of ScrollViewer, TreeView, ListBox, Expander, TextBox, Tab Control -->
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF"/>
<!-- DefaultedBorderBrush is used to show KeyBoardFocus -->
<LinearGradientBrush x:Key="DefaultedBorderBrush" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#777" Offset="0.0"/>
<GradientStop Color="#000" Offset="1.0"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888"/>
<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA"/>
<SolidColorBrush x:Key="LightColorBrush" Color="#DDD"/>
<!-- Used for Checkmark, Radio button, TreeViewItem, Expander ToggleButton glyphs -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444"/>
<Style x:Key="test" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<!-- The ToggleButton is databound to the ComboBox itself to toggle IsDropDownOpen -->
<ToggleButton Grid.Column="2" Template="{DynamicResource ToggleButtonControlTemplate1}" x:Name="ToggleButton" Focusable="false" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press"/>
<ContentPresenter HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="ContentSite" VerticalAlignment="Center" Content="{TemplateBinding SelectionBoxItem}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}" IsHitTestVisible="False"/>
<!-- The TextBox must be named PART_EditableTextBox or ComboBox will not recognize it -->
<TextBox Visibility="Hidden" Template="{DynamicResource ComboBoxTextBox}" HorizontalAlignment="Left" Margin="3,3,23,3" x:Name="PART_EditableTextBox" Style="{x:Null}" VerticalAlignment="Center" Focusable="True" Background="Transparent" IsReadOnly="{TemplateBinding IsReadOnly}"/>
<!-- The Popup shows the list of items in the ComboBox. IsOpen is databound to IsDropDownOpen which is toggled via the ComboBoxToggleButton -->
<Popup IsOpen="{TemplateBinding IsDropDownOpen}" Placement="Bottom" x:Name="Popup" Focusable="False" AllowsTransparency="True" PopupAnimation="Slide">
<Grid MaxHeight="{TemplateBinding MaxDropDownHeight}" MinWidth="{TemplateBinding ActualWidth}" x:Name="DropDown" SnapsToDevicePixels="True">
<Border x:Name="DropDownBorder" Background="{DynamicResource WindowBackgroundBrush}" BorderBrush="{DynamicResource SolidBorderBrush}" BorderThickness="1"/>
<ScrollViewer Margin="4,6,4,6" Style="{DynamicResource SimpleScrollViewer}" SnapsToDevicePixels="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<!-- The StackPanel is used to display the children by setting IsItemsHost to be True -->
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained"/>
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<!-- This forces the DropDown to have a minimum size if it is empty -->
<Trigger Property="HasItems" Value="false">
<Setter Property="MinHeight" Value="95" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
<Trigger Property="AllowsTransparency" SourceName="Popup" Value="true">
<Setter Property="CornerRadius" Value="4" TargetName="DropDownBorder"/>
<Setter Property="Margin" Value="0,2,0,0" TargetName="DropDownBorder"/>
</Trigger>
<Trigger Property="IsEditable" Value="true">
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Visibility" Value="Visible" TargetName="PART_EditableTextBox"/>
<Setter Property="Visibility" Value="Hidden" TargetName="ContentSite"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="ToggleButtonControlTemplate1" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2" HorizontalAlignment="Stretch" x:Name="Rectangle" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource NormalBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Rectangle Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" RadiusX="5" RadiusY="5" Fill="{DynamicResource WindowBackgroundBrush}" Stroke="{DynamicResource NormalBorderBrush}"/>
<Path Grid.Column="1" HorizontalAlignment="Center" x:Name="Arrow" VerticalAlignment="Center" Fill="Red" Data="M 0 0 L 4 4 L 8 0 Z"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Fill" Value="{DynamicResource MouseOverBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Fill" Value="{DynamicResource PressedBrush}" TargetName="Rectangle"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Fill" Value="{DynamicResource DisabledBackgroundBrush}" TargetName="Rectangle"/>
<Setter Property="Stroke" Value="{DynamicResource DisabledBorderBrush}" TargetName="Rectangle"/>
<Setter Property="Foreground" Value="{DynamicResource DisabledForegroundBrush}"/>
<Setter Property="Fill" Value="{DynamicResource DisabledForegroundBrush}" TargetName="Arrow"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
To change the Shape or background of the Toggle Button in the example you have to modify the ControlsTemplate "ToggleButtonControlTemplate1".
Use control templates for that.