UWP Scale textblock inside treeview - text wrapping

Question

Can please anyone help, I am working on a UWP app and I want TextBlock to wrap the text inside it according to window width. That Textblock is inside Grid which is inside TreeView.

Now when I resize my app window it doesn't do anything.

Original:

Resized:

I want it to look like this and don't have fixed width but to change dynamically with window:

This is my XAML code:

    <TreeView Name="ItemsTreeView" SelectionMode="Multiple" ItemsSource="{x:Bind DataSource}" CanReorderItems="False" CanDrag="False" CanDragItems="False" AllowDrop="False" Margin="0,40,0,0">
        <TreeView.ItemTemplate>
            <DataTemplate x:DataType="local:Item">
                <TreeViewItem ItemsSource="{x:Bind Children}" Background="{ThemeResource SystemAltMediumLowColor}" HorizontalAlignment="Stretch">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <Image Source="{Binding Image}" Grid.Column="0" Margin="0 5 10 5"  Width="50" Height="40"></Image>
                        <TextBlock Text="{Binding Name}" Grid.Column="1" VerticalAlignment="Center" Width="500" TextWrapping="Wrap"/>
                    </Grid>
                </TreeViewItem>
            </DataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>

Faywang - MSFT Faywang - MSFT · Accepted Answer · 2020-01-19T03:31:19

If you want to wrap the TextBlock and change dynamically with window, you need to modify the Style of TreeViewItem. In the Style of TreeViewItem, it uses StackPanel as the parent panel, its width is based on the child controls. So we need to change StackPanel to Grid, and add a three-column layout in the Grid(the Grid'sname is "MultiSelectGrid"), like below. For the orginal complete style, you can copy it from generic.xaml.

<Page.Resources>
        <Style TargetType="TreeViewItem" BasedOn="{StaticResource ListViewItemRevealStyle}" x:Key="MyTreeViewItemStyle">
            <Setter Property="Padding" Value="0" />
            ......
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TreeViewItem">
                        <Grid x:Name="ContentPresenterGrid" Margin="0,0,0,0" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{TemplateBinding CornerRadius}">
                            <VisualStateManager.VisualStateGroups>
                                ......
                            </VisualStateManager.VisualStateGroups>

                            <Grid x:Name="MultiSelectGrid">
                                <Grid  VerticalAlignment="Stretch" ......>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                        <ColumnDefinition Width="Auto"></ColumnDefinition>
                                        <ColumnDefinition Width="*"></ColumnDefinition>
                                    </Grid.ColumnDefinitions>
                                    <Grid>
                                        <Grid.Resources>
                                            ......
                                        </Grid.Resources>
                                        ......
                                    </Grid>

                                    <Grid x:Name="ExpandCollapseChevron" Grid.Column="1"
                                      Padding="12,0,12,0"
                                      Width="Auto"
                                      Opacity="{TemplateBinding GlyphOpacity}"
                                      Background="Transparent">
                                        ......
                                    </Grid >

                                    <ContentPresenter Grid.Column="2"  x:Name="ContentPresenter"
                                ContentTransitions="{TemplateBinding ContentTransitions}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Content="{TemplateBinding Content}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Margin="{TemplateBinding Padding}" />
                                </Grid>

                            </Grid>

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
</Page.Resources>

Usage:

.xaml:

......
<DataTemplate x:DataType="local:ItemTemplate">
    <TreeViewItem Style="{StaticResource MyTreeViewItemStyle}" ItemsSource="{x:Bind Children}" Margin="0"  Background="{ThemeResource SystemAltMediumLowColor}" HorizontalAlignment="Stretch">
    ......
    </TreeViewItem>
</DataTemplate>
......

UWP Scale textblock inside treeview - text wrapping

1 Answers