GroupBox header template - wpf

My Groupbox template is defined as so
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Border BorderThickness="1" BorderBrush="SomeColour"
Background="SomeColour"
CornerRadius="4">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" ContentSource="Header"
Margin="2"/>
<ContentPresenter Grid.Row="1"
Margin="{TemplateBinding Padding}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
How do I make it so that if the Header is set to a simple simple string, e.g
<GroupBox Header="The header!" />
The text is bold and with some default colour?
I tried the following, but it only works for the weight, not the colour.
<ContentPresenter ContentSource="Header" TextBlock.Foreground="Red"
TextBlock.FontWeight="Bold"/>
Edit : here is the textblock style
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="{StaticResource LabelForegroundBrush}" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="Margin" Value="1" />
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledLabelForegroundBrush}" />
</Trigger>
</Style.Triggers>
</Style>
Edit 2 : If I place the following in <Window.Resources> it seems to work, yet if I place them in <Application.Resources>, .. it fails???
<XXX.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Foreground" Value="Green" />
</Style>
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" ContentSource="Header" TextElement.Foreground="Red" />
<ContentPresenter Grid.Row="1" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</XXX.Resources>
Usage :
<GroupBox Header="Header">
<Button Content="Content" />
</GroupBox>

Try this
<Style x:Key="{x:Type GroupBox}" TargetType="{x:Type GroupBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupBox}">
<Border BorderThickness="1" BorderBrush="SomeColour"
Background="SomeColour"
CornerRadius="4">
<Grid SnapsToDevicePixels="true">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Foreground="Red" FontWeight="Bold" Margin="2">
<ContentPresenter ContentSource="Header"/>
</TextBlock>
<ContentPresenter Grid.Row="1" Margin="{TemplateBinding Padding}"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

You need attached properties TextElement.FontWeight and TextElement.Foreground instead.
<ContentPresenter ContentSource="Header"
Margin="2"
TextElement.FontWeight="Bold"
TextElement.Foreground="Red"/>
In case style is under Application resources, it
ignores the foreground set on ContentPresenter. If i have it under Window resources, it works
fine.
However, you can override Style for TextBlock and set only Foreground property. Also you can inherit all other properties from Style declared under App resources using BasedOn. Place that style under resource of ContentPresenter so that it gets overridden only for your ContentPresenter.
This will work:
<ContentPresenter Grid.Row="0" ContentSource="Header"
Margin="2" TextBlock.FontWeight="Bold">
<ContentPresenter.Resources>
<Style TargetType="TextBlock"
BasedOn="{StaticResource {x:Type TextBlock}}">
<Setter Property="Foreground" Value="Red"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>

Related

DatePicker template, borders appear on mouse over

I have a weird problem,
My DatePicker shows in the middle some borders. I don't know where it comes from.
I changed every property of the DatePickerTextBox but it doesn't change anything.
Here is the XAML :
<Window.Resources>
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border x:Name="MainBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="5">
<Grid x:Name="PART_Root" Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<DatePickerTextBox x:Name="PART_TextBox"
BorderThickness="0"
BorderBrush="Transparent"
HorizontalContentAlignment="Stretch"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="Center"
Visibility="Visible"
SelectionBrush="#FF6F5DF5"
FocusVisualStyle="{x:Null}"
Grid.Column="0" Margin="0,3,0,0">
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
</DatePickerTextBox>
<Button x:Name="PART_Button" HorizontalAlignment="Right" Margin="0,0,0.333,0.333" Width="24">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Image Source="Resources/Images/down.png"></Image>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
<Popup x:Name="PART_Popup" StaysOpen="False" AllowsTransparency="True" Margin="0,0,0.333,0.333" />
<Label x:Name="lblLabel" Content="{TemplateBinding Uid}" HorizontalContentAlignment="Center" Foreground="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" BorderThickness="0" Padding="12,0" FontFamily="Poppins" VerticalContentAlignment="Stretch" Margin="6,-11,0,0" HorizontalAlignment="Left" VerticalAlignment="Top"/>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsDropDownOpen" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="MainBorder" Property="BorderBrush" Value="#FF6F5DF5"/>
<Setter TargetName="PART_TextBox" Property="BorderThickness" Value="0"/>
<Setter Property = "BorderBrush" Value="{Binding ToYourBorder}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<DatePicker Margin="10,260,0,0" VerticalAlignment="Top" Uid="Date de naissance *" FontSize="12" Height="40" BorderThickness="0" HorizontalAlignment="Left" Width="181" FontFamily="Poppins" Background="#FFFEFEFE" BorderBrush="#FF9A9A9A" Foreground="#FF727272" />
And here how it seems :
And on hover, there is another thin border inside :
Any idea, please?
DatePickerTextBox has it's own Template where the border and the triggers for the border are defined/hardcoded.
You need to take care of those in the template of DatePickerTextBox.
Change:
<DatePickerTextBox.Style>
<Style>
<Setter Property="TextBox.BorderThickness" Value="0"/>
</Style>
</DatePickerTextBox.Style>
To:
<DatePickerTextBox.Style>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox" BorderThickness="0"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePickerTextBox.Style>
And it should work.
For a complete Template see DOCS

How to remove the white border from the Tab Control?

I've been looking inside templates but can't find anything.
example
My XAML so far:
<TabControl HorizontalAlignment="Left" Height="285" BorderThickness="0" Margin="10,56,0,0" VerticalAlignment="Top" Width="495">
<TabItem Header="Main" Foreground="#38acfc" BorderThickness="0" Background="#0c142c" FontFamily="Myriad Pro Cond" FontSize="14" Style="{DynamicResource CustomTabControl}">
<Grid Background="#0c142c"/>
</TabItem>
</TabControl>
Use this ControlTemplate :
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="0,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="White"
BorderBrush="Transparent"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="0"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Gray" />
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Style Datagrid Header border issue

I try to style datagridcolumn header but at the top right I have a double border.
I try to play with margin but it doesn't work I have always this double border at runtime.
How I can avoid this?
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="Background" Value="{StaticResource BrushAbbGrey255}" />
<Setter Property="FontFamily" Value="ABBVoice" />
</Style>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Border Padding="7,5,7,4">
<ContentPresenter VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Foreground" Value="{StaticResource BrushAbbGrey90}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundBorder"
BorderThickness="1,1,1,1"
Margin="-1,0,0,0"
Background="{StaticResource BrushAbbGrey240}"
BorderBrush="{StaticResource BrushAbbGrey200}"
Grid.ColumnSpan="2" />
<ContentPresenter Margin="8,10,7,10" VerticalAlignment="Center"/>
<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="White" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Try to set the right-margin to -1:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="Foreground" Value="{StaticResource BrushAbbGrey90}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border x:Name="BackgroundBorder"
BorderThickness="1,1,1,1"
Margin="-1,0,-1,0"
Background="{StaticResource BrushAbbGrey240}"
BorderBrush="{StaticResource BrushAbbGrey200}"
Grid.ColumnSpan="2" SnapsToDevicePixels="True" />
<ContentPresenter Margin="8,10,7,10" VerticalAlignment="Center"/>
<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="White" Margin="0,0,8,0"
VerticalAlignment="Center" RenderTransformOrigin="0.5,0.4" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You may also want to set the SnapsToDevicePixels property of the Border to true.
I added a style for my datagrid to set RowHeaderWidth to 1 and it's working fine.
<Style TargetType="{x:Type DataGrid}">
<Setter Property="BorderBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="HorizontalGridLinesBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="VerticalGridLinesBrush" Value="{StaticResource BrushAbbGrey200}" />
<Setter Property="BorderThickness" Value="1,0" />
<Setter Property="RowHeaderWidth" Value="1" />
</Style>

How to draw a separator line below DataGrid headers in WPF

Is there a way to draw a separator line below the headers in a DataGrid? I have set GridLinesVisibility to None as I don't want any gridlines except the one below the headers. I'm struggling to find a way to do this and any help would be greatly appreciated.
This is what I want to achieve.
You can modify the DataGridColumnHeader's ControlTemplate.
I used the original DataGrid's template and replaced the default border and fill with a Rectangle with a height of 1.
<DataGrid>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Style.Resources>
<!-- This style is required for the column resize thumbs -->
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Cursor" Value="SizeWE" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Style.Resources>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="1"/>
</Grid.RowDefinitions>
<ContentPresenter Grid.Row="0" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
<Thumb Grid.Row="0" x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Thumb Grid.Row="0" x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" />
<Rectangle Grid.Row="1" Height="1" HorizontalAlignment="Stretch" Stroke="Black"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.ColumnHeaderStyle>
</DataGrid>

How can I move TabItem of TabControl?

<Border Background="#FF260F54">
<TabControl Name="MyTabCtrl" SelectionChanged="MyTabCtrl_SelectionChanged" >
<TabItem Name="TItem01" Header="01">
<TextBlock>TItem01</TextBlock>
</TabItem>
<TabItem Name="TItem02" Header="02">
<TextBlock>TItem02</TextBlock>
</TabItem>
</TabControl>
</Border>
I want to make TItem01 move to the left 200 pixels, then show TItem02.
What should I do? Please help me. Thank you very much!
Don't know if this is the simplest way, but I would modify the default TabControl Style:
<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />
<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />
<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />
<Style TargetType="{x:Type TabControl}">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabControl}">
<Grid KeyboardNavigation.TabNavigation="Local">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TabPanel
Name="HeaderPanel"
Grid.Row="0"
Panel.ZIndex="1"
Margin="200,0,4,-1"
IsItemsHost="True"
KeyboardNavigation.TabIndex="1"
Background="Transparent" />
<Border
Name="Border"
Grid.Row="1"
Background="{StaticResource WindowBackgroundBrush}"
BorderBrush="{StaticResource SolidBorderBrush}"
BorderThickness="1"
CornerRadius="2"
KeyboardNavigation.TabNavigation="Local"
KeyboardNavigation.DirectionalNavigation="Contained"
KeyboardNavigation.TabIndex="2" >
<ContentPresenter
Name="PART_SelectedContentHost"
Margin="4"
ContentSource="SelectedContent" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Notice the Margin property of the TabPanel element in the ContolTemplate? That margin determines where the tabs start. By default it's 0,0,4,-1 and I modified it to 200,0,4,-1 to match your requirement.
If you are wondering how I produced the style, there are a couple of ways. The easiest would be using Expression Blend. It has an option to "break" your control and expose all it's default parts and styles. Another way is just search MSDN for ControlTemplates because they are public. (I used the second method)

Resources