WinRT XAML 工具包 TreeView 扩展显示
WinRT XAML Toolkit TreeView expanded display
我正在开发 Windows 商店应用程序。在较高级别，该页面有一个包含两行的网格。与其他控件一起，ComboBox 位于第一行。
第二行有一个 GridView，红色方块是 GridView 中的项目之一。 ComboBox 用于显示分层数据，如此处所示。
ComboBox
我正在努力用 WinRT XAML 工具包中的 TreeView 替换 ComboBox，如此处所示。
TreeView
我喜欢 Combobox 的一点是，当它打开时，打开的列表位于 GridView 的顶部。对于Treeview，当我打开父节点时，打开的列表与滚动条一起停留在指定的高度内。
我希望 TreeView 像 ComboBox 一样工作，这样当打开时，它会向外延伸并且打开的列表位于 GridView 的顶部。知道我该怎么做吗？
感谢您的帮助。
在 TreeView 上设置类似的内容（调整可用的最大尺寸 space）
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxHeight="500"
MaxWidth="500"
Canvas.ZIndex="1"
这将使 ScrollViewer 和 TreeView 根据展开的树的大小更改大小，直至达到开始滚动的最大大小。 ZIndex 将使其呈现在可视化树中同一级别具有较低或默认 ZIndex 值的项目之上。
您也可以在根节点展开时将其放入 Popup 并在 Popup 关闭或节点折叠时退出 Popup。
*编辑
根据您的代码 - 我可以看到您的嵌套面板有点乱，但是通过简单的 hack，您可以使它与您的布局一起工作。要做三件事：
- 如前所述，使
TreeView 顶部对齐。
TreeView 所在面板的高度受其所在 Grid 行的大小限制（为页面高度的 20%）。您可以添加一点更多 space 通过为 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
我正在开发 Windows 商店应用程序。在较高级别，该页面有一个包含两行的网格。与其他控件一起，ComboBox 位于第一行。 第二行有一个 GridView，红色方块是 GridView 中的项目之一。 ComboBox 用于显示分层数据，如此处所示。 ComboBox
我正在努力用 WinRT XAML 工具包中的 TreeView 替换 ComboBox，如此处所示。 TreeView
我喜欢 Combobox 的一点是，当它打开时，打开的列表位于 GridView 的顶部。对于Treeview，当我打开父节点时，打开的列表与滚动条一起停留在指定的高度内。
我希望 TreeView 像 ComboBox 一样工作，这样当打开时，它会向外延伸并且打开的列表位于 GridView 的顶部。知道我该怎么做吗？
感谢您的帮助。
在 TreeView 上设置类似的内容（调整可用的最大尺寸 space）
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxHeight="500"
MaxWidth="500"
Canvas.ZIndex="1"
这将使 ScrollViewer 和 TreeView 根据展开的树的大小更改大小，直至达到开始滚动的最大大小。 ZIndex 将使其呈现在可视化树中同一级别具有较低或默认 ZIndex 值的项目之上。
您也可以在根节点展开时将其放入 Popup 并在 Popup 关闭或节点折叠时退出 Popup。
*编辑
根据您的代码 - 我可以看到您的嵌套面板有点乱，但是通过简单的 hack，您可以使它与您的布局一起工作。要做三件事：
- 如前所述，使
TreeView顶部对齐。 TreeView所在面板的高度受其所在Grid行的大小限制（为页面高度的 20%）。您可以添加一点更多 space 通过为TreeView. 设置足够大的负底部 - 由于
TreeView位于网格的第一行 - 当TreeView延伸到负边距时，第二行自然会覆盖它。您可以通过在第一行的根StackPanel上设置Canvas.ZIndex="1"或重新排序行元素以反转ZIndex. 来解决此问题
Margin 值
这是更新后的代码：
<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