Style ListBoxItem to use complete width of parent element [duplicate]

Style ListBoxItem to use complete width of parent element [duplicate] - c#

I have a grid as the datatemplate for items in a listbox and it's not filling the whole width of the control. I have tried the suggestions in the other questions but they are not working:
This is the listbox xaml
<ListBox ItemsSource="{Binding AccessControl.Credentials}" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0">Name</Label>
<Label Grid.Column="0" Grid.Row="1">Attribute</Label>
<Label Grid.Column="2" Grid.Row="1">Value</Label> </Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and I am using a theme file from the following project: http://wpfthemes.codeplex.com/ here is the relevant part:
<Style TargetType="{x:Type ListBox}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.CanContentScroll" Value="True" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Trebuchet MS" />
<Setter Property="FontSize" Value="12" />
<Setter Property="BorderBrush" Value="{DynamicResource ControlBorderBrush}" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="Padding" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBox}">
<Grid>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="1" Background="{DynamicResource ControlBackgroundBrush}">
<ScrollViewer Margin="1" Focusable="false" Foreground="{TemplateBinding Foreground}">
<StackPanel Margin="2" IsItemsHost="true" />
</ScrollViewer>
</Border>
<Border x:Name="DisabledVisualElement" IsHitTestVisible="false" Background="#A5FFFFFF" BorderBrush="#66FFFFFF" BorderThickness="1" Opacity="0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Opacity" TargetName="DisabledVisualElement" Value="1" />
</Trigger>
<Trigger Property="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Did I miss something?

You need to make the ListBoxItems stretch their content, either by changing the respective property on the ListBox:
<ListBox HorizontalContentAlignment="Stretch" ...>
...or by setting it on the items via the ItemContainerStyle:
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
By default both will work as the ListBoxItem default style binds the HorizontalContentAlignment property to the owning ListBox's property.

Related

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>

HorizontalAlignment="Stretch" not working in TreeViewItem

Here's an example where it is not working:
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication2"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<TreeView HorizontalAlignment="Stretch">
<TreeViewItem Header="Stuff" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
</Window>
I want the text box to stretch to the width of the window, but instead you get this:
The textbox expands as you type, which is not what I want.
I am thinking now it might be possible to set a binding on the width of the 2nd column to the width of the TreeViewItem but I'm not sure how to do that.
I've tried putting the grid in assorted panels, but that doesn't work either. I have also set the HorizontalAlignment and HorizontalContentAlignment to Stretch on the textbox itself, but that also doesn't work.
Is this some limitation of the Grid control? Putting a textbox in a tree view by itself will make it expand as I want, but I need the label to be next to it and if there are multiple fields it looks MUCH better if all the textboxes are aligned.
UPDATE
Using a different ControlTemplate allows headers to stretch but contents still don't stretch.
<TreeView HorizontalAlignment="Stretch">
<TreeViewItem Style="{DynamicResource StretchableTreeViewItemTemplate}" HorizontalAlignment="Stretch" Header="Stuff">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" HorizontalAlignment="Stretch"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
<Style x:Key="StretchableTreeViewItemTemplate" TargetType="TreeViewItem"
BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!--
Note that the following do not work, but I believe the top 2 should?!
<ToggleButton IsChecked="{TemplateBinding IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Property=IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Path=IsExpanded}" ClickMode="Press" Name="Expander">
-->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable"
Value="false" />
<Setter Property="FrameworkElement.Width"
Value="16" />
<Setter Property="FrameworkElement.Height"
Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5"
Background="#00FFFFFF"
Width="16"
Height="16">
<Path Fill="#00FFFFFF"
Stroke="#FF989898"
Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135"
CenterX="3"
CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver"
Value="True">
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="True">
<Setter TargetName="ExpandPath"
Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180"
CenterX="3"
CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#FF595959" />
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded"
Value="False">
<Setter TargetName="ItemsHost"
Property="UIElement.Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems"
Value="False">
<Setter TargetName="Expander"
Property="UIElement.Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected"
Value="True">
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected"
Value="True" />
<Condition Property="Selector.IsSelectionActive"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Results:
Trying with Pikoh's solution:
<local:StretchingTreeView HorizontalAlignment="Stretch">
<local:StretchingTreeViewItem HorizontalAlignment="Stretch" Header="Stuff">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" HorizontalAlignment="Stretch"></TextBox>
</Grid>
</local:StretchingTreeViewItem>
</local:StretchingTreeView>

Try something like this:
<TextBox Grid.Column="1" Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType={x:Type Grid}}, Mode=OneWay}"></TextBox>
Edit
Ok,i've found one solution Here. It basically creates a new class inheriting Treeview:
class StretchingTreeView : TreeView
{
protected override DependencyObject GetContainerForItemOverride()
{
return new StretchingTreeViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is StretchingTreeViewItem;
}
}
class StretchingTreeViewItem : TreeViewItem
{
public StretchingTreeViewItem()
{
this.Loaded += new RoutedEventHandler(StretchingTreeViewItem_Loaded);
}
private void StretchingTreeViewItem_Loaded(object sender, RoutedEventArgs e)
{
// The purpose of this code is to stretch the Header Content all the way accross the TreeView.
if (this.VisualChildrenCount > 0)
{
Grid grid = this.GetVisualChild(0) as Grid;
if (grid != null && grid.ColumnDefinitions.Count == 3)
{
// Remove the middle column which is set to Auto and let it get replaced with the
// last column that is set to Star.
grid.ColumnDefinitions.RemoveAt(1);
}
}
}
protected override DependencyObject GetContainerForItemOverride()
{
return new StretchingTreeViewItem();
}
protected override bool IsItemItsOwnContainerOverride(object item)
{
return item is StretchingTreeViewItem;
}
}
Example usage:
<Window x:Class="WpfApplication2.Window2"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication2"
Title="Window2" Height="300" Width="300">
<Grid>
<local:StretchingTreeView HorizontalAlignment="Stretch" >
<local:StretchingTreeViewItem Header="Stuff" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" >
<Grid HorizontalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1" ></TextBox>
</Grid>
</local:StretchingTreeViewItem>
</local:StretchingTreeView>
</Grid>

The core of the issue (and the way to fix it) is described here:
The default ControlTemplate for the TreeViewItem uses a grid of 3 columns x 2 rows, defined such that the content cannot stretch horizontally. The author also gives a modified style, that changes the grid so that the content can stretch.
Note that the modified style sets the HorizontalContentAlignment of TreeViewItem to Center, and that the ControlTemplate uses this property for aligning the content.
To achieve the desired effect, either set HorizontalContentAlignment to Stretch in the modified style, or override just that property on the TreeView (or specific TreeViewItems).
Missing the BasedOn="{StaticResource {x:Type TreeViewItem}}" part causes the TreeViewItem to revert to using the default ControlTemplate, with the non-stretchable grid.
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
In a HierarchicalDataTemplate, the effect would be achieved by using the ItemContainerStyle property.
#pikoh's method of deriving from TreeView and TreeViewItem achieves the same, by modifying the grid from code.
Complete example:
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!-- Note that the following do not work, but I believe the top 2 should?! -->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" ClickMode="Press" Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable" Value="false" />
<Setter Property="FrameworkElement.Width" Value="16" />
<Setter Property="FrameworkElement.Height" Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5" Background="#00FFFFFF" Width="16" Height="16">
<Path Fill="#00FFFFFF" Stroke="#FF989898" Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135" CenterX="3" CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver" Value="True">
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="ExpandPath" Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180" CenterX="3" CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath" Property="Shape.Fill" Value="#FF595959" />
<Setter TargetName="ExpandPath" Property="Shape.Stroke" Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded" Value="False">
<Setter TargetName="ItemsHost" Property="UIElement.Visibility" Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems" Value="False">
<Setter TargetName="Expander" Property="UIElement.Visibility" Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected" Value="True">
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected" Value="True" />
<Condition Property="Selector.IsSelectionActive" Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd" Property="Panel.Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<TreeView HorizontalAlignment="Stretch">
<TreeView.Resources>
<Style TargetType="TreeViewItem" BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</TreeView.Resources>
<TreeViewItem Header="Stuff" HorizontalAlignment="Stretch">
<Grid HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0">Some random text</Label>
<TextBox Grid.Column="1"></TextBox>
</Grid>
</TreeViewItem>
</TreeView>
</Window>

Due to an odd design decision by Microsoft when creating WPF, tree items can't stretch without replacing the control template.
See http://leecampbell.blogspot.com/2009/01/horizontal-stretch-on-treeviewitems.html
The required style is:
<Style TargetType="TreeViewItem"
BasedOn="{StaticResource {x:Type TreeViewItem}}">
<Setter Property="HorizontalContentAlignment"
Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem">
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"
MinWidth="19" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<!--
Note that the following do not work, but I believe the top 2 should?!
<ToggleButton IsChecked="{TemplateBinding IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Property=IsExpanded}" ClickMode="Press" Name="Expander">
<ToggleButton IsChecked="{TemplateBinding Path=IsExpanded}" ClickMode="Press" Name="Expander">
-->
<ToggleButton IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press"
Name="Expander">
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="UIElement.Focusable"
Value="false" />
<Setter Property="FrameworkElement.Width"
Value="16" />
<Setter Property="FrameworkElement.Height"
Value="16" />
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Border Padding="5,5,5,5"
Background="#00FFFFFF"
Width="16"
Height="16">
<Path Fill="#00FFFFFF"
Stroke="#FF989898"
Name="ExpandPath">
<Path.Data>
<PathGeometry Figures="M0,0L0,6L6,0z" />
</Path.Data>
<Path.RenderTransform>
<RotateTransform Angle="135"
CenterX="3"
CenterY="3" />
</Path.RenderTransform>
</Path>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="UIElement.IsMouseOver"
Value="True">
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF1BBBFA" />
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#00FFFFFF" />
</Trigger>
<Trigger Property="ToggleButton.IsChecked"
Value="True">
<Setter TargetName="ExpandPath"
Property="UIElement.RenderTransform">
<Setter.Value>
<RotateTransform Angle="180"
CenterX="3"
CenterY="3" />
</Setter.Value>
</Setter>
<Setter TargetName="ExpandPath"
Property="Shape.Fill"
Value="#FF595959" />
<Setter TargetName="ExpandPath"
Property="Shape.Stroke"
Value="#FF262626" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ToggleButton.Style>
</ToggleButton>
<Border x:Name="Bd"
HorizontalAlignment="Stretch"
BorderThickness="{TemplateBinding Border.BorderThickness}"
BorderBrush="{TemplateBinding Border.BorderBrush}"
Padding="{TemplateBinding Control.Padding}"
Background="{TemplateBinding Panel.Background}"
SnapsToDevicePixels="True"
Grid.Column="1">
<ContentPresenter x:Name="PART_Header"
Content="{TemplateBinding HeaderedContentControl.Header}"
ContentTemplate="{TemplateBinding HeaderedContentControl.HeaderTemplate}"
ContentStringFormat="{TemplateBinding HeaderedItemsControl.HeaderStringFormat}"
ContentTemplateSelector="{TemplateBinding HeaderedItemsControl.HeaderTemplateSelector}"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding UIElement.SnapsToDevicePixels}" />
</Border>
<ItemsPresenter x:Name="ItemsHost"
Grid.Column="1"
Grid.Row="1" />
</Grid>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.IsExpanded"
Value="False">
<Setter TargetName="ItemsHost"
Property="UIElement.Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="ItemsControl.HasItems"
Value="False">
<Setter TargetName="Expander"
Property="UIElement.Visibility"
Value="Hidden" />
</Trigger>
<Trigger Property="TreeViewItem.IsSelected"
Value="True">
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" />
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="TreeViewItem.IsSelected"
Value="True" />
<Condition Property="Selector.IsSelectionActive"
Value="False" />
</MultiTrigger.Conditions>
<Setter TargetName="Bd"
Property="Panel.Background"
Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
</MultiTrigger>
<Trigger Property="UIElement.IsEnabled"
Value="False">
<Setter Property="TextElement.Foreground"
Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

It seems like Grid's HorizontalAlignment Issue. I've tried it in .Net Framework 4 and it all works fine. Seems like in 4.5 even though you specify HorizontalAlignment as Stretch, it actually doesn't stretch it. So you can do a binding like below:
<Grid HorizontalAlignment="Stretch"
Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type TreeViewItem}},Path=ActualWidth,Mode=OneTime}"
>
Cause you can see in the run time that TreeViewItem has Width expected but Grid doesn't.

All you need to do is add Grid.ColumnSpan='2' to the ControlTemplate of the TreeViewItem as shown below.
Thats it!
Explanation:
The default ControlTemplate places the Header Content in a Grid column that does not stretch. The Grid.ColumnSpan='2' instructs the Header content to span to the rest of the Grid.

ControlTemplate Bind to ToolTip property from button

I want to add some text next to my button, but I want to use the tooltip for this text or better yet another tag I can add within the controls properties.
Then I want to reference this tag within my ControlTemplate so it will add the text next to my button, here is my button XAML:
<Button Style="{StaticResource MainMenuButton}" ToolTip="Home" Content="" />
And here is my Style:
<Style x:Key="MainMenuButton" TargetType="Button">
<Setter Property="FontFamily" Value="{StaticResource FontAwesome}" />
<Setter Property="FontSize" Value="27" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Background" Value="#545863" />
<Setter Property="Padding" Value="15" />
<Setter Property="Margin" Value="5" />
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid x:Name="grid">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border Grid.Column="0" x:Name="border"
CornerRadius="40"
BorderThickness="0"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
Margin="{TemplateBinding Margin}">
<ContentPresenter HorizontalAlignment="Center"
VerticalAlignment="Center"
TextElement.FontWeight="Bold" />
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Center">
<TextBlock Text="{Binding RelativeSource={RelativeSource Self}, Path=DataContex.ToolTip}"
FontSize="16"/>
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#757b8d" />
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Background" Value="#29a1d5" />
</Trigger>
</Style.Triggers>
</Style>
The code I have there now doesn't work: {Binding RelativeSource={RelativeSource Self}, Path=DataContex.ToolTip}.

Woopps, found the solution. Was far too simple and I expected it be more complicated.
<TextBlock Text="{TemplateBinding Tag}" FontSize="16"/>

How to make WPF ListView horizontal with contained image stretched to fit the height?

I want a gallery that shows images with labels in a horizontal ListView.
Each list item is merely an image with a label:
<DataTemplate x:Key="ImageItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
To make the ListView horizontal, I replace the ListView.ItemsPanel with a horizontal StackPanel:
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
Now I got something like this:
But I want each image to stretch to take the full height of the ListView (minus enough height for the label), while maintaining the aspect ratio, so I replace the ListView.ItemContainerStyle:
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
But I have no idea why the width of each item is not stretched but instead cut:
Please help, thanks!
EDIT:
The whole xaml is shown as follows:
<UserControl x:Class="Test.ImageGalleryControl"
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"
mc:Ignorable="d">
<UserControl.Resources>
<DataTemplate x:Key="ImageItemTemplate">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListView x:Name="MyImageList" ItemTemplate="{StaticResource ImageItemTemplate}">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
</Grid>
</UserControl>

Try this
by setting ListView height to Itemtemplate (grid).
<ListView x:Name="MyImageList">
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="VerticalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Update
by setting VerticalScrollBarVisibility="Hidden" or disabled and adding margin you can solve this problem but proper solution is below
this verticalscrollbar is coming due to default margin and padding in Listview and ListviewItem default style..you can achieve desired result by editing style of listview and listviewItem
working sample(without vertical scrollbar)
Resource
<Window.Resources>
<Style TargetType="{x:Type ListView}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="#FFABADB3"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
<Setter Property="ScrollViewer.PanningMode" Value="Both"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="False"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListView}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" Height="{TemplateBinding Height}" BorderThickness="0" Background="{TemplateBinding Background}" Padding="0" SnapsToDevicePixels="True">
<ScrollViewer Focusable="False" Padding="0" >
<ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</ScrollViewer>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" TargetName="Bd" Value="White"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFD9D9D9"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsGrouping" Value="True"/>
<Condition Property="VirtualizingPanel.IsVirtualizingWhenGrouping" Value="False"/>
</MultiTrigger.Conditions>
<Setter Property="ScrollViewer.CanContentScroll" Value="False"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="SnapsToDevicePixels" Value="True"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorLevel=1, AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style>
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle Margin="2" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Background="{TemplateBinding Background}" Margin="0,-1,5,-1" SnapsToDevicePixels="True">
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#1F26A0DA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#A826A0DA"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="False"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#3DDADADA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FFDADADA"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
<Condition Property="IsSelected" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="#3D26A0DA"/>
<Setter Property="BorderBrush" TargetName="Bd" Value="#FF26A0DA"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="TextElement.Foreground" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
window
<ListView x:Name="MyImageList">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh"/>
</Grid>
<Grid Height="{Binding ElementName=MyImageList,Path=ActualHeight}">
<Grid.RowDefinitions>
<RowDefinition Height="4*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="Screenshot_3.png" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="fghfgh"/>
</Grid>
</ListView>

Try now to change the stretch property. Hmm, can't add the code somewhy...
try setting Stretch="Uniform" to the image
<Image Grid.Row="0" Source="{Binding Image}" Stretch="Uniform" />

<Image Grid.Row="0" Source="{Binding Image}" Stretch="Fill" />
but, it will not maintain the aspect ratio of the image, Use Stretch="Uniform" to keep the aspect ratio regardless the size of the image control.
You can statically specify the Height of the image control and use Stretch="Uniform" to adjust both aspect ratio and the size of the image control.

a simple solution using ItemsControl
<Grid>
<Grid.Resources>
<DataTemplate x:Key="ImageItemTemplate">
<Grid Height="{Binding ActualHeight,RelativeSource={RelativeSource FindAncestor,AncestorType=ItemsControl}}"
Margin="2,2,2,-25"
VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="{Binding Image}" Stretch="UniformToFill" />
<Label Grid.Row="1" Content="{Binding Title}" />
</Grid>
</DataTemplate>
</Grid.Resources>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Hidden">
<ItemsControl x:Name="MyImageList"
ItemTemplate="{StaticResource ImageItemTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
</Grid>

"a simple solution using ItemsControl" by #pushpraj really helped me after a prolonged search for a similar feature. I'm new to WPF but still tried with ListView and Ribbon with ItemsControl templates, but didnt get the result that I wanted. A small alteration to fit my requirement, I made the Image stretch to uniform, Stretch="Uniform". Thanks for the blog.

How to change Datagrid row background when clicking on togglebutton inside rowheader?

I am overriding DataGrid row header style, and I’m been hindered with the following two issues:
1.The DataGrid row header contains an Image and a ToggleButton. When the ToggleButton is ‘Checked’ I want to change the background color of the whole row, however I only managed to change the background of the row header and couldn’t figure out a way to fire a trigger on the row level.
2.When a row is selected the row and the header background is set to different background, the other way around does not work. What I need to do is to change the background of the row when the row header is selected
Here is a the style code of the DataGridRowHeader
<Style x:Key="{x:Type DataGridRowHeader}" TargetType="{x:Type DataGridRowHeader}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRowHeader}">
<Grid>
<Border Name="RowHeaderBorder"
BorderThickness="0,0,3,0"
Margin="0,0,0,0"
BorderBrush="{StaticResource DataGridRowBorder}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding ImageSource}" RenderOptions.BitmapScalingMode="HighQuality" Stretch="None" VerticalAlignment="Center" HorizontalAlignment="Center"/>
<ToggleButton x:Name="tglButton" Visibility="{Binding ActiveCall}" Grid.Column="1" Content="Button" Focusable="True" BorderThickness="1" Width="80" Height="33" VerticalAlignment="Top" >
</ToggleButton>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}" Value="true">
<Setter Property="Background" TargetName="RowHeaderBorder" Value ="Green"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And here is the style of the DataGridRow:
<Style x:Key="DataGridRowStyle" TargetType="{x:Type DataGridRow}">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="{StaticResource DataGridRowBorder}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Background" Value="{StaticResource DataGridRowHoveredBackground}" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="true">
<Setter Property="Foreground" Value="Black"/>
<Setter Property="Background" Value="{StaticResource RowBackgroundSelectedBrush2}" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0" BlurRadius="20"/>
</Setter.Value>
</Setter>
</Trigger>
<DataTrigger Binding="{Binding ElementName=DataGridRowHeader.tglButton, Path=IsChecked}" Value="true">
<Setter Property="Background" Value ="Green"/>
</DataTrigger>
</Style.Triggers>
</Style>

This is because tglButton is present in the row header, which is a child of the DataGridRow. A trigger defined in child row header is trying to update a property of the parent (DataGridRow) and is not able to find it.
One solution for this is to define the template for DataGridRowHeader inside the template for DataGridRow and supply a name for it, which can be used in the trigger. A very crude example:
<Style
TargetType="{x:Type DataGridRow}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridRow}">
<Border x:Name="DGR_Border"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
SnapsToDevicePixels="True"
CornerRadius="8,8,8,8">
<SelectiveScrollingGrid>
<SelectiveScrollingGrid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</SelectiveScrollingGrid.ColumnDefinitions>
<SelectiveScrollingGrid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</SelectiveScrollingGrid.RowDefinitions>
<DataGridCellsPresenter Grid.Column="1"
ItemsPanel="{TemplateBinding ItemsPanel}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
<DataGridDetailsPresenter Grid.Column="1"
Grid.Row="1"
SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen,
ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical},
Converter={x:Static DataGrid.RowDetailsScrollingConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"
Visibility="{TemplateBinding DetailsVisibility}" />
<DataGridRowHeader Name="RHeader" Grid.RowSpan="2"
SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
Visibility="{Binding HeadersVisibility,
ConverterParameter={x:Static DataGridHeadersVisibility.Row},
Converter={x:Static DataGrid.HeadersVisibilityConverter},
RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ToggleButton x:Name="tglButton"
Grid.Column="1"
Content="Button"
Focusable="True"
BorderThickness="1"
Width="80"
Height="33"
VerticalAlignment="Top">
</ToggleButton>
</Grid>
</DataGridRowHeader>
</SelectiveScrollingGrid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter TargetName="DGR_Border"
Property="Background"
Value="Gray" />
</Trigger>
<DataTrigger Binding="{Binding ElementName=tglButton, Path=IsChecked}"
Value="true">
<Setter Property="Background"
TargetName="RHeader"
Value="Green" />
<Setter Property="Background"
Value="Green" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="DataContext"
Value="{Binding RelativeSource={RelativeSource Self}}" />
<Setter Property="BorderThickness"
Value="1" />
<Setter Property="BorderBrush"
Value="Aqua" />
<Style.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter Property="Foreground"
Value="Black" />
<Setter Property="Background"
Value="Pink" />
<Setter Property="FontWeight"
Value="Bold" />
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect ShadowDepth="0"
BlurRadius="20" />
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>

We Keep Coding

C# (C-Sharp) is a programming language developed by Microsoft that runs on the .NET Framework.

Style ListBoxItem to use complete width of parent element [duplicate] - c#

Related

ControlTemplate DataGridColumnHeader control visible outside columns

HorizontalAlignment="Stretch" not working in TreeViewItem

ControlTemplate Bind to ToolTip property from button

How to make WPF ListView horizontal with contained image stretched to fit the height?

How to change Datagrid row background when clicking on togglebutton inside rowheader?

Categories

Resources