TreeViewItem.Header with Grid inside - wpf

Question

I'm trying to make "Img" appear in the end of TreeViewItem.Header (as close to the right side of TreeView control), but no mater what I try header wide is always less than TreeView size and ofcourse "Img" appear somewhere in the middle of the control. This probably a very newbish question; I'm just starting to learn WPF.
<TreeView Grid.Row="1" Grid.ColumnSpan="2" Margin="3,3,3,3" Name="treeView1" Width="300">
<TreeViewItem HorizontalAlignment="Stretch">
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>

Answer 1

To achieve that you need to change the Control template of the TreeviewItem using the ItemContainerStyle of the TreeView (this is the style that gets applied to any item in the root of the treeview).
The default TreeViewItem is not stretched, so it does not extend all the way to the right.
When you set the Header, it is inside the TreeViewItem and so cannot extend past it.
I will not post the whole style because it would be way too long.
Here's what to do in Blend:
select your TreeViewItem, right click and chose "Edit Control Parts/Edit a copy". Save the style wherever you want.
Now, in the template, expand the stuff and locate the "Bd" element, which is a border. Change its RowSpan property to "2".
Last, set the "HorizontalContentAlignment" property of your item to "Stretch" (either on the item or through the style if you need to apply that to several nodes).
Your item should now be the correct width.
Now, this only applies to the item you selected. If you want that to work for any item you add to the treeview, you need to change the "ItemContainerStyle" of the Treeview to the newly created style, and remove the style that Blend placed on the TreeViewItem.
Last but not least, you need to set the ItemContainerStyle of your TreeViewItem to that same style so that its children also extend all the way, and so on and so forth.
So in the end, with your example and a child node on the first item:
<Grid x:Name="LayoutRoot">
<TreeView Margin="3,3,3,3" Name="treeView1" Width="300" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemContainerStyle="{DynamicResource TreeViewItemStyle1}">
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
<TreeViewItem>
<TreeViewItem.Header>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0">General</Label>
<Label Grid.Column="1" Grid.Row="0">Img</Label>
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
The "TreeViewItemStyle1" is the style that Blend created for you.
EDIT
as requested, here's the full style as generated by blend and modified. It is long because it basically is a copy of the built-in style with minor modifications.
<Style x:Key="TreeViewItemFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
<Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
<Setter Property="Focusable" Value="False"/>
<Setter Property="Width" Value="16"/>
<Setter Property="Height" Value="16"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border Width="16" Height="16" Background="Transparent" Padding="5,5,5,5">
<Path Fill="Transparent" Stroke="#FF989898" x:Name="ExpandPath" Data="{StaticResource TreeArrow}">
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3"/>
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/>
<Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/>
</Trigger>
<Trigger Property="IsChecked" Value="True">
<Setter Property="RenderTransform" TargetName="ExpandPath">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3"/>
</Setter.Value>
</Setter>
<Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/>
<Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="TreeViewItemStyle1" TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="1,0,0,0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MinWidth="19" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ToggleButton x:Name="Expander" Style="{StaticResource ExpandCollapseToggleStyle}" ClickMode="Press" IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
<Border x:Name="Bd" SnapsToDevicePixels="true" Grid.Column="1" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.ColumnSpan="2">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" x:Name="PART_Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" ContentSource="Header"/>
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="false">
<Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="false">
<Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="true"/>
<Condition Property="IsSelectionActive" Value="false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

See this post for two samples. I just created these today.
Highlight whole TreeViewItem line in WPF