WinRT XAML Toolkit TreeView 展开显示答案

【问题标题】：WinRT XAML Toolkit TreeView expanded displayWinRT XAML Toolkit TreeView 展开显示
【发布时间】：2015-01-28 19:56:44
【问题描述】：

我正在开发一个 Windows 商店应用程序。在较高级别上，该页面有一个包含两行的 Grid。与其他控件一起，ComboBox 位于第一行。第二行有一个 GridView，红色图块是 GridView 中的项目之一。 ComboBox 用于显示分层数据，如此处所示。 ComboBox

我正在用 WinRT XAML 工具包中的 TreeView 替换 ComboBox，如下所示。 TreeView

我喜欢 Combobox 的地方在于，当它打开时，打开的列表位于 GridView 的顶部。对于Treeview，当我打开父节点时，打开的列表与滚动条保持在指定的高度内。

我希望 TreeView 的行为类似于 ComboBox，这样当打开时，它会向外扩展，并且打开的列表位于 GridView 的顶部。知道如何实现吗？

感谢您的帮助。

【问题讨论】：

标签： winrt-xaml

【解决方案1】：

在TreeView 上设置类似的东西（调整可用空间的最大尺寸）

VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxHeight="500"
MaxWidth="500"
Canvas.ZIndex="1"

这将使ScrollViewer 和TreeView 根据扩展树的大小更改大小，直到它开始滚动的最大大小。 ZIndex 将使其呈现在可视树中同一级别的具有较低或默认 ZIndex 值的项目之上。

您也可以在根节点展开时将其放入Popup，并在Popup 关闭或节点折叠时退出Popup。

*编辑

根据您的代码 - 我可以看到您有很多嵌套面板有点混乱，但是通过简单的 hack，您甚至可以使其与您的布局一起工作。需要做三件事：

如前所述，使 TreeView 顶部对齐。
TreeView 所在面板的高度受到Grid 所在行大小的限制（为页面高度的 20%）。您可以通过设置一个大的TreeView 有足够的负底部 Margin 值。
由于TreeView 位于网格的第一行 - 当TreeView 延伸到负边距时，第二行自然会覆盖它。您可以通过在作为第一行的根的 StackPanel 上设置 Canvas.ZIndex="1" 或重新排序行元素以反转 ZIndex 来解决此问题。

这是更新后的代码：

<Page
    x:Class="TestApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp"
    xmlns:custom="using:TestApp.Custom"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:controls="using:WinRTXamlToolkit.Controls"
    xmlns:data="using:WinRTXamlToolkit.Controls.Data"
    mc:Ignorable="d">
    <Page.Resources>
        <Style x:Key="HorizontalScrollViewerStyle" TargetType="ScrollViewer">
            <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
            <Setter Property="VerticalScrollBarVisibility" Value="Disabled"/>
            <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
            <Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
            <Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="2*"></RowDefinition>
            <RowDefinition Height="7*"></RowDefinition>
            <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Margin="0,10,0,0"
                    Canvas.ZIndex="1">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <StackPanel Grid.Column="0" HorizontalAlignment="Left" Margin="50,0,0,0">
                    <StackPanel>
                        <TextBlock Text="Version 1.0.0.0"/>
                        <!--<ProgressBar IsIndeterminate="True" Visibility="{Binding ShowProgressBar, Converter={StaticResource BooleanToVisibility}}" Height="20"/>-->
                    </StackPanel>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="/Assets/SmallLogo.scale-100.png" Width="130" Height="60" Stretch="Uniform"/>
                        <TextBlock Text="Testing TreeView" FontSize="20" FontWeight="Light" VerticalAlignment="Center" Margin="10"/>
                    </StackPanel>
                </StackPanel>
                <StackPanel Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>

                        <Grid Grid.Row="0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="6*"/>
                                <ColumnDefinition Width="4*"/>
                            </Grid.ColumnDefinitions>

                            <StackPanel Grid.Column="0" Orientation="Horizontal">
                                <TextBlock Text="Test ID: 1234" Margin="0,0,5,0" FontWeight="SemiBold" VerticalAlignment="Center"/>
                            </StackPanel>
                        </Grid>

                        <StackPanel Grid.Row="1" Orientation="Horizontal">
                            <TextBlock Text ="Test Data 123"/>
                            <TextBlock Text ="More Test Data 123"/>
                        </StackPanel>

                        <!--<ComboBox Grid.Row="2"
                                  ItemsSource="{Binding Locations}" 
                                  SelectedItem="{Binding SelectedLocation, Mode=TwoWay}" 
                                  Width="400" Margin="0,5,0,0" />-->

                        <controls:TreeView Grid.Row="2" ItemsSource="{Binding TLocations}" 
                                           VerticalAlignment="Top"
                                           Width="400" Margin="0,5,0,-1000" MaxHeight="400">
                            <controls:TreeView.ItemTemplate>
                                <DataTemplate>
                                    <TextBlock Text="{Binding Header}"/>
                                    <data:DataTemplateExtensions.Hierarchy>
                                        <data:HierarchicalDataTemplate ItemsSource="{Binding Items}" />
                                    </data:DataTemplateExtensions.Hierarchy>
                                </DataTemplate>
                            </controls:TreeView.ItemTemplate>
                        </controls:TreeView>

                    </Grid>
                </StackPanel>
            </Grid>
        </StackPanel>

        <Grid Grid.Row="1" Margin="0,10,0,0">
            <!--<Grid.Background>
                <ImageBrush ImageSource="/Assets/Background.png" />
            </Grid.Background>-->
            <ScrollViewer Style="{StaticResource HorizontalScrollViewerStyle}">
                <StackPanel Orientation="Horizontal" >

                    <StackPanel Margin="50,0,0,0">
                        <TextBlock Text="Overview" Margin="0,20,0,0" />
                        <Grid Width="450" Height="450" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="5*" />
                                <RowDefinition Height="2*" />
                                <RowDefinition Height="3*" />
                            </Grid.RowDefinitions>

                            <Image Grid.Row="0" Source="Assets/StoreLogo.scale-100.png" Stretch="UniformToFill"/>

                            <StackPanel Grid.Row="1" Background="Azure">

                            </StackPanel>

                            <StackPanel Grid.Row="2" Background="Orange">

                            </StackPanel>
                        </Grid>
                    </StackPanel>

                    <StackPanel Margin="50,20,0,0">
                        <TextBlock Text="Test Content" Margin="2,0,0,0"/>
                        <custom:CustomGridView ItemsSource="{Binding Items}" SelectionMode="None">
                            <GridView.ItemsPanel>
                                <ItemsPanelTemplate>
                                    <VariableSizedWrapGrid Orientation="Horizontal" ItemHeight="150" ItemWidth="175" MaximumRowsOrColumns="3" />
                                </ItemsPanelTemplate>
                            </GridView.ItemsPanel>
                            <GridView.ItemTemplate>
                                <DataTemplate>
                                    <Grid Background="{Binding BackgroundColor}">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="{Binding TitleHeight}"/>
                                            <RowDefinition Height="{Binding ImageHeight}" />
                                            <RowDefinition Height="{Binding ContentHeight}" />
                                        </Grid.RowDefinitions>
                                        <StackPanel Grid.Row="0" VerticalAlignment="Top">
                                            <TextBlock Text="{Binding Title}" HorizontalAlignment="Left" Padding="5,0,0,0"></TextBlock>
                                        </StackPanel>
                                        <StackPanel Grid.Row="1">
                                            <Image Source="{Binding ImageSource}" Stretch="None" VerticalAlignment="Center" />
                                        </StackPanel>
                                        <StackPanel Grid.Row="2" VerticalAlignment="Bottom" Background="{Binding ContentBackgroundColor}">
                                            <TextBlock Text="{Binding Content}"  HorizontalAlignment="Center" VerticalAlignment="Center" Padding="5"></TextBlock>
                                        </StackPanel>
                                    </Grid>
                                </DataTemplate>
                            </GridView.ItemTemplate>
                        </custom:CustomGridView>
                    </StackPanel>

                    <!--<userControls:EarnBenefits x:Name="earnBenefits"/>-->

                </StackPanel>
            </ScrollViewer>
        </Grid>
    </Grid>
</Page>

这是一个屏幕截图：

我还注意到，您的测试应用程序至少以 Windows 8.1 为目标，但您使用的是旧的 Windows 8.0 版本 (1.6.1.3) 工具包。您可以在此处获取最新版本（截至 2015 年 2 月 1 日的 1.8.1）：http://www.nuget.org/packages/winrtxamltoolkit.windows

【讨论】：

我尝试使用画布...没有任何区别。让我检查一下 Popup。
您需要共享您的 XAML 以获得修复它的任何帮助。
我上传了一个模拟当前状态的测试应用。 onedrive.live.com/… 您可以注释掉 ComboBox 并取消注释 MainPage 中的 TreeView 以查看其显示方式。如果在访问解决方案时遇到问题，请告诉我