We Keep Coding

Thumb of scrollbar not working according to Content height for WPF

I working for a project and i have some trouble with Listview's scrollbar
Problem: this scrollbar thumb is shortly according to content height.
I find it. some solve but i didint find it.
what add to this style ? or discard anything
e.g content height 300 but thumb just going between up/down 0px and 30px
This is style of Scroolbar.xaml
<Style x:Key="ScrollBarTrackThumb" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid" Height="19">
<Rectangle HorizontalAlignment="Stretch" />
<Border
x:Name="CornerScrollBarRectangle"
Margin="0,1,0,1"
Background="{TemplateBinding Background}"
CornerRadius="50" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle" Property="Width" Value="Auto" />
<Setter TargetName="CornerScrollBarRectangle" Property="Height" Value="0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled" Value="True" />
<Setter Property="Foreground" Value="#5A3CB6" />
<Setter Property="Background" Value="{x:Null}" />
<Setter Property="Width" Value="19" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid
x:Name="GridRoot"
Width="19"
Height="300"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Rectangle
Width="1"
Margin="0,40"
VerticalAlignment="Stretch"
Stroke="LightGray" />
<Track
x:Name="PART_Track"
Focusable="false"
IsDirectionReversed="true">
<Track.Thumb>
<Thumb
x:Name="Thumb"
Height="19"
Margin="0,30,0,0"
VerticalAlignment="Top"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton
x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Focusable="false"
Opacity="0" />
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton
x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Focusable="false"
Opacity="0" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource ButtonSelectBrush}" />
</Trigger>
<Trigger SourceName="Thumb" Property="IsDragging" Value="true">
<Setter TargetName="Thumb" Property="Background" Value="{DynamicResource DarkBrush}" />
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Thumb" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
What can I do that?

WPF - Hide Selected Item / Text Box portion from Combobox Control

I'm looking for a way to hide the Selected Item / Textbox portion of the wpf combobox, leaving only the drop down button so users can still interact with the list.
I cannot find a property to toggle this behaviour, I was curious to know if there is a way to change visibility of certain portions of this control?
If anyone has any suggestions, It'd be greatly appreciated.

The easiest way to hide the text part is probably to set the Width of the ComboBox:
<ComboBox Width="20" />
Otherwise, you could always define your own custom ControlTemplate and set the Template property to this one but this requires some more effort.

EDIT - To use the below code you will need to use ComboBoxStyleWithoutText as a style on your combobox
To achieve this I had to re-create a combo-box and edit the template itself whilst tweaking the individual styles to suit the colour scheme of our app.
This is the result
In the application
Please feel free to use the code below, it likely has some custom colours I've used from other dictionaries (Change these to whatever suits your app)
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Shared.xaml" />
<ResourceDictionary Source="Colours.xaml" />
<ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- SimpleStyles: ComboBox -->
<ControlTemplate x:Key="ComboBoxToggleButton"
TargetType="ToggleButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<Border x:Name="Border"
Grid.ColumnSpan="2"
CornerRadius="2"
Background="{StaticResource ScreenBackgroundBrush}"
BorderBrush="{StaticResource GridBorderBrush}"
BorderThickness="2" />
<Border Grid.Column="0"
CornerRadius="2,0,0,2"
Margin="1"
Background="{StaticResource ScreenBackgroundBrush}"
BorderBrush="{StaticResource GridBorderBrush}"
BorderThickness="1,1,1,1" />
<Path x:Name="Arrow"
Grid.Column="1"
Fill="{StaticResource SecondaryControlBrush}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridHeaderRowBackgroundBrush}" />
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter Property="Opacity"
Value="0.25" />
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DisabledBackgroundBrush}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{StaticResource DisabledBorderBrush}" />
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
<Setter TargetName="Arrow"
Property="Fill"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBox"
TargetType="TextBox">
<Border x:Name="PART_ContentHost"
Focusable="False"
Background="{TemplateBinding Background}" />
</ControlTemplate>
<Style x:Key="ComboBoxStyleWithoutText" TargetType="{x:Type ComboBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="Background" Value="Green" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0"></ColumnDefinition>
<ColumnDefinition MinWidth="{DynamicResource {x:Static SystemParameters.VerticalScrollBarWidthKey}}" Width="0"/>
</Grid.ColumnDefinitions>
<ToggleButton Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,3,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,3,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
Background="{StaticResource TextBoxBrush}"
BorderThickness="2"
BorderBrush="{StaticResource SolidBorderBrush}" />
<ScrollViewer Margin="4,6,2,2"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="Popup.AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop"
Value="false" />
<Setter TargetName="PART_EditableTextBox"
Property="Visibility"
Value="Visible" />
<Setter TargetName="ContentSite"
Property="Visibility"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<Style x:Key="{x:Type ComboBox}"
TargetType="ComboBox">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility"
Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll"
Value="true" />
<Setter Property="MinWidth"
Value="120" />
<Setter Property="MinHeight"
Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBox">
<Grid>
<ToggleButton Name="ToggleButton"
Template="{StaticResource ComboBoxToggleButton}"
Grid.Column="2"
Focusable="false"
IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press">
</ToggleButton>
<ContentPresenter Name="ContentSite"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
Margin="3,3,23,3"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBox x:Name="PART_EditableTextBox"
Style="{x:Null}"
Template="{StaticResource ComboBoxTextBox}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="3,3,23,3"
Focusable="True"
Visibility="Hidden"
IsReadOnly="{TemplateBinding IsReadOnly}" />
<Popup Name="Popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid Name="DropDown"
SnapsToDevicePixels="True"
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}">
<Border x:Name="DropDownBorder"
Background="{StaticResource TextBoxBrush}"
BorderThickness="2"
BorderBrush="{StaticResource SolidBorderBrush}" />
<ScrollViewer Margin="4,6,4,6"
SnapsToDevicePixels="True">
<StackPanel IsItemsHost="True"
KeyboardNavigation.DirectionalNavigation="Contained" />
</ScrollViewer>
</Grid>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="HasItems"
Value="false">
<Setter TargetName="DropDownBorder"
Property="MinHeight"
Value="95" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
<Trigger Property="IsGrouping"
Value="true">
<Setter Property="ScrollViewer.CanContentScroll"
Value="false" />
</Trigger>
<Trigger SourceName="Popup"
Property="Popup.AllowsTransparency"
Value="true">
<Setter TargetName="DropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter TargetName="DropDownBorder"
Property="Margin"
Value="0,2,0,0" />
</Trigger>
<Trigger Property="IsEditable"
Value="true">
<Setter Property="IsTabStop"
Value="false" />
<Setter TargetName="PART_EditableTextBox"
Property="Visibility"
Value="Visible" />
<Setter TargetName="ContentSite"
Property="Visibility"
Value="Hidden" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
</Style.Triggers>
</Style>
<!-- SimpleStyles: ComboBoxItem -->
<Style x:Key="{x:Type ComboBoxItem}"
TargetType="ComboBoxItem">
<Setter Property="SnapsToDevicePixels"
Value="true" />
<Setter Property="OverridesDefaultStyle"
Value="true" />
<Setter Property="Background"
Value="{StaticResource ScreenBackgroundBrush}"/>
<Setter Property="Foreground"
Value="{StaticResource PrimaryTextBrush}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Border Name="Border"
Padding="2"
SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsHighlighted"
Value="true">
<Setter TargetName="Border"
Property="Background"
Value="{StaticResource DataGridRowSelectedBrush}" />
<Setter TargetName="Border"
Property="CornerRadius"
Value="2" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter Property="Foreground"
Value="{StaticResource DisabledForegroundBrush}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Why is my ScrollViewer's repeatbutton white at the bottom?

So I am curious to why the scrollviewers repeatbutton at the bottom is white, it should be transparent, I didnt notice this until I resized my scrollviewer to fit perfectly, how do I change it's color to transparent?
I was looking throught the
RepeatButton part of the style and tried changing the background property but that didn't work either, it did nothing.
I even tried hiding it like so
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false"
Visibility="Hidden"/>
But that didnt work either, it was still there.
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="ScrollBarTrackThumb"
TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid x:Name="Grid">
<Rectangle HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Fill="Transparent" />
<Border x:Name="CornerScrollBarRectangle"
CornerRadius="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Width="Auto"
Height="Auto"
Margin="0,1,0,1"
Background="{TemplateBinding Background}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Tag"
Value="Horizontal">
<Setter TargetName="CornerScrollBarRectangle"
Property="Width"
Value="Auto" />
<Setter Property="Background" Value="Transparent"/>
<Setter TargetName="CornerScrollBarRectangle"
Property="Height"
Value="6" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ScrollBar}">
<Setter Property="Stylus.IsFlicksEnabled"
Value="false" />
<Setter Property="Foreground"
Value="#ADABAB" />
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Width"
Value="7" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ScrollBar}">
<Grid x:Name="GridRoot"
Width="7"
Background="{TemplateBinding Background}">
<Grid.RowDefinitions>
<RowDefinition Height="0.00001*" />
</Grid.RowDefinitions>
<Track x:Name="PART_Track"
Grid.Row="0"
IsDirectionReversed="true"
Focusable="false">
<Track.Thumb>
<Thumb x:Name="Thumb"
Background="{TemplateBinding Foreground}"
Style="{DynamicResource ScrollBarTrackThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton x:Name="PageUp"
Command="ScrollBar.PageDownCommand"
Opacity="0"
Focusable="false"/>
</Track.IncreaseRepeatButton>
<Track.DecreaseRepeatButton>
<RepeatButton x:Name="PageDown"
Command="ScrollBar.PageUpCommand"
Opacity="0"
Focusable="false" />
</Track.DecreaseRepeatButton>
</Track>
</Grid>
<ControlTemplate.Triggers>
<Trigger SourceName="Thumb"
Property="IsMouseOver"
Value="true">
<Setter Value="{DynamicResource ButtonSelectBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger SourceName="Thumb"
Property="IsDragging"
Value="true">
<Setter Value="{DynamicResource DarkBrush}"
TargetName="Thumb"
Property="Background" />
</Trigger>
<Trigger Property="IsEnabled"
Value="false">
<Setter TargetName="Thumb"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="Orientation"
Value="Horizontal">
<Setter TargetName="GridRoot"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter TargetName="PART_Track"
Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="-90" />
</Setter.Value>
</Setter>
<Setter Property="Width"
Value="Auto" />
<Setter Property="Height"
Value="8" />
<Setter TargetName="Thumb"
Property="Tag"
Value="Horizontal" />
<Setter TargetName="PageDown"
Property="Command"
Value="ScrollBar.PageLeftCommand" />
<Setter TargetName="PageUp"
Property="Command"
Value="ScrollBar.PageRightCommand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And the actual scrollviewer
<ScrollViewer Height="380"
Margin="10">
<ListView ItemsSource="{Binding MessageViewModel.Messages}"
x:Name="MyListView"
Background="Transparent"
BorderThickness="0"
Height="380">
<ListView.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding Message}"
FontFamily="Consolas"
Foreground="#61d73d"
TextWrapping="Wrap"/>
</WrapPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

like Klaus, I think the issue is not with your repeatButton. Rather, you see the (white) background through your repeatButton.
try putting a red rectangle just behind your scrollButton to see the outcome
or even better : use snoop to check this kind of issue.
but also, Clemens is right : style/template the scrollviewer inside the listView, rather than outside.

ControlTemplate DataGridColumnHeader control visible outside columns

I am customizing the style of a DataGrid and I want to describe the ControlTemplate of the header of the columns.
It is basically a TextBlock and an Image but the problem is that when I add the Control Image I find it also in the bottom of my header ...
I have tried many things to fix the problem like using a DataTemplate instead but it does not work better ...
Here is the XAML code:
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Do you have an idea to correct or work around the problem please?
Thank you all!

I succeeded like this:
Without a key for datagrid default style
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
and the style for each column
<Style x:Key="styleDtgHeader" TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED" Background="red">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
FontFamily="{StaticResource LatoRegular}"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="..\..\View\Image\search.png" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But I doubt that this is a clean solution?

You need to do below two things which will solve the issue:
Set the width of last column to * so that the extra column will not be created.
In your DataGridColumnHeader control template set the Grids first column width to "auto" and the HorizontalAlingment of Image to Left.
Here is the code
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="SnapsToDevicePixels" Value="True" />
<Setter Property="MinWidth" Value="0" />
<Setter Property="MinHeight" Value="50" />
<Setter Property="FontFamily" Value="{StaticResource LatoRegular}" />
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="FontSize" Value="14" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="FocusVisualStyle" Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridColumnHeader}">
<Grid>
<Border Grid.Column="0" BorderThickness="0,1,0,1" BorderBrush="#FFEDEDED">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="6" HorizontalAlignment="Left" VerticalAlignment="Center"
TextTrimming="CharacterEllipsis"
Text="{TemplateBinding Content}" />
<Image Grid.Column="1" Height="16" Width="16" Source="C:\Users\a0711212\Desktop\profilePic.png"
HorizontalAlignment="Left" RenderOptions.BitmapScalingMode="HighQuality" />
</Grid>
</Border>
<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Opacity="0" Cursor="SizeWE" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Opacity="0" Cursor="SizeWE" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Accessing style elements

I have a slider style (cut version)
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="15" Width="15" Fill="White"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="BigSliderStyle" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
From my interface I create it as
<Slider Style="{StaticResource BigSliderStyle}"/>
I need to bind a tooltip to slider thumb only which relates to ellipse.
Is there any way to access ellipse properties from within form XAML?

This should solve your problem:
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="ToolTip"><!--just add this part to your code-->
<Setter.Value>
<TextBlock Text="Some text"/><!-- also you can use Text="{Binding propertyName}"-->
</Setter.Value>
</Setter><!--just add this part to your code-->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="15" Width="15" Fill="White"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You already have the access to the thumb through the style. That element supports the Tooltip out of the box so no need to focus on the ellipse, as that is only a template for thumb placeholder.
This will also allow you to use different templates for the Slider keeping you ToolTip throughout the app.