UWP Scale textblock inside treeview - text wrapping

巧了我就是萌 提交于 2021-02-08 07:25:36

问题


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>

回答1:


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


来源:https://stackoverflow.com/questions/59802906/uwp-scale-textblock-inside-treeview-text-wrapping

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!