HorizontalAlignment=“Stretch” not working in TreeViewItem

0

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>

c# .net wpf xaml

share|improve this question

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Works fine for me? You must have set some other property also. Are you sure you have given the right code?
  – Kylo Ren
  Feb 22 '16 at 15:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
  – Logan
  Feb 22 '16 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  See my answer or @BradleyUffner's, I think both of them will work
  – Pikoh
  Feb 22 '16 at 15:52
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
  – Pikoh
  Feb 22 '16 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pikoh I'll give it a try now
  – Logan
  Feb 22 '16 at 16:18
  

  
  
  
  

add a comment | 

0

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>

c# .net wpf xaml

share|improve this question

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Works fine for me? You must have set some other property also. Are you sure you have given the right code?
  – Kylo Ren
  Feb 22 '16 at 15:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
  – Logan
  Feb 22 '16 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  See my answer or @BradleyUffner's, I think both of them will work
  – Pikoh
  Feb 22 '16 at 15:52
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
  – Pikoh
  Feb 22 '16 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pikoh I'll give it a try now
  – Logan
  Feb 22 '16 at 16:18
  

  
  
  
  

add a comment | 

0

0

0

1

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>

c# .net wpf xaml

share|improve this question

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

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>

c# .net wpf xaml

c# .net wpf xaml

share|improve this question

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

share|improve this question

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

share|improve this question

share|improve this question

edited Feb 22 '16 at 16:23

edited Feb 22 '16 at 16:23

edited Feb 22 '16 at 16:23

asked Feb 22 '16 at 15:05

Logan

2,09932856

asked Feb 22 '16 at 15:05

Logan

2,09932856

asked Feb 22 '16 at 15:05

Logan

2,09932856

2,09932856

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Works fine for me? You must have set some other property also. Are you sure you have given the right code?
  – Kylo Ren
  Feb 22 '16 at 15:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
  – Logan
  Feb 22 '16 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  See my answer or @BradleyUffner's, I think both of them will work
  – Pikoh
  Feb 22 '16 at 15:52
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
  – Pikoh
  Feb 22 '16 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pikoh I'll give it a try now
  – Logan
  Feb 22 '16 at 16:18
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Works fine for me? You must have set some other property also. Are you sure you have given the right code?
  – Kylo Ren
  Feb 22 '16 at 15:08
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
  – Logan
  Feb 22 '16 at 15:12
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  See my answer or @BradleyUffner's, I think both of them will work
  – Pikoh
  Feb 22 '16 at 15:52
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
  – Pikoh
  Feb 22 '16 at 16:17
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Pikoh I'll give it a try now
  – Logan
  Feb 22 '16 at 16:18
  

  
  
  
  

Works fine for me? You must have set some other property also. Are you sure you have given the right code?
– Kylo Ren
Feb 22 '16 at 15:08

Works fine for me? You must have set some other property also. Are you sure you have given the right code?
– Kylo Ren
Feb 22 '16 at 15:08

If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
– Logan
Feb 22 '16 at 15:12

If you can give me an idea where to look for any extra properties like that, I'd be more than happy to check but this is as much code as I've got. I didn't touch the code behind file either, I just made a new project in VS2015 and slapped this in there. I am using .NET 4.5 if that matters.
– Logan
Feb 22 '16 at 15:12

See my answer or @BradleyUffner's, I think both of them will work
– Pikoh
Feb 22 '16 at 15:52

See my answer or @BradleyUffner's, I think both of them will work
– Pikoh
Feb 22 '16 at 15:52

Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
– Pikoh
Feb 22 '16 at 16:17

Well, in the sample project i've done using the inherited class provided in my answer, it stretches just fine, with the textbox expanded...
– Pikoh
Feb 22 '16 at 16:17

@Pikoh I'll give it a try now
– Logan
Feb 22 '16 at 16:18

@Pikoh I'll give it a try now
– Logan
Feb 22 '16 at 16:18

add a comment | 

3 Answers
3

active

oldest

votes

1

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Almost, but it is stretching off the bounds of the Window.
  – Logan
  Feb 22 '16 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
  – Logan
  Feb 22 '16 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
  – Pikoh
  Feb 22 '16 at 15:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  new solution isn't working for me either...
  – Logan
  Feb 22 '16 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
  – Pikoh
  Feb 22 '16 at 16:32
  

  
  
  
  

 | 
show 3 more comments

2

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
  – Logan
  Feb 22 '16 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
  – Bradley Uffner
  Feb 22 '16 at 16:13
  
  
  

  
  
  
  

add a comment | 

0

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.

share|improve this answer

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
  – Logan
  Feb 22 '16 at 18:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
  – Kylo Ren
  Feb 22 '16 at 18:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
  – Logan
  Feb 23 '16 at 6:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
  – Kylo Ren
  Feb 23 '16 at 7:29
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35556975%2fhorizontalalignment-stretch-not-working-in-treeviewitem%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

1

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Almost, but it is stretching off the bounds of the Window.
  – Logan
  Feb 22 '16 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
  – Logan
  Feb 22 '16 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
  – Pikoh
  Feb 22 '16 at 15:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  new solution isn't working for me either...
  – Logan
  Feb 22 '16 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
  – Pikoh
  Feb 22 '16 at 16:32
  

  
  
  
  

 | 
show 3 more comments

1

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Almost, but it is stretching off the bounds of the Window.
  – Logan
  Feb 22 '16 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
  – Logan
  Feb 22 '16 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
  – Pikoh
  Feb 22 '16 at 15:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  new solution isn't working for me either...
  – Logan
  Feb 22 '16 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
  – Pikoh
  Feb 22 '16 at 16:32
  

  
  
  
  

 | 
show 3 more comments

1

1

1

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

share|improve this answer

share|improve this answer

edited Feb 22 '16 at 15:51

edited Feb 22 '16 at 15:51

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

answered Feb 22 '16 at 15:22

Pikoh

6,7191839

6,7191839

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Almost, but it is stretching off the bounds of the Window.
  – Logan
  Feb 22 '16 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
  – Logan
  Feb 22 '16 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
  – Pikoh
  Feb 22 '16 at 15:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  new solution isn't working for me either...
  – Logan
  Feb 22 '16 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
  – Pikoh
  Feb 22 '16 at 16:32
  

  
  
  
  

 | 
show 3 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Almost, but it is stretching off the bounds of the Window.
  – Logan
  Feb 22 '16 at 15:22
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
  – Logan
  Feb 22 '16 at 15:25
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
  – Pikoh
  Feb 22 '16 at 15:30
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  new solution isn't working for me either...
  – Logan
  Feb 22 '16 at 16:24
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
  – Pikoh
  Feb 22 '16 at 16:32
  

  
  
  
  

Almost, but it is stretching off the bounds of the Window.
– Logan
Feb 22 '16 at 15:22

Almost, but it is stretching off the bounds of the Window.
– Logan
Feb 22 '16 at 15:22

Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
– Logan
Feb 22 '16 at 15:25

Looks like it is causing the grid to stretch constantly. I'm monitoring the grid width and it is increasing very quickly.
– Logan
Feb 22 '16 at 15:25

Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
– Pikoh
Feb 22 '16 at 15:30

Hmm,you're right. I think this is a known issue, and it has no simple solution. I'm trying to find one
– Pikoh
Feb 22 '16 at 15:30

new solution isn't working for me either...
– Logan
Feb 22 '16 at 16:24

new solution isn't working for me either...
– Logan
Feb 22 '16 at 16:24

Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
– Pikoh
Feb 22 '16 at 16:32

Ok, you must add HorizontalContentAlignment="Stretch" to the local:StretchingTreeViewItem tag
– Pikoh
Feb 22 '16 at 16:32

 | 
show 3 more comments

2

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
  – Logan
  Feb 22 '16 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
  – Bradley Uffner
  Feb 22 '16 at 16:13
  
  
  

  
  
  
  

add a comment | 

2

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
  – Logan
  Feb 22 '16 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
  – Bradley Uffner
  Feb 22 '16 at 16:13
  
  
  

  
  
  
  

add a comment | 

2

2

2

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

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>

share|improve this answer

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

share|improve this answer

share|improve this answer

edited Feb 22 '16 at 15:51

edited Feb 22 '16 at 15:51

edited Feb 22 '16 at 15:51

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

answered Feb 22 '16 at 15:39

Bradley Uffner

13.1k22650

13.1k22650

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
  – Logan
  Feb 22 '16 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
  – Bradley Uffner
  Feb 22 '16 at 16:13
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
  – Logan
  Feb 22 '16 at 16:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
  – Bradley Uffner
  Feb 22 '16 at 16:13
  
  
  

  
  
  
  

This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
– Logan
Feb 22 '16 at 16:05

This seems to work for the TreeViewItem's header itself, but not for its contents. I'll update OP with pictures.
– Logan
Feb 22 '16 at 16:05

I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
– Bradley Uffner
Feb 22 '16 at 16:13

I've used this in the past and it's always worked for me, though I've never had anything more complicated than a simple textblock inside the items. It might be due to your more complex layout needs. If you use something that allows you to inspect the live elements, like Snoop, does it show the item template taking the full width?
– Bradley Uffner
Feb 22 '16 at 16:13

add a comment | 

0

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.

share|improve this answer

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
  – Logan
  Feb 22 '16 at 18:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
  – Kylo Ren
  Feb 22 '16 at 18:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
  – Logan
  Feb 23 '16 at 6:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
  – Kylo Ren
  Feb 23 '16 at 7:29
  

  
  
  
  

add a comment | 

0

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.

share|improve this answer

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
  – Logan
  Feb 22 '16 at 18:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
  – Kylo Ren
  Feb 22 '16 at 18:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
  – Logan
  Feb 23 '16 at 6:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
  – Kylo Ren
  Feb 23 '16 at 7:29
  

  
  
  
  

add a comment | 

0

0

0

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.

share|improve this answer

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

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.

share|improve this answer

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

share|improve this answer

share|improve this answer

edited Feb 23 '16 at 7:29

edited Feb 23 '16 at 7:29

edited Feb 23 '16 at 7:29

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

answered Feb 22 '16 at 18:47

Kylo Ren

5,17122244

5,17122244

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
  – Logan
  Feb 22 '16 at 18:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
  – Kylo Ren
  Feb 22 '16 at 18:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
  – Logan
  Feb 23 '16 at 6:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
  – Kylo Ren
  Feb 23 '16 at 7:29
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
  – Logan
  Feb 22 '16 at 18:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
  – Kylo Ren
  Feb 22 '16 at 18:55
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
  – Logan
  Feb 23 '16 at 6:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
  – Kylo Ren
  Feb 23 '16 at 7:29
  

  
  
  
  

Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
– Logan
Feb 22 '16 at 18:50

Hmmm. I did try it in 4.6.1 and 3.5 but I didn't try 4. I'll try again tomorrow in the morning, I might be able to get away with this assembly building in 4. Will the fact that the rest of my app be in 4.5 have any effect?
– Logan
Feb 22 '16 at 18:50

@Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
– Kylo Ren
Feb 22 '16 at 18:55

@Logan no it should cause any compatibility issue. but I'm not so sure that you will able to solve your problem like that.Cause at the runtime app will be using WPF components from 4.5(just an assumption) :(... it's better you handle it with a code or binding.
– Kylo Ren
Feb 22 '16 at 18:55

I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
– Logan
Feb 23 '16 at 6:45

I just tried in .NET 4 and it still doesn't work... interesting, perhaps it is environmental for you? Also. the binding causes the treeview to get stuck in a loop of expanding, because it expands its size based on contents and the contents keep growing as the treeview expands.
– Logan
Feb 23 '16 at 6:45

@Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
– Kylo Ren
Feb 23 '16 at 7:29

@Logan If you don;t want it to expand, you can set the mode to Mode=OneTime
– Kylo Ren
Feb 23 '16 at 7:29

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35556975%2fhorizontalalignment-stretch-not-working-in-treeviewitem%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here