code show as below：
This is part of my custom datagrid appearance.
<Style x:Key="DatagridStyle_1" TargetType="DataGrid">
<!--<Setter Property="ColumnHeaderStyle" Value="{DynamicResource Datagrid_HearderStyle_1}"/>
<Setter Property="CellStyle" Value="{DynamicResource Datagrid_CellStyle_1}"/>-->
<Setter Property="RowStyle" Value="{DynamicResource ConTemplate_DgRow_1}"/>
<Setter Property="GridLinesVisibility" Value="None" />
<Setter Property="AlternationCount" Value="2"/>
<!--<Setter Property="Template" Value="{DynamicResource DataGridTemplate1211}"/>-->
<Style x:Key="ConTemplate_DgRow_1" TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridRow">
<Grid SnapsToDevicePixels="True" Background="Transparent">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1"
>
</Border>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
/>
</Grid>
<!--<Border BorderThickness="1" Background="LightGreen" SnapsToDevicePixels="True">
<DataGridCellsPresenter Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}"/>
</Border>-->
<ControlTemplate.Triggers>
<!--<Trigger Property="IsSelected" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>-->
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="BorderBrush" Value="#00BCD4"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="0">
<Setter Property="Background" Value="DarkBlue"/>
<Setter Property="Foreground" Value="LightGreen"/>
</Trigger>
</Style.Triggers>
</Style>
this part doesn't work,but the other part
<Setter Property="Foreground" Value="LightGreen"/> works fine
In the above code, I set the AlternationIndex trigger in the penultimate part of the code. In the same trigger, the Foreground property has already taken effect, but the Background property has never taken effect. I have modified the cell template and datagrid template before, and set their background color to transparent, but it has no effect.
I'd like to understand why this is the case and how to make setting the background color work.
XAML:
<RadioButton Margin="15" Grid.Row="0" Grid.Column="3" Style=" {StaticResource SpeedButtonStyle}" Content="TEST"/>
Style:
<!-- Speed Button Style -->
<Style x:Key="SpeedButtonStyle" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource {x:Type ToggleButton}}">
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgInactive}"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="30"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="{StaticResource SidePanelButtonBgActive}"/>
<Setter Property="Foreground" Value="{StaticResource SidePanelButtonFgActive}"/>
</Trigger>
</Style.Triggers>
</Style>
I am trying to change the size of the border on my radio button which is styled like a toggle button. I can change the colour of the border but not the size. it seems to be using the default size which is realy thin.
I'm using my templated ToggleRadioButton and you can achieve it by binding BorderThickness to its templated parent.
<Style TargetType="RadioButton" x:Key="SpeedButtonStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<ControlTemplate.Resources>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ControlTemplate.Resources>
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
Foreground="{TemplateBinding Foreground}"
Background="{TemplateBinding Background}">
</ToggleButton>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="18px"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
<Setter Property="Foreground" Value="DarkRed"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="BorderThickness" Value="5"/>
<Setter Property="BorderBrush" Value="White" />
<Setter Property="Background" Value="Green"/>
<Setter Property="Foreground" Value="LightSeaGreen"/>
</Trigger>
</Style.Triggers>
</Style>
EDIT:
I think you had completely different problem. Trigger on IsMouseOver or IsChecked doesn't get rid of default Windows hover colours. So you have to get rid of that, which is achieved but templating ToggleButton with a Border on top of templating your RadioButton with that styled ToggleButton. Note that if you would want to modify it more, you have to bind it's properties in the Border as well in ToggleButton. Difference between TemplateBinding and Binding on TemplatedParent is here and furthermore TemplateBinding is only One Way, so IsChecked should be on TemplatedParent.
This should work now (at least for me it did in new project), just replace the colours.
I want to create buttons which have a image and a text included and get a nice shadowing. Particularly, I want the image and label have a light grey shadowing, but when moving the mouse over the button I'd like a kind of blue shadowing. Moving away sets it back to light grey. I would need some help as I just can't figure out how to achive it (I'm new to WPF).
The Buttons looks like ...
<Button>
<Button.Content>
<StackPanel Orientation="Vertical">
<Image Source="Images/preferences-system.png" />
<Label HorizontalAlignment="Center">Settings</Label>
</StackPanel>
</Button.Content>
</Button>
The Canvas goes ...
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Image}">
<Style.Setters>
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
<Setter Property="Effect" Value="{StaticResource dropLightShadow}" />
</Style.Setters>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</Canvas.Resources>
What I get is a light grey shadowing on image and labels on begin. Moving the mouse over the button the grey and light blue get mixed. When moving further on the image it gets the light blue only. The same goes for the label.
How can I achive switching the shadowning to light blue when I mouse over the button and not the image and label itself? Anyone an idea or an completly other approach?
Apply the LightGray Effect to the ContentPresenter. Then on the IsMouseOver Trigger, set the Effect property of the ContentPresenter to the blue Effect.
NOTE: Accomplish this by setting the x:Name attribute of the ContentPresenter, then accessing the ContentPresenter by name via the Setter using TargetName.
NOTE: Remove the various other Effect settings in the styles of the child elements. Applying the Effect to the ContentPresenter causes the child elements to inherit the Effect.
<Canvas DockPanel.Dock="Left" Background="#FF349EBC">
<Canvas.Resources>
<DropShadowEffect x:Key="dropMouseOverShadow" Color="#FFD9EDF3" Opacity="80" Direction="270" />
<DropShadowEffect x:Key="dropLightShadow" Color="LightGrey" Opacity="10" Direction="270" BlurRadius="20" />
<Style TargetType="{x:Type Button}">
<Style.Setters>
<Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{x:Null}" />
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Background="{TemplateBinding Background}" CornerRadius="2">
<ContentPresenter x:Name="cp" Effect="{StaticResource dropLightShadow}"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="cp" Property="Effect" Value="{StaticResource dropMouseOverShadow}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style.Setters>
</Style>
<Style TargetType="{x:Type Label}">
<Style.Setters>
<Setter Property="FontSize" Value="18" />
<Setter Property="FontWeight" Value="Normal" />
<Setter Property="FontFamily" Value="Gill Sans MT" />
</Style.Setters>
</Style>
I'm trying to disable the MouseOver effect on buttons, or at least change the colour of it, in WPF.
I'm using the following style:
<Style x:Key="Borderless" TargetType="{x:Type Button}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Button Background="{TemplateBinding Control.Background}"
Focusable="False">
<ContentPresenter
Margin="{TemplateBinding Control.Padding}"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding Control.VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentControl.ContentTemplate}"
RecognizesAccessKey="True"
Content="{TemplateBinding ContentControl.Content}" />
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
in Window.Resources, which I thought would override all the default behaviours. But it doesn't.
Any suggestions?
Look what your control template boils down to:
<ControlTemplate TargetType="{x:Type Button}">
<Button>
<ContentPresenter/>
</Button>
</ControlTemplate>
You're saying, "I want to replace the look of my button with... a button." The usage of the ControlTemplate is to replace the visual tree of a control. So you are replacing the visual tree of the existing button with another button. If you want to start a button from scratch, try using the SimpleStyles button:
<Style TargetType="{x:Type Button}">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="MinHeight" Value="23"/>
<Setter Property="MinWidth" Value="75"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border Name="Border" CornerRadius="2" BorderThickness="1"
Background="#C0C0C0"
BorderBrush="#404040">
<ContentPresenter Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter TargetName="Border"
Property="BorderBrush" Value="#202020" />
</Trigger>
<Trigger Property="IsDefaulted" Value="true">
<Setter TargetName="Border"
Property="BorderBrush" Value="#202020" />
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="Border"
Property="Background" Value="#808080" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border"
Property="Background" Value="#E0E0E0" />
<Setter TargetName="Border"
Property="BorderBrush" Value="#606060" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Border"
Property="Background" Value="#EEEEEE" />
<Setter TargetName="Border"
Property="BorderBrush" Value="#AAAAAA" />
<Setter Property="Foreground" Value="#888888"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice that this template creates a button the simplest possible way: a border that contains the button content. It does not use another button embedded inside the template.
I'm attempting to build some simple custom styles for the WPF Toolkit DataGrid control.
I have a style for the overall DataGrid and a style for the DataGridColumnHeader. I am not setting any control templates, only basic properties.
Here is what my sample DataGrid looks like with my custom styling applied:
alt text http://img86.imageshack.us/img86/43/datagridcustomstyle.jpg
The header has the gradient blue background, bold text, padding, etc. I want, but two things have disappeared: the separators between the column headers and the sort arrow for the ID column (this column currently has a descending sort on it).
Why would the separators and sort arrow disappear if I have not messed with any control templates?
I even tried explicitly setting the SeparatorBrush to Black and the SeparatorVisibility to Visible, but this had no effect.
Here is what my sample DataGrid looks like if I revert back to the default styling:
alt text http://img42.imageshack.us/img42/6533/datagriddefaultstyle.jpg
The separators and sort arrow are back, so it is definitely my style that is making the difference.
Here is my custom DataGridColumnHeader style
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="Black" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
</Style>
Here is my custom DataGrid style
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="White" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
</Style>
Here is the markup for my sample DataGrid
<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=#Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=#Name}"
Header="Name" />
<wt:DataGridTextColumn
Binding="{Binding XPath=#IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
Binding="{Binding XPath=#IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>
Is this a bug?
If not, can you please advise me on how to modify my styles so that I don't lose the separator lines and sort arrow?
Edit
I tried adding BasedOn attributes per #Aran's suggestion (below), but this didn't seem to have any effect. Anyone have any other thoughts?
Thanks to #Aran's answer as well as a couple posts I found in Codeplex Discussions (see http://wpf.codeplex.com/Thread/View.aspx?ThreadId=65069), I managed to come up with a set of styles that allows the background of the header row to be set without giving up functionality (sort arrows, separators, etc.).
The one exception to this is the "cell selection" feature. DataGrid has a SelectionUnit property, which can be set to Cell, FullRow, or CellOrRowHeader, but it doesn't seem to work. If I set it to FullRow (which is supposed to only select the whole row no matter where you click on that row), it still visually selects individual cells when you click on them. The image below shows an example of a DataGrid (with no styling applied) where SelectionUnit="FullRow". As you can see, it sure looks like there is a cell selected (the G row of the Name column). Since I don't currently need cell selection, I designed my styles to suppress this dark black border that appears around the cell when it's clicked.
alt text http://img80.imageshack.us/img80/4757/datagriddefaultcellsele.jpg
Here is an example of a styled DataGrid sorted descending by ID. As you can see, the down arrow appears next to the ID label, and the column is appropriately auto-sized to make room for the sort arrow.
alt text http://img377.imageshack.us/img377/3836/datagridcustomfixed.jpg
Here is another example of a styled DataGrid. This one is sorted ascending by "Saved?". Notice that the heading is centered, yet it still leaves enough room on either side for the sort arrow.
alt text http://img203.imageshack.us/img203/5140/datagridcustomfixed2.jpg
Here are the styles necessary to achieve this look.
Brushes
There are a number of brush settings in these styles, all of the form Property="{StaticResource Media_...}". I'm going to leave out the definitions for now because it would take me some time to compile them all, but if anyone is interested in duplicating the exact colors I used, leave a comment.
Sort Arrow Style
(the arrows themselves are contained in the Column Header Style)
<Style
x:Key="DataGrid_ArrowStyle"
TargetType="Polygon">
<Setter
Property="Grid.Column"
Value="1" />
<Setter
Property="HorizontalAlignment"
Value="Right" />
<Setter
Property="VerticalAlignment"
Value="Bottom" />
<Setter
Property="StrokeThickness"
Value="1" />
<Setter
Property="Stroke"
Value="{StaticResource Media_BrightGraphicBorderBrush}" />
<Setter
Property="Fill"
Value="{StaticResource Media_BrightGraphicBackgroundBrush}" />
<Setter
Property="Visibility"
Value="Hidden" />
</Style>
Column Header Thumb Style
(the thumbs themselves are contained in the Column Header Style)
<Style
x:Key="DataGrid_ColumnHeaderThumbStyle"
TargetType="Thumb">
<Setter
Property="Width"
Value="8" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedSeparatorBackgroundBrush}" />
<Setter
Property="Cursor"
Value="SizeWE" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="Thumb">
<Border
Padding="{TemplateBinding Padding}"
Background="Transparent">
<Border
Padding="0,2,0,2">
<Rectangle
HorizontalAlignment="Center"
Width="2"
Fill="{TemplateBinding Background}" />
</Border>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Column Header Style
(refers to the Sort Arrow Style and the Column Header Thumb Style defined above)
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader">
<Setter
Property="Padding"
Value="5,2,3,3" />
<Setter
Property="HorizontalContentAlignment"
Value="Stretch" />
<Setter
Property="VerticalContentAlignment"
Value="Stretch" />
<Setter
Property="FontWeight"
Value="Bold" />
<Setter
Property="BorderBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="Background"
Value="{StaticResource Media_RaisedBackgroundBrush}" />
<Setter
Property="Foreground"
Value="{StaticResource Media_RaisedForegroundBrush}" />
<Setter
Property="SeparatorBrush"
Value="{StaticResource Media_RaisedBorderBrush}" />
<Setter
Property="SeparatorVisibility"
Value="Visible" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridColumnHeader">
<Grid>
<wt:DataGridHeaderBorder
Name="HeaderBorder"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
SortDirection="{TemplateBinding SortDirection}"
IsClickable="{TemplateBinding CanUserSort}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="12" />
</Grid.ColumnDefinitions>
<ContentPresenter
Name="HeaderContent"
Grid.Column="0"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}" />
<Polygon
Name="UpArrow"
Style="{StaticResource DataGrid_ArrowStyle}"
Margin="0,0,0,2"
Points="0,0 8,0 4,-6 0,0" />
<Polygon
Name="DownArrow"
Margin="0,0,0,1"
Style="{StaticResource DataGrid_ArrowStyle}"
Points="0,0 8,0 4,5 0,0" />
</Grid>
</wt:DataGridHeaderBorder>
<Thumb
x:Name="PART_LeftHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="-4,0,0,0"
HorizontalAlignment="Left" />
<Thumb
x:Name="PART_RightHeaderGripper"
Style="{StaticResource DataGrid_ColumnHeaderThumbStyle}"
Margin="0,0,-4,0"
HorizontalAlignment="Right"></Thumb>
</Grid>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsMouseOver"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_MousedOverForegroundBrush}" />
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="CanUserSort"
Value="True" />
<Condition
Property="IsPressed"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderBorder"
Property="BorderBrush"
Value="{StaticResource Media_PressedBorderBrush}" />
<Setter
TargetName="HeaderBorder"
Property="Background"
Value="{StaticResource Media_PressedBackgroundBrush}" />
<Setter
TargetName="HeaderBorder"
Property="TextBlock.Foreground"
Value="{StaticResource Media_PressedForegroundBrush}" />
</MultiTrigger>
<Trigger
Property="SortDirection"
Value="Ascending">
<Setter
TargetName="UpArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="SortDirection"
Value="Descending">
<Setter
TargetName="DownArrow"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger
Property="CanUserSort"
Value="False">
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition
Property="HorizontalContentAlignment"
Value="Center" />
<Condition
Property="CanUserSort"
Value="True" />
</MultiTrigger.Conditions>
<Setter
TargetName="HeaderContent"
Property="Grid.ColumnSpan"
Value="2" />
<Setter
TargetName="HeaderContent"
Property="Margin"
Value="12,0,12,0" />
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Centered Column Header Style
(use this to center a header; will automatically make room for a sort arrow if the column is sortable)
<Style
x:Key="DataGrid_CenteredColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>
Wrapping Column Header Style
(use this to allow the text for a header to word-wrap--only works if you set the width manually or the user manually shrinks the column)
<Style
x:Key="DataGrid_WrappingColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource DataGrid_ColumnHeaderStyle}">
<Setter
Property="VerticalContentAlignment"
Value="Top" />
<Setter
Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock
TextWrapping="WrapWithOverflow"
Text="{TemplateBinding Content}" />
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Cell Style
<Style
x:Key="DataGrid_CellStyle"
TargetType="wt:DataGridCell">
<Setter
Property="Padding"
Value="5,2,5,2" />
<Setter
Property="BorderThickness"
Value="1" />
<Setter
Property="BorderBrush"
Value="Transparent" />
<Setter
Property="Background"
Value="Transparent" />
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="wt:DataGridCell">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ContentPresenter
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger
Property="IsSelected"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
</Trigger>
<Trigger
Property="IsKeyboardFocusWithin"
Value="True">
<Setter
Property="BorderBrush"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter
Property="Foreground"
Value="Black" />
<!--<Setter
Property="BorderBrush"
Value="{DynamicResource {ComponentResourceKey ResourceId=FocusBorderBrushKey, TypeInTargetAssembly=wt:DataGrid}}" />-->
</Trigger>
</Style.Triggers>
</Style>
Centered Cell Style
(use this to center the contents of a cell)
<Style
x:Key="DataGrid_CenteredCellStyle"
TargetType="wt:DataGridCell"
BasedOn="{StaticResource DataGrid_CellStyle}">
<Setter
Property="HorizontalContentAlignment"
Value="Center" />
</Style>
Data Grid Style
(establishes a set of default values for a number of properties, including the Column Header Style and Cell Style, which are defined above)
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid">
<Setter
Property="ColumnHeaderStyle"
Value="{StaticResource DataGrid_ColumnHeaderStyle}" />
<Setter
Property="CellStyle"
Value="{StaticResource DataGrid_CellStyle}" />
<Setter
Property="RowBackground"
Value="{StaticResource Media_OddRowBackgroundBrush}" />
<Setter
Property="AlternatingRowBackground"
Value="{StaticResource Media_EvenRowBackgroundBrush}" />
<Setter
Property="HorizontalGridLinesBrush"
Value="LightGray" />
<Setter
Property="VerticalGridLinesBrush"
Value="LightGray" />
<Setter
Property="SelectionMode"
Value="Single" />
<Setter
Property="SelectionUnit"
Value="FullRow" />
<Setter
Property="AutoGenerateColumns"
Value="False" />
<Setter
Property="CanUserAddRows"
Value="False" />
<Setter
Property="CanUserDeleteRows"
Value="False" />
<Setter
Property="CanUserReorderColumns"
Value="True" />
<Setter
Property="CanUserResizeColumns"
Value="True" />
<Setter
Property="CanUserResizeRows"
Value="False" />
<Setter
Property="CanUserSortColumns"
Value="True" />
<Setter
Property="IsReadOnly"
Value="True" />
<Setter
Property="HeadersVisibility"
Value="Column" />
</Style>
Example DataGrid using these styles
(note: requires backing data--an XML file--to work)
<wt:DataGrid
Style="{StaticResource DataGrid_Style}"
Margin="0,5,0,0"
ItemsSource="{Binding Source={StaticResource Main_ContactData}, XPath=//Contacts/*}">
<wt:DataGrid.Columns>
<wt:DataGridTextColumn
Binding="{Binding XPath=#Letter}"
Header="ID" />
<wt:DataGridTextColumn
Binding="{Binding XPath=#Name}"
Header="Name" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=#IsSaved}"
Header="Saved?" />
<wt:DataGridTextColumn
HeaderStyle="{StaticResource DataGrid_CenteredColumnHeaderStyle}"
CellStyle="{StaticResource DataGrid_CenteredCellStyle}"
Binding="{Binding XPath=#IsBackedUp}"
Header="Backed Up?" />
</wt:DataGrid.Columns>
</wt:DataGrid>
try putting
<Style
x:Key="DataGrid_Style"
TargetType="wt:DataGrid"
BasedOn="{StaticResource {x:Type wt:DataGrid}}">
to base your style on the current datagrid one, and the same for the headers
<Style
x:Key="DataGrid_ColumnHeaderStyle"
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource {x:Type wt:DataGridColumnHeader}}">
scratch the above - i pulled your style down to the offending element
<Style
TargetType="wt:DataGridColumnHeader"
BasedOn="{StaticResource {x:Type wt:DataGridColumnHeader}}">
<Setter
Property="Background"
Value="Blue" />
</Style>
if you set the background (or the border brush ) you're screwed.
I found this link on code project, to back this up -
"The style of the column header can easily be modified via the ColumnHeaderStyle of the DataGrid. However, if you modify the background colour of the column header, you will find that the sort arrows disappear! This is because the arrows are not part of the ColumnHeader template; instead, they are added programmatically."
he has a style that re-adds the sort indicators.
i have had a look at the code for DataGridHeaderBorder (which is the border of the datagridrowheader) which does not have its own control template, it simply derives from border. As well as the seperators being added programatically (the separators are just rectangles see line 1199 of DataGridHeaderBorder.cs) the sort indicators are. the brief look at the code that i had would suggest they should still get drawn but they dont, a step thru of the code is in order.
The solution is to override the control template i think, and add them yourself, the link on code project will get you started.