I have a listview built and styled the way I want it. Now I am simply trying to add column headers to it, but it seems to be more difficult than I imagined. Is it necessary to add some sort of datagrid to this xaml model to get column headers, or is there just something very basic I can add?
<ListView ItemsSource="{Binding PlayerOC, Mode=TwoWay}" AlternationCount="2">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="_Border"
Padding="0"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="0">
<Setter Property="Background" Value="#19f39611"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="#19000000"></Setter>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="_Border" Property="Background" Value="White"/>
<Setter TargetName="_Border" Property="Padding" Value="1"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="FontWeight" Value="Bold"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Horizontal" Background="{Binding RowColor}" >
<TextBlock Text="{Binding PlayerNumber}" Padding="5" Width="50" />
<TextBlock Text="{Binding PlayerName}" Padding="5" Width="200" />
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This is the usual way of adding columns to the ListView:
<ListView ItemsSource="{Binding Data}" BorderBrush="Gray" BorderThickness="1" Margin="5">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Id}" Header="Id"/>
<GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name"/>
</GridView>
</ListView.View>
</ListView>
Related
So inside ListView.View i have this Style than i am using in order to remove Header borders:
<GridView ColumnHeaderContainerStyle="{StaticResource ListViewHeaderDefaultStyle}">
</GridView>
Style
<Style x:Key="ListViewHeaderDefaultStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border BorderThickness="0,0,0,1" BorderBrush="{DynamicResource GridViewColumnHeaderBorderBrushColor}" Background="Transparent">
<TextBlock x:Name="ContentHeader"
Text="{TemplateBinding Content}"
Padding="0,5,0,0"
Width="{TemplateBinding Width}"
TextAlignment="Left"
FontSize="13"
Margin="5,0,0,0"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="{DynamicResource GridViewColumnHeaderForegroundColor}"/>
<Setter Property="FontFamily" Value="{DynamicResource applicationFontFamily}"/>
<Setter Property="FontSize" Value="{DynamicResource GridViewColumnHeaderFontSize}"/>
</Style>
And inside my Column Header i want to add Combobox:
<GridViewColumn Width="100" CellTemplate="{StaticResource ComboBoxDataTemplate}">
<GridViewColumn.Header>
<StackPanel>
<ComboBox Width="90"
SelectedIndex="0"
SelectionChanged="ComboBox_SelectionChanged"
Margin="0,0,0,0">
<ComboBoxItem Content=" -- Select --"/>
<ComboBoxItem Content="File"/>
<ComboBoxItem Content="Name"/>
</ComboBox>
</StackPanel>
</GridViewColumn.Header>
But because my Style that i am using contains TextBlock i cannot see this Combobox.
If i removed the Style ListViewHeaderDefaultStyle this works fine but then all my Header borders that i want to remove visible again.
How can i use this style and also display my Header Combobox ?
try this style
<Style x:Key="ListViewHeaderDefaultStyle" TargetType="{x:Type GridViewColumnHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GridViewColumnHeader}">
<Border BorderThickness="0,0,0,1" BorderBrush="{DynamicResource GridViewColumnHeaderBorderBrushColor}" Background="Transparent">
<Grid>
<TextBlock x:Name="ContentHeader"
Text="{TemplateBinding Content}"
Padding="0,5,0,0"
Width="{TemplateBinding Width}"
TextAlignment="Left"
FontSize="13"
Margin="5,0,0,0">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Visible"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ContentPresenter}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<ContentPresenter HorizontalAlignment="Left" VerticalAlignment="Center"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Foreground" Value="{DynamicResource GridViewColumnHeaderForegroundColor}"/>
<Setter Property="FontFamily" Value="{DynamicResource applicationFontFamily}"/>
<Setter Property="FontSize" Value="{DynamicResource GridViewColumnHeaderFontSize}"/>
</Style>
I've a ToggleButton control that I've inserted in my Grid in this way:
xmlns:LSControls="clr-namespace:LS"
and then:
<LSControls:Favourite />
What I need to do is bind the IsSelected property of each item of ListView, infact I've inserted the control inside a ListView like this:
<ListView x:Name="AllMatches" ItemsSource="{Binding Source={StaticResource GroupedItems}}" SelectionChanged="AllMatches_SelectionChanged">
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<LSControls:Favourite />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
this will display the control in eac item of my ListView, but I need to check or uncheck the ToggleButton based on the value of IsSelected, this property is available for each item of AllMatches source.
How can do this?
The structure of the control is like this:
<UserControl.Resources>
<BitmapImage x:Key="Star" UriSource="add-favourite.png" />
<BitmapImage x:Key="StarEmpty" UriSource="add-favourite-empty.png" />
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<ToggleButton Focusable="False" Width="19" Height="19">
<ToggleButton.Style>
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
RecognizesAccessKey="True"
HorizontalAlignment="Center"/>
</Border>
<ControlTemplate.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding = "{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsChecked}" Value="False" />
<Condition Binding = "{Binding RelativeSource={RelativeSource Mode=Self}, Path=IsEnabled}" Value="True" />
</MultiDataTrigger.Conditions>
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource StarEmpty}"/>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Add to favourite."/>
</MultiDataTrigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content">
<Setter.Value>
<Image Source="{StaticResource Star}"/>
</Setter.Value>
</Setter>
<Setter Property="ToolTip" Value="Remove from Favourite."/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
</Grid>
I am trying to add a checkbox column to my datagrid so that users can easily see what is selected and easily select multiple columns without needing to know how to with the CTRL button. Would someone mind assisting?
The check box will un-check if already selected but I can not get it to become checked when I click it.
<Window.Resources>
<DataTemplate x:Key="isSelectedCheckBoxColumn">
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}}">
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="1.5" ScaleY="1.5" />
</CheckBox.LayoutTransform>
</CheckBox>
</DataTemplate>
<Style x:Key="RowStyleWithAlternation" TargetType="DataGridRow">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Background" Value="GhostWhite"/>
<Setter Property="FontWeight" Value="Normal"/>
<Setter Property="ContextMenu" Value="{x:Null}"/>
<Style.Triggers>
<Trigger Property="AlternationIndex" Value="1">
<Setter Property="Background" Value="#C1FFC1"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#F9F99F"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="LightBlue" />
</Trigger>
<Trigger Property="Validation.HasError" Value="True" >
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect Color="Red" ShadowDepth="0" BlurRadius="20" />
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="2" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="Foreground" Value="Blue" />
<Setter Property="FontSize" Value="12" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="CenterCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="RightCellStyle" TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid>
<ContentPresenter HorizontalAlignment="Right"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DataGrid Grid.Row="1" AutoGenerateColumns="False" Name="grid_achCredit" RowStyle="{StaticResource RowStyleWithAlternation}" AlternationCount="2" FontSize="15" CanUserAddRows="False" CanUserDeleteRows="False" IsReadOnly="False" SelectionMode="Extended">
<DataGrid.Columns>
<DataGridTemplateColumn Header="" CellTemplate="{StaticResource isSelectedCheckBoxColumn}" IsReadOnly="False"/>
<DataGridTextColumn Header="ID" Width="Auto" IsReadOnly="False" Binding="{Binding ID}" />
<DataGridTextColumn Header="TransDate" Width="Auto" IsReadOnly="False" Binding="{Binding transactionDate, StringFormat=\{0:MM-dd-yyyy\}}" />
<DataGridTextColumn Header="Payor" Width="Auto" IsReadOnly="False" Binding="{Binding payer}" />
<DataGridTextColumn Header="Description" Width="*" IsReadOnly="False" Binding="{Binding description}" />
<DataGridTextColumn Header="Amount" Width="Auto" IsReadOnly="False" Binding="{Binding amount, StringFormat=C}" />
<DataGridTextColumn Header="Balance" Width="Auto" IsReadOnly="False" Binding="{Binding amount, StringFormat=C}" />
<DataGridTextColumn Header="Selected By" Width="*" IsReadOnly="False" Binding="{Binding lockedUser}"/>
</DataGrid.Columns>
</DataGrid>
The problem is when you click the CheckBox it's IsChecked property and IsSelected property of current DataGridRow set to true at the same time. Therefore IsChecked binding doesn't work the way expected.
One way around this (probably not the best) is to prevent the CheckBox to be checked by clicking (only uncheck is allowed). This can be achieved by making the CheckBox enabled only when it's checked:
<CheckBox IsEnabled="{Binding RelativeSource={RelativeSource Self}, Path=IsChecked}"
IsChecked="{Binding Path=IsSelected, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged,
RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type DataGridRow}}}">
So this means your CheckBox gets checked only when corresponding row gets selected, but can get unchecked manually.
I ended up deciding to use the rowheaders to have a checkbox. Here is teh code I added to my datagrid
<DataGrid.RowHeaderTemplate>
<DataTemplate>
<Grid>
<CheckBox IsChecked="{Binding Path=IsSelected, Mode=TwoWay,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type DataGridRow}}}" Margin="0,-3,0,0">
<CheckBox.LayoutTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</CheckBox.LayoutTransform>
</CheckBox>
</Grid>
</DataTemplate>
</DataGrid.RowHeaderTemplate>
My styles and resources
<Window.Resources>
<ConvertorObj:BoolToVisibilityConverter x:Key="boolToVis"/>
<Style TargetType="{x:Type TextBlock}" x:Key="GridBlockStyle">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Visibility"
Value="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ListViewItem}},
Converter={StaticResource boolToVis}, ConverterParameter=False}" />
<Setter Property ="FontFamily" Value="Verdana" ></Setter>
<Setter Property ="FontSize" Value="14" ></Setter>
</Style>
<Style TargetType="{x:Type FrameworkElement}" x:Key="GridEditStyle">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Visibility"
Value="{Binding Path=IsSelected, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListViewItem}},
Converter={StaticResource boolToVis}, ConverterParameter=True}" />
<Style.Triggers>
<DataTrigger>
</DataTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
These are the two types of styles applied, GridBlockStyle and GridEditStyle. In a normal view the rows should behave like textblocks. When I edit the row it should behave as textbox with a combobox. The problem is that I get comboboxes in all the rows of the listview. it should appear only in certain rows of my listview.
My listview is as follows
<ListView Margin="10" Name="ListValues" AlternationCount="2"
ItemsSource="{Binding Path= ListValues}"
ScrollViewer.VerticalScrollBarVisibility="Auto" >
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Style.Triggers>
<Trigger Property="ItemsControl.AlternationIndex" Value="1">
<Setter Property="Background" Value="LightGray"></Setter>
</Trigger>
<Trigger Property="ItemsControl.AlternationIndex" Value="2">
<Setter Property="Background" Value="LightGray"></Setter>
</Trigger>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="#00B2EE">
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Width="200">
<GridViewColumnHeader Tag="Name" Content="Name" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource GridBlockStyle}" />
<TextBlock Text="{Binding Path=Name}" Style="{StaticResource GridEditStyle}" />
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="Auto">
<GridViewColumnHeader Tag="Settings" Content="Settings" />
<GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="240"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Style="{StaticResource GridBlockStyle}"
Text="{Binding Path=Settings}"/>
<TextBox Grid.Column="0"
Text="{Binding Path=Settings}"
FontFamily="verdana" FontSize="14"
MaxLength="31" Width="240"
Style="{StaticResource GridEditStyle}"/>
<TextBlock Grid.Column="1" Style="`{StaticResource GridBlockStyle}" />`
<ComboBox Grid.Column="1"
Style="{StaticResource GridEditStyle}"
ItemsSource="{Binding Path=CmbSettings}"
SelectedItem="{Binding Path=CmbSelectType}"
IsEnabled="{Binding Path = IsComboAvailable}"
Grid.RowSpan="2"/>
</Grid>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
Sample view model
_sampleModel = new SampleModel();
_sampleModel.Name = "test1";
_sampleModel.Settings = "aa";
_sampleModel.IsComboAvailable = false;
ListValues.Add(_sampleModel);
_sampleModel = new SampleModel();
_sampleModel.Name = "test1";
_sampleModel.Settings = "3";
_sampleModel.CmbSelectType = "Second";
_sampleModel.CmbSettings.Add("Second");
_sampleModel.CmbSettings.Add("Minute");
_sampleModel.IsComboAvailable = true;
ListValues.Add(_sampleModel);
ListValues.Add(_sampleModel);
Currently on editing the row the disabled dropdown is visible. It should be removed.
When IsEnabled is false, a ComboBox will appear grayed out and not be editable. However, since you have located the TextBlock and the ComboxBox in the same grid column, and the ComboBox is declared later, your TextBlock is still covered by the ComboBox even when the ComboBox is disabled. What you want to do is set the Visibility to Collapsed when IsComboAvailable is false.
Try this:
<ComboBox Grid.Column="1" Name="combo"
...
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsComboAvailable}" Value="False">
<Setter TargetName="combo" Property="Visibility" Value="Collapsed"/>
</DataTrigger>
</DataTemplate.Triggers>
I have the following screen at the moment, I would like to remove the two-tone background that lies behind the headers, the red arrow points to where it is and the green highlights the area that it covers.
Under normal circumstances you would not see it, however because I have textboxes in column 5 stretching the column header it is appearing.
I would like to remove this, making it transparent, but I do not know the component on the DataGrid or how to access it. Can someone help me?
The following web page has a brilliant diagram of the components http://blog.smoura.com/wpf-toolkit-datagrid-part-ii-custom-styling/ It shows the same sort of area defined as a DataGridColumnHeadersPresenter, I am not sure if this is the one I should be aiming at or not. I have given it a shot without much luck.
Here is my full XAML
<UserControl x:Class="Users.View.AllUsersView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
mc:Ignorable="d"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:helpers="clr-namespace:Users.ViewModel.Helpers"
d:DesignHeight="160" d:DesignWidth="1100">
<UserControl.Resources>
<CollectionViewSource x:Key="UserCollection" Source="{Binding Path=AllUsers}">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Name" Direction="Ascending" />
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
<Style x:Key="UserItemStyle" TargetType="{x:Type DataGridRow}">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="IsSelected" Value="{Binding Path=IsSelected, Mode=TwoWay}" />
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="ItemsControl.AlternationIndex" Value="1" />
<Condition Property="IsSelected" Value="False" />
<Condition Property="IsMouseOver" Value="False" />
</MultiTrigger.Conditions>
<Setter Property="Background" Value="#EEEEEEEE" />
</MultiTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="headerTemplate">
<TextBlock Padding="0,0,0,0" Margin="0,0,0,0" HorizontalAlignment="Center" VerticalAlignment="Bottom" Text="{Binding}"/>
</DataTemplate>
<Style x:Key="RowHeaderStyle2" TargetType="DataGridRowsPresenter">
<Setter Property="Background" Value="{x:Null}"/>
</Style>
<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Height" Value="25"/>
</Style>
<Style x:Key="ModuleColumnHeaderStyle" TargetType="GridViewColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="Width" Value="550"/>
</Style>
<helpers:FirstItemConverter x:Key="firstItemConvertion"/>
<Style x:Key="ListViewItemRotatedText" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Padding" Value="0,0,0,0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding ModuleName, Converter={StaticResource firstItemConvertion}, ConverterParameter=0}" Value="true">
<Setter Property="Margin" Value="-60,0,0,0" />
</DataTrigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<DockPanel>
<Grid DockPanel.Dock="Bottom" Margin="0,2,4,2">
<StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center">
<TextBlock Text="Selected Users: " />
<ContentPresenter Content="{Binding Path=TotalSelectedUsers}" ContentStringFormat="0" />
<TextBlock Text=" of " />
<ContentPresenter Content="{Binding Path=TotalUsers}" ContentStringFormat="0" />
</StackPanel>
</Grid>
<DataGrid AutoGenerateColumns="False" ItemContainerStyle="{StaticResource UserItemStyle}" AlternatingRowBackground="{x:Null}" DataContext="{StaticResource UserCollection}" ItemsSource="{Binding}">
<DataGrid.Columns>
<DataGridTextColumn Header="Name" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
<DataGridTextColumn Header="Job Title" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Job_Title}"/>
<DataGridTextColumn Header="Department" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Department}"/>
<DataGridTextColumn Header="Company" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Company}"/>
<DataGridTextColumn IsReadOnly="True" Binding="{Binding Path=Company}" CanUserResize="False" Width="580">
<DataGridTextColumn.Header>
<StackPanel Orientation="Vertical" HorizontalAlignment="Center">
<TextBlock HorizontalAlignment="Center">Modules</TextBlock>
<ListBox x:Name="lstModules" ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}, Path=DataContext.Modules}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" CanVerticallyScroll="False" CanHorizontallyScroll="False"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Style="{StaticResource ListViewItemRotatedText}" Text="{Binding ModuleName}"></TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</DataGridTextColumn.Header>
</DataGridTextColumn>
<DataGridTextColumn Header="Contact Detail" IsReadOnly="True" HeaderStyle="{StaticResource ColumnHeaderStyle}" HeaderTemplate="{StaticResource headerTemplate}" Binding="{Binding Path=Name}"/>
</DataGrid.Columns>
</DataGrid>
</DockPanel>
</UserControl>
[EDIT]
After placing background color on the DataGridColumnHeader's
<Style x:Key="ColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
<Setter Property="VerticalAlignment" Value="Bottom"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Background" Value="Tomato"/>
</Style>
<Style x:Key="ModuleColumnHeaderStyle" TargetType="DataGridColumnHeader">
<Setter Property="Background" Value="Tomato"/>
</Style>
This is what it looks like: as you can see the white/grey two-tone color is still there.
[EDIT2] To get the same in the fifth column add in these styles
<Style x:Key="ListViewItemRotatedText1" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Margin" Value="0,0,0,0" />
</Style>
<Style x:Key="ListViewItemRotatedText2" TargetType="TextBlock">
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-45" />
</Setter.Value>
</Setter>
<Setter Property="Width" Value="130"/>
<Setter Property="Margin" Value="-60,0,0,0" />
</Style>
And replace ... with the following StackPanel
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource ListViewItemRotatedText1}" >Customer Services</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Asset Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Works Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Project Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Rates Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Finance</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Human Resources</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Document Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >User Management</TextBlock>
<TextBlock Style="{StaticResource ListViewItemRotatedText2}" >Configuration</TextBlock>
</StackPanel>
[LAST EDIT] Result with Viv's help
Update:
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background"
Value="Tomato" />
</Style>
^^ don't specify a x:Key we are trying to let this reach the dummy Header(PART_FillerColumnHeader) which supposedly spans all Columns and gives a Background.
We'd also need to get ColumnHeaderStyle to inherit this so we'll end up having,
<Style TargetType="DataGridColumnHeader">
<Setter Property="Background"
Value="Tomato" />
</Style>
<Style x:Key="ColumnHeaderStyle"
BasedOn="{StaticResource {x:Type DataGridColumnHeader}}"
TargetType="DataGridColumnHeader">
<Setter Property="VerticalContentAlignment"
Value="Bottom" />
<Setter Property="VerticalAlignment"
Value="Bottom" />
<Setter Property="Height"
Value="25" />
</Style>