I would like to make a contextmenu like the blue one on this image:
I can't figure how to make it so do you have some clues/tutorials/... to share with me?
For now, i'm stuck with this XAML
<Style x:Name="HorizontalContextMenu" TargetType="{x:Type ContextMenu}">
<Setter Property="Background" Value="CadetBlue" />
<Setter Property="BorderBrush" Value="DarkBlue" />
<Setter Property="HorizontalOffset" Value="50"/>
<Setter Property="VerticalOffset" Value="50"/>
<Setter Property="Height" Value="48"/>
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Grid.IsSharedSizeScope" Value="true" />
<Setter Property="HasDropShadow" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContextMenu">
<Border BorderThickness="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="24"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Path Width="100" Height="100"
Data="{DynamicResource RightArrow}"
Fill="Blue" Stretch="Fill"
Grid.Column="0"/>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.Column="1" Orientation="Horizontal"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After two days of reflection, i finally achieve this solution:
Frontend XAML
<Button x:Name="btnExpressions" Style="{StaticResource MyMenuButton}" Content="Expressions" Tag="{x:Static iconPacks:PackIconMaterialKind.HeartPulse}" Click="BtnExpressions_Click">
<Button.ContextMenu>
<ContextMenu Style="{StaticResource HorizontalContextMenu}">
<MenuItem Name="BtnA" Header="B" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/>
<MenuItem Name="BtnB" Header="F" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/>
<MenuItem Name="BtnC" Header="T" Tag="{x:Static iconPacks:PackIconMaterialKind.RunFast}" Style="{StaticResource HMI}"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
Style XAML
<Style x:Key="HorizontalContextMenu" TargetType="{x:Type ContextMenu}">
<Setter Property="Background" Value="#AF38789E" />
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Height" Value="48"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" Background="Transparent"/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContextMenu" >
<Border BorderThickness="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Path Data="M0,0.5 L1,0.75 1,0.25Z" Margin="0"
Grid.Column="0"
StrokeThickness="0"
Stroke="{TemplateBinding Background}"
Fill="{TemplateBinding Background}"
Stretch="Fill"
Width="10" Height="20"/>
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle"Grid.Column="1" Orientation="Horizontal" Background="{TemplateBinding Background}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="HMI" TargetType="MenuItem">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Opacity" Value="0.5"/>
<Setter Property="Width" Value="48" />
<Setter Property="Height" Value="48" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Border>
<iconPacks:PackIconMaterial Kind="{Binding Tag, RelativeSource={RelativeSource AncestorType=MenuItem}}" VerticalAlignment="Center" HorizontalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Opacity" Value="1" />
</Trigger>
</Style.Triggers>
</Style>
Code behind (VB.NET version)
Private Sub BtnExpressions_Click(sender As Object, e As RoutedEventArgs)
Dim btn As FrameworkElement = sender
If btn IsNot Nothing Then
btn.ContextMenu.PlacementTarget = btn
btn.ContextMenu.Placement = Primitives.PlacementMode.Right
btn.ContextMenu.HorizontalOffset = -10
btn.ContextMenu.VerticalOffset = 0
btn.ContextMenu.IsOpen = True
End If
End Sub
Hope this helps someone else.
Related
i'm trying to set the Background of the Column Header to a dark grey color (#6A767D) but it doesn´t work. Instead the Header Background is the Color of the AlternatingRowBackground Property. Maybe the Background is somehow overwritten? I'm not sure if you need more than just the xaml-code of the data grid. Any suggestions?
<DataGrid x:Name="DataGrid"
AlternatingRowBackground="#F8F8F8" Margin="40,60,40,45"
Grid.Column="2" Grid.ColumnSpan="10"
Grid.Row="1" Grid.RowSpan="12"
RowHeight="47"
ColumnHeaderHeight="47"
Padding="0"
FontSize="18"
ColumnWidth="Auto"
HorizontalScrollBarVisibility="Visible"
AutoGenerateColumns ="False"
GridLinesVisibility="All"
SelectionUnit="Cell"
ContextMenu="{StaticResource ctMenu}">
<DataGrid.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="AliceBlue" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<EventSetter Event="MouseUp" Handler="Row_Click"/>
</Style>
</DataGrid.RowStyle>
Two issues:
You never actually assign the style to be used. I would recommend you define the style in the resources of your Window or whatever panel the DataGrid is placed in.
<Window.Resources>
<Style x:Key="DatagridColumnHeaderStyle_Basic" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Width" Value="Auto"/>
<Setter Property="Background" Value="#6A767D" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="10" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="FontFamily" Value="Arial" />
<Setter Property="TextElement.Foreground" Value="White"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Name="HedearGrid" Background="{TemplateBinding Background}" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ContentPresenter Margin="6,3,6,3" VerticalAlignment="Center" Grid.Column="0" />
<Path x:Name="SortArrow" Visibility="Collapsed" Data="M0,0 L1,0 0.5,1 z" Stretch="Fill"
Grid.Column="1" Width="8" Height="6" Fill="Blue" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Cursor="SizeWE"
Grid.Column="1" >
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="SortDirection" Value="Ascending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
<Setter TargetName="SortArrow" Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" />
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="SortDirection" Value="Descending">
<Setter TargetName="SortArrow" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
You can then assign it to your DataGrid like this:
<DataGrid ColumnHeaderStyle="{StaticResource DatagridColumnHeaderStyle_Basic}"/>
Alternatively, just remove x:Key="DatagridColumnHeaderStyle_Basic", then you don't have to specify.
(fixed for you in the above code) you override your Background with AliceBlue:
<Grid Name="HedearGrid" Background="AliceBlue">
should be:
<Grid Name="HedearGrid" Background="{TemplateBinding Background">
I am working on application and one requirement is to change the image of the button on mouse hover.
Below is my code for button,
<Grid Margin="0 20 0 0" Name="ButtonsGrid" Width="300">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" IsEnabled="False" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
And below is the style i am applying,
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.Content>
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
</ContentPresenter.Content>
</ContentPresenter>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I am not sure what wrong am i doing but the above code is not working.
Any help would be appreciated
Remove IsEnabled="True" and define the Border element in the ControlTemplate itself and not in a ContentPresenter:
<Style x:Key="hover2" TargetType="Button">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<Image x:Name="ButtonImage1" Source="/Training.Project.Demo;component/Images/Answer.PNG" Height="17" Width="17" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="ButtonImage1" Property="Source" Value="/Training.Project.Demo;component/Images/answer-hover.PNG" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
XAML:
<Button x:Name="AnswerButton" Style="{StaticResource hover2}" Grid.Column="0" VerticalAlignment="Center" HorizontalContentAlignment="Center" Width="60" Height="60" Background="Transparent" Click="AnswerButton_OnClick" BorderBrush="Transparent" BorderThickness="0" >
<Image Source="/Training.Project.Demo;component/Images/Answer.PNG" Stretch="UniformToFill"/>
</Button>
If you want a ContentPresenter, you should replace the its Content in the trigger:
<ControlTemplate TargetType="Button">
<Border Name="border"
BorderThickness="0"
BorderBrush="Transparent"
Background="{TemplateBinding Background}">
<ContentPresenter x:Name="cp" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="border" Property="BorderBrush" Value="Black" />
<Setter TargetName="border" Property="BorderThickness" Value="1" />
<Setter TargetName="cp" Property="Content">
<Setter.Value>
<Image Source="/Training.Project.Demo;component/Images/answer-hover.PNG" Stretch="UniformToFill"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The IsMouseOver property is never set to true if the Button is disabled.
For the life of me I can't catch where the problem is, as soon as I apply this style to the scrollviewer the vertical scroll bar is being drawn but looks like it's disabled. The style is applied from wpf xaml.
<Geometry x:Key="ScrollUp">m 3 21.703248 c 0 -0.810665 2.9850856 -4.266337 6.6335237 -7.679272 l 6.6335233 -6.2053359 6.817561 6.7653189 c 3.749658 3.720926 6.559968 7.182113 6.245132 7.691527 C 29.014905 22.7849 25.970346 20.4395 22.564054 17.063485 L 16.370796 10.925277 9.685398 17.05123 C 5.8994898 20.520327 3 22.53793 3 21.703248 z</Geometry>
<Geometry x:Key="ScrollDown">m 3 21.703248 c 0 -0.810665 2.9850856 -4.266337 6.6335237 -7.679272 l 6.6335233 -6.2053359 6.817561 6.7653189 c 3.749658 3.720926 6.559968 7.182113 6.245132 7.691527 C 29.014905 22.7849 25.970346 20.4395 22.564054 17.063485 L 16.370796 10.925277 9.685398 17.05123 C 5.8994898 20.520327 3 22.53793 3 21.703248 z</Geometry>
<Style x:Key="ScrollBarTopButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Height" Value="56" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonTouch" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource ButtonLine}" Background="{StaticResource LtBlue}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" >
<Rectangle Width="22" Height="22" StrokeThickness="0" x:Name="IconColor" Margin="4">
<Rectangle.Tag>
<SolidColorBrush Color="{StaticResource DkBlueColor}" />
</Rectangle.Tag>
<Rectangle.Fill>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource DkBlue}" Geometry="{StaticResource ScrollUp}"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonTouch" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="IconColor" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarBottomButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="Height" Value="56" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonTouch" CornerRadius="0" BorderThickness="1" BorderBrush="{StaticResource ButtonLine}" Background="{StaticResource LtBlue}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" >
<Rectangle Width="22" Height="22" StrokeThickness="0" x:Name="IconColor" Margin="4">
<Rectangle.Tag>
<SolidColorBrush Color="{StaticResource DkBlueColor}" />
</Rectangle.Tag>
<Rectangle.Fill>
<DrawingBrush Stretch="Uniform">
<DrawingBrush.Drawing>
<GeometryDrawing Brush="{StaticResource DkBlue}" Geometry="{StaticResource ScrollDown}"/>
</DrawingBrush.Drawing>
</DrawingBrush>
</Rectangle.Fill>
</Rectangle>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="ButtonTouch" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="IconColor" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarPageButton05" TargetType="{x:Type RepeatButton}" >
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="MinHeight" Value="40" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border x:Name="ButtonBorder" CornerRadius="0" BorderThickness="1,0,1,0" BorderBrush="{StaticResource ButtonLine}" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0" Background="{StaticResource LtBlue}">
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ButtonBorder" Property="Background" Value="#C0F7F7F7" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollBarThumb05" TargetType="{x:Type Thumb}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Height" Value="56" />
<Setter Property="Width" Value="30" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<!--Thumb-->
<Border x:Name="ScrollThumb" CornerRadius="4" Background="{StaticResource LtBlue}" BorderBrush="{StaticResource ButtonLine}" BorderThickness="1" />
<ControlTemplate.Triggers>
<Trigger Property="IsDragging" Value="True">
<Setter TargetName="ScrollThumb" Property="Background" Value="{StaticResource LtGrey}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="ScrollThumb" Property="Visibility" Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="VerticalScrollBar05" TargetType="{x:Type ScrollBar}" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="56" />
<RowDefinition Height="0.00001*" />
<RowDefinition Height="56" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
</Grid.ColumnDefinitions>
<!--Border around buttons and thumb-->
<Border Grid.RowSpan="3" CornerRadius="0" Background="{StaticResource LtBlue}" BorderBrush="{StaticResource ButtonLine}" BorderThickness="1" />
<RepeatButton Grid.Row="0" Height="56" Command="ScrollBar.LineUpCommand" Style="{StaticResource ScrollBarTopButton05}" />
<Track Name="PART_Track" Grid.Row="1" IsDirectionReversed="true" ViewportSize="NaN" >
<Track.DecreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageUpCommand" Style="{StaticResource ScrollBarPageButton05}" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource ScrollBarThumb05}" Margin="0,13,0,13" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="ScrollBar.PageDownCommand" Style="{StaticResource ScrollBarPageButton05}" />
</Track.IncreaseRepeatButton>
</Track>
<RepeatButton Grid.Row="2" Height="56" Command="ScrollBar.LineDownCommand" Style="{StaticResource ScrollBarBottomButton05}" />
</Grid>
</ControlTemplate>
<Style x:Key="ScrollBar05" TargetType="{x:Type ScrollBar}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Setter Property="IsEnabled" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Width" Value="56" />
<Setter Property="Height" Value="Auto" />
<Setter Property="Template" Value="{StaticResource VerticalScrollBar05}" />
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="ScrollViewer05" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="IsEnabled" Value="true" ></Setter>
<Setter Property="VerticalScrollBarVisibility" Value="Visible"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="0" Grid.Row="0" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="1"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Value="{TemplateBinding VerticalOffset}"
Style="{DynamicResource ResourceKey=ScrollBar05}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="Visible" />
<ScrollBar Name="PART_HorizontalScrollBar"
Grid.Row="1"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="ScrollViewer05Left" TargetType="{x:Type ScrollViewer}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollContentPresenter Grid.Column="1" Grid.Row="0" />
<ScrollBar Name="PART_VerticalScrollBar"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableHeight}"
Orientation="Vertical"
Value="{TemplateBinding VerticalOffset}"
Style="{DynamicResource ResourceKey=ScrollBar05}"
ViewportSize="{TemplateBinding ViewportHeight}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}" />
<ScrollBar Name="PART_HorizontalScrollBar"
Grid.Row="1"
Grid.Column="0"
Maximum="{TemplateBinding ScrollableWidth}"
Orientation="Horizontal"
Value="{TemplateBinding HorizontalOffset}"
ViewportSize="{TemplateBinding ViewportWidth}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Style is applied through staticresource bind.
<DockPanel Name="mainDock" LastChildFill="True" >
<local:HeaderControl DockPanel.Dock="Top" Height="100" x:Name="HeaderBar"></local:HeaderControl>
<local:StatusBarControl DockPanel.Dock="Bottom" Height="56" x:Name="StatusBar"></local:StatusBarControl>
<DockPanel d:DesignHeight="612" VerticalAlignment="Top" Name="MidDock">
<StackPanel DockPanel.Dock="left" Name="Leftmenu" Background="{StaticResource MedBlue}" Width="300" d:DesignHeight="612" VerticalAlignment="Stretch"/>
<ScrollViewer Name="midScroll1" Style="{StaticResource ScrollViewer05}" VerticalScrollBarVisibility="Hidden" d:DesignHeight="612" Width="Auto" CanContentScroll="True" Height="Auto">
<StackPanel DockPanel.Dock="left" VerticalAlignment="Stretch" Name="Midmenu" Background="{StaticResource LtBlue}" Width="300" CanVerticallyScroll="True">
</StackPanel>
</ScrollViewer>
<StackPanel DockPanel.Dock="right" Name="Metric" Background="White" Width="auto">
<local:MetricControl Margin="10"></local:MetricControl>
</StackPanel>
</DockPanel>
</DockPanel>
Thank you.
I don't think that it's disabled, there's just not enough content to make it scroll. I got it working by adding a height of 1200 to the "Midmenu" stackpanel inside the scrollviewer. Pretty template, looks nice, just need to flip the scrolldown arrow to actually point down.
For those who might come upon this problem
In the scrollviewer style, made it work for me.
<TabControl x:Class="MyTabControl.Tab_Control"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MyTabControl" Padding="0" Background="White" BorderBrush="Black" Loaded="TabControl_Loaded">
<TabControl.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid Name="Grid_Main">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Border Grid.Column="1" Name="border_Main" Background="#F0F0F0" BorderBrush="LightGray" BorderThickness="1,1,1,0" CornerRadius="4,4,0,0"
Margin="-2,0,2,0" SnapsToDevicePixels="True" >
<StackPanel Orientation="Horizontal">
<TextBlock FontSize="13" HorizontalAlignment="Center" Name="TextBlock"
Foreground="DarkGray">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center" ContentSource="Header" Margin="5,2,5,2"/></TextBlock>
</StackPanel>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="border_Main" Property="Background" Value="White" />
<Setter TargetName="border_Main" Property="BorderBrush" Value="Gray" />
<Setter TargetName="TextBlock" Property="Foreground" Value="Black" />
<Setter TargetName="border_Main" Property="Margin" Value="-2,0,2,-1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True" SourceName="border_Main" >
<Setter TargetName="border_Main" Property="Background" Value="White" />
<Setter TargetName="border_Main" Property="BorderBrush" Value="DarkGray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
</TabControl>
How can I access my "border_Main" control programmatically?
I would recommend using LinqToVisualTree ...
http://www.scottlogic.co.uk/blog/colin/2010/03/linq-to-visual-tree/
You can find all the "border_Main" controls within the TabControl as follows:
tabControl.Descendants<Border>().Where(d => d.Name=="border_Main");
Or, if you could use the above query on a TabItem directly if you want to find a single border_Main instance.
I have created a custom style for my WPF datagrid by overriding its control template - nothing unusual, just copied the original template and modified it. Unfortunately, when the grid is drawn, the fully qualified class name of my ViewModel is showing up in the header (the ViewModel happens to be the DataContext of the UserControl that contains the DataGrid). Using Snoop, I have narrowed down which element in the template is showing this class name:
<DataGridColumnHeadersPresenter
Grid.Column="1"
Name="PART_ColumnHeadersPresenter"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=HeadersVisibility, Converter={x:Static DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static DataGridHeadersVisibility.Column}}"/>
The visual tree for this part looks like this:
PART_ColumnHeadersPresenter (DataGridColumnHeadersPresenter)
(Grid)
headerBorder (DataGridHeaderBorder)
(Border)
(TextBlock)
It is this text block that contains the class name! So the questions are
Why does the Border need a TextBlock?
Why is the TextBlock initialized with the class name of the DataContext?
Is there a property at the DataGrid level that controls the conent of this TextBlock?
P.S. To answer the comment below, I am specifying proper paths for the ItemSource and also for each column:
<DataGrid
ItemsSource="{Binding Path=Orders, Mode=TwoWay}"
AutoGenerateColumns="False"
IsReadOnly="True">
<DataGrid.Columns>
<DataGridTextColumn
Header="Creation Time"
Binding="{Binding Path=CreationTime}"
CellStyle="{StaticResource LeftAlignedCellStyle}"
SortMemberPath="CreationTime">
</DataGridTextColumn>
...
</DataGrid.Columns>
</DataGrid>
I don't see any place where I must bind the TextBlock for the column header border. Don't even know how it makes sense!
Based on Avatar's comment, I am sharing my entire template. See below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Classic">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes.xaml"/>
</ResourceDictionary.MergedDictionaries>
<!-- ColumnHeader Gripper Style -->
<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 Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}">
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGridColumnHeader Style -->
<Style x:Key="DataGridColumnHeaderStyle" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource HeaderForegroundBrush}"/>
<Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
<Setter Property="BorderThickness" Value="0,1,0,1" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<themes:DataGridHeaderBorder
x:Name="headerBorder"
SortDirection="{TemplateBinding SortDirection}"
IsHovered="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
IsClickable="{TemplateBinding CanUserSort}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding ="{TemplateBinding Padding}"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<Border BorderBrush="{StaticResource HeaderInnerBorderBrush}"
BorderThickness="0,1,0,0">
<TextBlock
Text="{Binding}" Margin="7,0,7,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>
</themes:DataGridHeaderBorder>
<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="IsMouseOver" Value="True">
<Setter TargetName="headerBorder" Property="Background"
Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="headerBorder" Property="Background"
Value="{StaticResource HeaderPressedBackgroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Right Aligned DataGridColumnHeader Style-->
<Style x:Key="RightAlignedColumnHeaderStyle"
TargetType="{x:Type DataGridColumnHeader}"
BasedOn="{StaticResource DataGridColumnHeaderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Right"/>
</Style>
<!-- Center Aligned DataGridColumnHeader Style-->
<Style x:Key="CenterAlignedColumnHeaderStyle"
TargetType="{x:Type DataGridColumnHeader}"
BasedOn="{StaticResource DataGridColumnHeaderStyle}">
<Setter Property="HorizontalContentAlignment" Value="Center"/>
</Style>
<!-- DataGridRowHeader Gripper -->
<Style x:Key="RowHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Height" Value="8"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Cursor" Value="SizeNS"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}"
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGridRowHeader Style -->
<Style x:Key="{x:Type DataGridRowHeader}"
TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Background" Value="{StaticResource HeaderBackgroundBrush}" />
<Setter Property="BorderBrush" Value="{StaticResource HeaderBorderBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
<themes:DataGridHeaderBorder
x:Name="headerBorder"
IsSelected="{TemplateBinding IsRowSelected}"
IsHovered ="{TemplateBinding IsMouseOver}"
IsPressed="{TemplateBinding IsPressed}"
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="1,0,1,1"
Padding ="{TemplateBinding Padding}"
Orientation="Horizontal"
SeparatorVisibility="{TemplateBinding SeparatorVisibility}"
SeparatorBrush="{TemplateBinding SeparatorBrush}">
<Border BorderBrush="{StaticResource HeaderInnerBorderBrush}"
BorderThickness="0,1,0,0">
<StackPanel Orientation="Horizontal">
<ContentPresenter
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="Center"/>
<Control
SnapsToDevicePixels="false"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}, Path=(Validation.HasError), Converter={StaticResource bool2VisibilityConverter}}"
Template="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}, Path=ValidationErrorTemplate}" />
</StackPanel>
</Border>
</themes:DataGridHeaderBorder>
<Thumb x:Name="PART_TopHeaderGripper"
VerticalAlignment="Top"
Style="{StaticResource RowHeaderGripperStyle}"/>
<Thumb x:Name="PART_BottomHeaderGripper"
VerticalAlignment="Bottom"
Style="{StaticResource RowHeaderGripperStyle}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="headerBorder" Property="Background"
Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="headerBorder" Property="Background"
Value="{StaticResource HeaderPressedBackgroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- DataGridElement Styles -->
<Style x:Key="DataGridElementStyle" TargetType="{x:Type FrameworkElement}">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="7 0 7 0" />
</Style>
<Style x:Key="LeftAlignedElementStyle" TargetType="{x:Type FrameworkElement}" BasedOn="{StaticResource DataGridElementStyle}">
<Setter Property="HorizontalAlignment" Value="Left" />
</Style>
<Style x:Key="CenterAlignedElementStyle" TargetType="{x:Type FrameworkElement}" BasedOn="{StaticResource DataGridElementStyle}">
<Setter Property="HorizontalAlignment" Value="Center" />
</Style>
<Style x:Key="RightAlignedElementStyle" TargetType="{x:Type FrameworkElement}" BasedOn="{StaticResource DataGridElementStyle}">
<Setter Property="HorizontalAlignment" Value="Right" />
</Style>
<!-- DataGridCell Styles -->
<Style x:Key="DataGridCellStyle" TargetType="{x:Type DataGridCell}">
<!-- Remove blue highlight when cell is selected -->
<Setter Property="Background" Value="Transparent" />
<!-- Don't change text color when cell is selected -->
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=Foreground}"/>
</Trigger>
</Style.Triggers>
</Style>
<Style x:Key="LeftAlignedCellStyle" TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource DataGridCellStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter Style="{StaticResource LeftAlignedElementStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Center Aligned DataGridCell Style -->
<Style x:Key="CenterAlignedCellStyle" TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource DataGridCellStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter Style="{StaticResource CenterAlignedElementStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- Right Aligned DataGridCell Style -->
<Style x:Key="RightAlignedCellStyle" TargetType="{x:Type DataGridCell}" BasedOn="{StaticResource DataGridCellStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter Style="{StaticResource RightAlignedElementStyle}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- SelectAllButton ControlTemplate -->
<ControlTemplate x:Key="SelectAllButtonTemplate" TargetType="{x:Type Button}">
<Grid>
<Rectangle x:Name="Border" SnapsToDevicePixels="True"
Stroke="{StaticResource HeaderBorderBrush}"
Fill="{StaticResource HeaderBackgroundBrush}" />
<Border SnapsToDevicePixels="True" Margin="1,1,1,0"
BorderBrush="White" BorderThickness="0,1,0,0" />
<Polygon x:Name="Arrow"
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Margin="8,8,3,3"
Opacity="0.15"
Fill="Black"
Stretch="Uniform"
Points="0,10 10,10 10,0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Fill"
Value="{StaticResource HeaderHighlightedBackgoundBrush}" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="Border" Property="Fill"
Value="{StaticResource HeaderPressedBackgroundBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Arrow" Property="Visibility" Value="Collapsed" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!-- DataGrid Style -->
<Style x:Key="{x:Type DataGrid}" TargetType="{x:Type DataGrid}">
<Setter Property="Background" Value="{StaticResource DefaultControlBackgroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource DefaultControlForegroundBrush}"/>
<!-- Remove border around the grid -->
<Setter Property="BorderBrush" Value="{x:Null}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalGridLinesBrush" Value="{StaticResource GridLineColorBrush}" />
<Setter Property="VerticalGridLinesBrush" Value="{StaticResource GridLineColorBrush}" />
<Setter Property="AlternatingRowBackground" Value="{StaticResource AlternateRowBackgroundBrush}" />
<Setter Property="ColumnHeaderStyle" Value="{StaticResource DataGridColumnHeaderStyle}"/>
<!-- This is needed to force DG to have a non-default value. Otherwise the DGR.DetailsVisibility cannot have a value of VisibleWhenSelected by default. -->
<Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
<!-- Turn off row headers by default. -->
<Setter Property="HeadersVisibility" Value="Column" />
<Setter Property="GridLinesVisibility" Value="Horizontal" />
<Setter Property="ColumnHeaderHeight" Value="32" />
<Setter Property="RowHeight" Value="32" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGrid}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
SnapsToDevicePixels="True"
Padding="{TemplateBinding Padding}">
<ScrollViewer Focusable="false" Name="DG_ScrollViewer">
<ScrollViewer.Template>
<ControlTemplate TargetType="{x:Type ScrollViewer}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!--Left Column Header Corner -->
<Button
Command="{x:Static DataGrid.SelectAllCommand}"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=CellsPanelHorizontalOffset}"
Focusable="false"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=HeadersVisibility, Converter={x:Static DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static DataGridHeadersVisibility.All}}"
Template="{StaticResource SelectAllButtonTemplate}"/>
<!--Column Headers-->
<DataGridColumnHeadersPresenter
Grid.Column="1"
Name="PART_ColumnHeadersPresenter"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=HeadersVisibility, Converter={x:Static DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static DataGridHeadersVisibility.Column}}"/>
<!--DataGrid content-->
<ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="1" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />
<ScrollBar
Grid.Row="0" Grid.RowSpan="2" Grid.Column="2" Name="PART_VerticalScrollBar"
Orientation="Vertical"
Maximum="{TemplateBinding ScrollableHeight}"
ViewportSize="{TemplateBinding ViewportHeight}"
Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
<Grid Grid.Row="2" Grid.Column="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<ScrollBar
Grid.Column="1"
Name="PART_HorizontalScrollBar"
Orientation="Horizontal"
Maximum="{TemplateBinding ScrollableWidth}"
ViewportSize="{TemplateBinding ViewportWidth}"
Value="{Binding Path=HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
</Grid>
</Grid>
</ControlTemplate>
</ScrollViewer.Template>
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
</ScrollViewer>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
</Trigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
The default template for DataGridColumnHeadersPresenter looks something like this:
<ControlTemplate TargetType="{x:Type DataGridColumnHeadersPresenter}">
<Grid>
<DataGridColumnHeader IsHitTestVisible="False"
Name="PART_FillerColumnHeader"/>
<ItemsPresenter />
</Grid>
</ControlTemplate>
The ItemsPresenter will create a DataGridColumnHeader for each column, but the template also includes a single DataGridColumnHeader that stretches across the entire grid to act as a background. It has no content, so it normally just draws the border in the appropriate theme.
However, your DataGridColumnHeader template includes a TextBlock instead of a ContentPresenter, so it will render the DataContext as a string whether or not it is also the content. Try using a ContentPresenter instead of a TextBlock:
<Border BorderBrush="{StaticResource HeaderInnerBorderBrush}"
BorderThickness="0,1,0,0">
<ContentPresenter
Margin="7,0,7,0"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>