Treeview中的UWP缩放文本块-文本环绕

Question

[任何人都可以帮忙，我正在开发UWP应用，我希望TextBlock根据窗口宽度将文本包装在其中。该文本块位于TreeView内的Grid内。

现在，当我调整应用程序窗口的大小时，它什么也没做。

原件：

调整大小：

我希望它看起来像这样，并且没有固定的宽度，而是随窗口动态变化：

这是我的XAML代码：

    <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>

Answer 1

如果要包装TextBlock并随窗口动态更改，则需要修改TreeViewItem的样式。在TreeViewItem的样式中，它使用StackPanel作为父面板，其宽度基于子控件。因此，我们需要将StackPanel更改为Grid，并在Grid中添加一个三列布局（Grid的名称为“ MultiSelectGrid”），如下所示。对于原始的完整样式，可以从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>

用法：

。xaml：

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