WinRT的XAML工具包的TreeView扩展显示(WinRT XAML Toolkit Tree

我正在开发一个Windows商店应用。在高层次上，页面有两行的网格。随着其他控件，组合框放置在第一排。第二行有一个GridView和红瓦是在GridView的项目之一。组合框被用作这里示出为显示分层数据。组合框

我的工作与WinRT的XAML工具包一个TreeView更换组合框，如下所示。树视图

我喜欢的组合框是，当它打开时，打开的列表坐落在GridView控件的顶部。对于树视图，当我打开父节点，打开的清单是用滚动条沿指定的高度范围内。

我想TreeView中表现得像组合框，以便打开时，它延伸出与打开的列表坐落在GridView控件的顶部。任何想法，我怎么能做到呢？

谢谢你的帮助。

设置像这样的TreeView （调整可用空间最大尺寸）

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

这将使ScrollViewer和TreeView改变取决于扩展树的大小达到一个最大尺寸在那里将开始滚动大小。该Z-索引将使它呈现在项目的顶部较低或默认ZIndex在可视化树同级别值。

你也可以把它放在一个Popup时，你的根节点扩展和背出的Popup的时候Popup关闭或当节点崩溃。

*编辑

基于您的代码 - 我可以看到你有一点很多嵌套面板的乱七八糟的，但有一个简单的黑客，你可以使它与您的布局甚至工作。有三件事情要做：

使TreeView顶部对齐正如我前面提到。
该面板的高度TreeView是里面有点限制（以页面高度的20％），由大小Grid排它的。你可以通过设置一个足够大的负底部添加更多的空间， Margin为价值TreeView 。
由于TreeView是网格的第一行中-当在第二行自然地覆盖它TreeView延伸到负余量。您可以通过设置修复Canvas.ZIndex="1"上StackPanel那是你的第一行的根或重新安排你的行元素扭转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）。你可以得到最新的版本（1.8.1截至2015年2月1日）在这里： http://www.nuget.org/packages/winrtxamltoolkit.windows