WinRT XAML 工具包 TreeView 扩展显示 [英] WinRT XAML Toolkit TreeView expanded display
问题描述
我正在开发 Windows 商店应用.在较高级别上,该页面有一个包含两行的 Grid.与其他控件一起,ComboBox 放置在第一行.第二行有一个 GridView,红色磁贴是 GridView 中的项目之一.ComboBox 用于显示分层数据,如下所示.
I am developing a Windows store app. At a high level, the page has a Grid with two rows. Along with other controls, the ComboBox is placed in the first row. The second row has a GridView and the red tile is one of the items in the GridView. The ComboBox is used to display hierarchical data as shown here. ComboBox
I am working on replacing the ComboBox with a TreeView from WinRT XAML Toolkit as shown here. TreeView
What I like about the Combobox is that when its open, the opened list sits on top of the GridView. For the Treeview, when I open the parent node, the opened list stays within the specified height along with the scrollbar.
I would like the TreeView to act like the ComboBox so that when opened, it extends out and the opened list sits on top of the GridView. Any idea how I can accomplish that?
Thanks for your help.
Set something like this on the TreeView
(adjust max dimensions for available space)
VerticalAlignment="Top"
HorizontalAlignment="Left"
MaxHeight="500"
MaxWidth="500"
Canvas.ZIndex="1"
This will make the ScrollViewer
and the TreeView
change the size depending on the size of expanded tree up to a max size where it will start scrolling. The ZIndex will make it render on top of items with lower or default ZIndex
value at the same level in the visual tree.
You could also put it in a Popup
when your root node expands and back out of the Popup
when the Popup
closes or when the node collapses.
*EDIT
Based on your code - I can see you have a bit of a mess of a lot of nested panels, but with a simple hack you can make it work even with your layout. There are three things to do:
- Make the
TreeView
top-aligned as I mentioned earlier. - The height of the panel the
TreeView
is inside of is a bit limited (to 20% of page height) by the size of theGrid
row it's in. You can add a bit more space by setting a large enough negative bottomMargin
value for theTreeView
. - Since the
TreeView
is in the first row of the grid - the second row naturally overlays it when theTreeView
extends into the negative margin. You can fix that by settingCanvas.ZIndex="1"
on theStackPanel
that is the root of your first row or reordering your row elements to reverse theZIndex
.
Here's the updated code:
<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>
Here's a screenshot:
I've also noticed you are targeting Windows 8.1 at least with your test app, but you are using an old Windows 8.0 version (1.6.1.3) of the toolkit. You can get the latest version (1.8.1 as of 2015-02-01) here: http://www.nuget.org/packages/winrtxamltoolkit.windows
这篇关于WinRT XAML 工具包 TreeView 扩展显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!