Question

我正在开发一个Windows商店应用。在较高级别，页面具有两行Grid。与其他控件一起，ComboBox位于第一行。第二行有一个GridView，红色tile是GridView中的一个项目。 ComboBox用于显示分层数据，如下所示。 ComboBox

我正在使用WinRT XAML Toolkit中的TreeView替换ComboBox，如下所示。 TreeView

我对Combobox的看法是，当它打开时，打开的列表位于GridView的顶部。对于Treeview，当我打开父节点时，打开的列表与滚动条一起保持在指定的高度内。

我希望TreeView的行为类似于ComboBox，这样当它打开时，它会向外延伸，打开的列表位于GridView的顶部。知道我怎么能做到这一点吗？

感谢您的帮助。

Answer 1

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

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

这将使ScrollViewer和TreeView根据展开的树的大小更改大小，直到它将开始滚动的最大大小。 ZIndex将使其在可视树中同一级别具有较低或默认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>

这是一个截图： enter image description here

我还注意到您至少使用测试应用程序定位Windows 8.1，但您使用的是工具包的旧版Windows 8.0（1.6.1.3）。您可以在此处获取最新版本（2015-02-01发布时为1.8.1）：http://www.nuget.org/packages/winrtxamltoolkit.windows

WinRT XAML Toolkit TreeView扩展显示

1 个答案: