树视图中的 UWP 缩放文本块 - 文本换行 [英] UWP Scale textblock inside treeview - text wrapping

问题描述

可以请任何人帮忙，我正在开发一个 UWP 应用程序，我希望 TextBlock 根据窗口宽度将文本包裹在其中.该 Textblock 位于 TreeView 内的 Grid 内.

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.

原文:

调整大小:

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

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

这是我的 XAML 代码:

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>

推荐答案

如果要包裹 TextBlock 并随窗口动态变化，则需要修改 TreeViewItem 的 Style.在 TreeViewItem 的 Style 中，它使用 StackPanel 作为父面板，其宽度基于子控件.所以我们需要将 StackPanel 改为 Grid，并在 Grid 中添加一个三列布局(Grid 的名称为MultiSelectGrid")，如下所示.对于原始的完整样式，您可以从 generic.xaml 中复制.

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>

用法:

.xaml:

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

这篇关于树视图中的 UWP 缩放文本块 - 文本换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！