树视图内的 UWP 缩放文本块 - 文本换行

Question

可以请任何人帮助，我正在开发 UWP 应用程序，我希望 TextBlock 根据 window 宽度将文本包装在其中。该 Textblock 位于 Grid 内，而 Grid 位于 TreeView 内。

现在当我调整我的应用程序大小时 window 它没有做任何事情。

原文：

调整大小：

我希望它看起来像这样，并且没有固定宽度，但可以随 window 动态变化：

这是我的 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

如果要用window包裹TextBlock动态变化，需要修改TreeViewItem的Style。在 TreeViewItem 的 Style 中，它使用 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>
......

树视图内的 UWP 缩放文本块 - 文本换行

UWP Scale textblock inside treeview - text wrapping

treeview

textblock

win-universal-app

uwp