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 the Grid row it's in. You can add a bit more space by setting a large enough negative bottom Margin value for the TreeView.
- Since the
TreeView is in the first row of the grid - the second row naturally overlays it when the TreeView extends into the negative margin. You can fix that by setting Canvas.ZIndex="1" on the StackPanel that is the root of your first row or reordering your row elements to reverse the ZIndex.
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
