How do I stretch the row on a tree view? Changing the Horizontal Content Alignment doesn't work

[Mark]

I have a TreeViewAdv and populated it. There's a problem though because the rows doesn't stretch horizontally to fill the entire TreeViewAdv. This happened to me on a regular TreeView and the fix was to set the default TreeViewItem's 'Horizontal Content' to 'Stretch'. Unfortunately I don't know how to do this with a TreeViewAdv. I've uploaded a winrar file containing the image of what my TreeViewAdv currently looks like and what I wanted it to look like.

Here's my data template in case you were wondering:

        <Grid>

            <Grid.ColumnDefinitions>

                <ColumnDefinition Width="*"/>

                <ColumnDefinition Width="60" MaxWidth="60"/>

                <ColumnDefinition Width="70" MaxWidth="70"/>

                <ColumnDefinition Width="80" MaxWidth="80"/>

                <ColumnDefinition Width="50" MaxWidth="50"/>

            </Grid.ColumnDefinitions>

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto" MinHeight="36"/>

            </Grid.RowDefinitions>

            <TextBlock HorizontalAlignment="Left" TextWrapping="Wrap" Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Margin="20,0,0,0" Foreground="{DynamicResource BlueGray.Dark.B}" Height="15"/>

            <TextBlock Grid.Column="1" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding Quantity, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Foreground="{DynamicResource BlueGray.Dark.B}"/>

            <TextBlock Grid.Column="2" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding UnitPrice, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Foreground="{DynamicResource BlueGray.Dark.B}"/>

            <TextBlock Grid.Column="3" HorizontalAlignment="Right" TextWrapping="Wrap" Text="{Binding UnitPriceAmount, UpdateSourceTrigger=PropertyChanged}" VerticalAlignment="Center" Foreground="{DynamicResource BlueGray.Dark.B}"/>

            <Button local:Extensions.PathData="{DynamicResource TrashCan.1}" local:Extensions.PathWidth="8" Grid.Column="4" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" Width="22" Style="{DynamicResource StandardButtonStyle}" Foreground="{DynamicResource Red.Default.B}" Height="22" FontSize="10"/>

        </Grid>

Attachment: TreeViewAdv_4d2b2d82.rar

[Vijayalakshmi Roopkumar]

Hi Mark,

 

Thank you for contacting Syncfusion Support.

 

We have checked the reported case “Horizontal Content Alignment is not working for Stretch “ with TreeViewAdv using our simple sample and we were able to reproduce it this behavior. We are currently validating this behavior and analyzing any workable solution . We will check and update you the details on or before 21^st Nov 2019.

 

Regards,

Vijayalakshmi V.R.

[Vijayalakshmi Roopkumar]

Hi Mark, 

  

Thank you for your patience. 

  

On further analysis on the reported behavior with TreeViewAdv, we have confirmed the “HorizontalContentAlignment property is not working properly for Stretch value in TreeViewAdv” is a defect and logged a defect report on this. The patch for this fix is estimated to be available on 5^th Dec 2019. You can track the status of the defect using the following link: 

  

Link: https://www.syncfusion.com/feedback/10317/horizontalcontentalignment-propertyi-is-not-working-properly-for-stretch-value-in 

  

Regards 

Vijayalakshmi V.R. 

[Vijayalakshmi Roopkumar]

Hi Mark, 

 

Thank you for your patience. 

 

On working on the reported issue, it the stretch property is not working fine with TreeViewAdv and it leads to some improper layout on fixing the issue. So we can achieve your requirement  by enabling multi column and adding Hierarchical data template to the data that’s need to bind the columns then values as need to appear. Please find the XAML code below and screenshot for further reference.  

 

Code:[XAML] 

 

 

<syncfusion:TreeViewAdv x:Name="Tree" ItemsSource ="{Binding Items, Mode=TwoWay}" MultiColumnEnable="True" > 

<syncfusion:TreeViewAdv.DataContext> 

<local:ViewModel/> 

</syncfusion:TreeViewAdv.DataContext> 

 

<syncfusion:TreeViewAdv.ItemTemplate> 

<HierarchicalDataTemplate ItemsSource="{Binding Models}"> 

<ContentControl Content="{Binding}"/> 

</HierarchicalDataTemplate> 

</syncfusion:TreeViewAdv.ItemTemplate> 

 

<syncfusion:TreeViewAdv.Columns> 

<syncfusion:TreeViewColumnCollection> 

<syncfusion:TreeViewColumn Width="300" Header="Name"> 

<syncfusion:TreeViewColumn.CellTemplate> 

<DataTemplate> 

<TextBlock Text="{Binding Name}"/> 

</DataTemplate> 

</syncfusion:TreeViewColumn.CellTemplate> 

</syncfusion:TreeViewColumn> 

<syncfusion:TreeViewColumn MinWidth="60" Header="Quantity"> 

<syncfusion:TreeViewColumn.CellTemplate> 

<DataTemplate> 

<TextBlock Text="{Binding Quantity}" HorizontalAlignment="Center"/> 

</DataTemplate> 

</syncfusion:TreeViewColumn.CellTemplate> 

</syncfusion:TreeViewColumn> 

<syncfusion:TreeViewColumn MinWidth="60" Header="UnitPrice"> 

<syncfusion:TreeViewColumn.CellTemplate> 

<DataTemplate> 

<TextBlock Text="{Binding UnitPrice}"/> 

</DataTemplate> 

</syncfusion:TreeViewColumn.CellTemplate> 

</syncfusion:TreeViewColumn> 

<syncfusion:TreeViewColumn MinWidth="100" Header="UnitPriceAmount"> 

<syncfusion:TreeViewColumn.CellTemplate> 

<DataTemplate> 

<TextBlock Text="{Binding UnitPriceAmount}"/> 

</DataTemplate> 

</syncfusion:TreeViewColumn.CellTemplate> 

</syncfusion:TreeViewColumn> 

</syncfusion:TreeViewColumnCollection> 

</syncfusion:TreeViewAdv.Columns> 

</syncfusion:TreeViewAdv> 

 

 

 

Screenshot: 

 

 

 

 

We have also attached the sample for your reference. Please download it from following location: 

 

Sample: https://www.syncfusion.com/downloads/support/forum/149202/ze/TreeViewAdv_Stretch1430230343 

 

Please try this solution and let us know if it is helpful. 

 

Regards 

Vijayalakshmi V.R.