We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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

3 Replies

VR Vijayalakshmi Roopkumar Syncfusion Team November 19, 2019 01:38 PM UTC

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 21st Nov 2019.

 

Regards,

Vijayalakshmi V.R.



VR Vijayalakshmi Roopkumar Syncfusion Team November 21, 2019 01:59 PM UTC

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 5th Dec 2019. You can track the status of the defect using the following link: 
  
  
Regards 
Vijayalakshmi V.R. 



VR Vijayalakshmi Roopkumar Syncfusion Team November 27, 2019 04:19 PM UTC

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: 
 
 
Please try this solution and let us know if it is helpful. 
 
Regards 
Vijayalakshmi V.R. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon