How to get a TreeView to Expand to 100%

[AK]

How to get a TreeView Height and/or Width to Expand to 100%?

Height="*" does not work.

[Konstantin Petkov]

Hi AK,

Although I'm not sure what exactly is the code on your end, have you tried adding the TreeView in a Grid so that you can use Grid's RowDefinition.Height and ColumnDefinition.Width properties? If that does not work for you or I'm missing details, would you mind sharing the .xaml code with us and elaborate more on the problem?

Greetings,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Manny]

OK, here is what I found--you can get the Rad elements (treeview / listview / etc.) to expand correctly but it took me a while. Here's the secret sauce: Be sure to use Grids as Konstantin said and also I found that I needed to make sure that I fully defined all row and column definitions. That is, for a child grid of another grid, be sure the child grid uses the correct start sizings explicitly.

I think the following shows this more clearly:
<Grid x:Name="topLevel>
  <Grid.RowDefinitions><RowDefinition Height="1*" /><RowDefinition Height="Auto" /></Grid.RowDefinitions>
  <Grid x:Name="thisIsWrongMissingExplicitRowDefinitions" Grid.Row="0">
    <telerikNavigation:SomeControl x:Name="This won't expand out cuz no row definitions for child grid" />
  </Grid>
  <Grid x:Name="butThisWillDisplayCorrectly25PixHigh" Grid.Row="1">
    <Grid.RowDefinitions><RowDefinition Height="25"></Grid.RowDefinitions>
    <telerikInput:RadButton x:Name="btn25PixHighInheritedFromRowDefinition" />
  </Grid>
</Grid>

For even more help, here's a slightly more complex example that demonstrates proportional auto-sizing where the Rad controls do indeed honor the result:

<t:BaseUserControl xmlns:telerikInput="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Input"
                   xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"
                   xmlns:t="clr-namespace:ArchG2.CodeLibrary.Sl;assembly=ArchG2.CodeLibrary.Sl"
                   x:Class="ArchG2.Sl.Prog01.MainPage"
                   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                   mc:Ignorable="d"
                   d:DesignWidth="640"
                   d:DesignHeight="480"
                   xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
                   xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
                   xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
                   xmlns:control="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
                   xmlns:it="clr-namespace:ImageTools.Controls;assembly=ImageTools.Controls"
                   xmlns:utils="clr-namespace:Abr.CodeLibrary.Sl.Utils;assembly=Abr.CodeLibrary.Sl">
  <UserControl.Resources>
    <ResourceDictionary>
      <!-- Complex XAML for the combobox (treeview support) -->
      <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="/ArchG2.Sl.Prog01;component/SystemSelectStyle.xaml" />
      </ResourceDictionary.MergedDictionaries>
      <!-- data template for the combobox -->
      <!-- <hierCvt:SystemSelectFilter x:Key="HierarchyConverter" /> -->
      <telerik:HierarchicalDataTemplate x:Key="SelectSystemTemplate"
                                        ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding SystemName}"
                   ToolTipService.ToolTip="{Binding SystemDesc}" />
      </telerik:HierarchicalDataTemplate>
      <!-- handles data binding the goals and objectives tree -->
      <telerik:HierarchicalDataTemplate x:Key="CampaignObjectiveTemplate"
                                        ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding ObjeName}"
                   ToolTipService.ToolTip="{Binding ObjeDesc}" />
      </telerik:HierarchicalDataTemplate>
      <!-- handles the system / activities treelistview -->
      <telerik:HierarchicalDataTemplate x:Key="RootItem"
                                        ItemsSource="{Binding Children}"></telerik:HierarchicalDataTemplate>
      <!-- handles data binding the BRM tree -->
      <telerik:HierarchicalDataTemplate x:Key="BrmTemplate"
                                        ItemsSource="{Binding Children}">
        <TextBlock Text="{Binding EaBrmName}"
                   ToolTipService.ToolTip="{Binding EaBrmDesc}" />
      </telerik:HierarchicalDataTemplate>
      <!-- handles image display -->
      <Style x:Key="LoadImage"
             TargetType="it:AnimatedImage">
        <Setter Property="Width"
                Value="16" />
        <Setter Property="Height"
                Value="16" />
        <Setter Property="HorizontalAlignment"
                Value="Right" />
        <Setter Property="Source"
                Value="/ArchG2.Portal/rg2Images/ajax-loader.gif" />
        <Setter Property="Visibility"
                Value="Collapsed" />
      </Style>
    </ResourceDictionary>
  </UserControl.Resources>
  <Grid>
    <Grid.Background>
      <RadialGradientBrush GradientOrigin="0.5,0.5"
                           Center="0.5,0.5"
                           RadiusX="0.5"
                           RadiusY="0.5">
        <GradientStop Color="#FAFAFAFA"
                      Offset="0" />
        <GradientStop Color="#DFDFCFCF"
                      Offset="0.971" />
      </RadialGradientBrush>
    </Grid.Background>
    <Grid.RowDefinitions>
      <!-- main content -->
      <RowDefinition Height="*"></RowDefinition>
      <!-- status area -->
      <RowDefinition Height="Auto"></RowDefinition>
    </Grid.RowDefinitions>
    <!-- main content -->
    <Grid Grid.Row="0">
      <Grid.RowDefinitions>
        <!-- system selection and tree views -->
        <RowDefinition Height="1*"></RowDefinition>
        <!-- system activities -->
        <RowDefinition Height="1*"></RowDefinition>
      </Grid.RowDefinitions>
      <!-- system selection and tree views -->
      <Grid Grid.Row="0">
        <Grid.RowDefinitions>
          <!-- system selection -->
          <RowDefinition Height="Auto"></RowDefinition>
          <!-- tree views -->
          <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <!-- system selection -->
        <StackPanel Orientation="Horizontal"
                    Grid.Row="0">
          <dataInput:Label Content="System Selection"></dataInput:Label>
          <telerikInput:RadComboBox x:Name="cboSystem"
                                    Width="150"
                                    SelectionChanged="cboSystem_SelectionChanged"
                                    Style="{StaticResource TreeViewInComboBox}"
                                    ItemTemplate="{StaticResource SelectSystemTemplate}"
                                    DropDownOpened="cboSystem_DropDownOpened"
                                    DropDownClosed="cboSystem_DropDownClosed"
                                    KeyUp="cboSystem_KeyUp"
                                    KeyDown="cboSystem_KeyDown">
          </telerikInput:RadComboBox>
          <it:AnimatedImage x:Name="cboSystemLoadImg"
                            Style="{StaticResource LoadImage}" />
        </StackPanel>
        <!-- tree views -->
        <Grid Grid.Row="1">
          <!-- the layout first -->
          <Grid.ColumnDefinitions>
            <!-- goals -->
            <ColumnDefinition Width="1*"></ColumnDefinition>
            <!-- BRM -->
            <ColumnDefinition Width="1*"></ColumnDefinition>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="1*"></RowDefinition>
          </Grid.RowDefinitions>
          <!-- goals -->
          <Grid Margin="0,0,5,0"
                Grid.Row="0" Grid.Column="0">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"></RowDefinition>
              <RowDefinition Height="1*"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal"
                        Grid.Row="0">
              <dataInput:Label Content="Goals &amp; Objectives"></dataInput:Label>
              <it:AnimatedImage x:Name="rtvDataLoadImg"
                                Style="{StaticResource LoadImage}" />
            </StackPanel>
            <telerikNavigation:RadTreeView x:Name="rtvData"
                                           IsLineEnabled="True"
                                           SelectionMode="Single"
                                           IsEditable="True"
                                           IsDragDropEnabled="True"
                                           IsExpandOnSingleClickEnabled="False"
                                           ItemTemplate="{StaticResource CampaignObjectiveTemplate}"
                                           SelectionChanged="rtvData_SelectionChanged"
                                           Grid.Row="1"
                                           BorderBrush="Black"
                                           BorderThickness="1">
            </telerikNavigation:RadTreeView>
          </Grid>
          <!-- splitter (ignored) -->
          <control:GridSplitter Grid.Row="0"
                                Grid.Column="0"
                                Width="5"></control:GridSplitter>
          <!-- BRM -->
          <Grid Margin="0,0,5,0"
                Grid.Row="0" Grid.Column="1">
            <Grid.RowDefinitions>
              <RowDefinition Height="Auto"></RowDefinition>
              <RowDefinition Height="1*"></RowDefinition>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal"
                        Grid.Row="0">
              <dataInput:Label Content="BRM Mappings"></dataInput:Label>
              <it:AnimatedImage x:Name="rtvBrmLoadImg"
                                Style="{StaticResource LoadImage}" />
            </StackPanel>
            <telerikNavigation:RadTreeView x:Name="rtvBrm"
                                           IsLineEnabled="True"
                                           SelectionMode="Single"
                                           IsEditable="True"
                                           IsDragDropEnabled="True"
                                           IsExpandOnSingleClickEnabled="False"
                                           ItemTemplate="{StaticResource BrmTemplate}"
                                           Grid.Row="1"
                                           BorderBrush="Black"
                                           BorderThickness="1">
            </telerikNavigation:RadTreeView>
          </Grid>
        </Grid>
      </Grid>

      <!-- systems and activities -->
      <Grid Grid.Row="1">
        <Grid.ColumnDefinitions>
          <!-- left arrow -->
          <ColumnDefinition Width="65"></ColumnDefinition>
          <!-- activities list -->
          <ColumnDefinition Width="1*"></ColumnDefinition>
          <!-- right arrow -->
          <ColumnDefinition Width="65"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
          <RowDefinition Height="1*"></RowDefinition>
        </Grid.RowDefinitions>
        <!-- left arrow -->
        <it:AnimatedImage Grid.Column="0" Grid.Row="0"
                          VerticalAlignment="Top"
                          Source="/ArchG2.Portal/rg2Images/swooshdown.png"></it:AnimatedImage>
        <!-- activities list -->
        <Grid Margin="0,0,5,10"
              Grid.Row="0"
              Grid.Column="1">
          <Grid.RowDefinitions>
            <!-- activity label -->
            <RowDefinition Height="Auto"></RowDefinition>
            <!-- activites listview -->
            <RowDefinition Height="1*"></RowDefinition>
          </Grid.RowDefinitions>
          <!-- activities label -->
          <StackPanel Orientation="Horizontal" Grid.Row="0">
            <dataInput:Label Content="Systems and Activities"></dataInput:Label>
            <it:AnimatedImage x:Name="rtlvSystemsLoadImg"
                              Style="{StaticResource LoadImage}" />
          </StackPanel>
          <!-- activities listview -->
          <telerikNavigation:RadTreeListView x:Name="rtlvSystems"
                                             IsLineEnabled="True"
                                             IsEditable="True"
                                             BorderBrush="Black"
                                             BorderThickness="1"
                                             ItemTemplate="{StaticResource RootItem}"
                                             Background="White"
                                             MinWidth="600"
                                             SelectionChanged="rtlvSystems_SelectionChanged"
                                             Grid.Row="1">
            <telerikNavigation:RadTreeListView.Columns>
              <telerikNavigation:RadColumn PropertyName="SystemName"
                                           Header="Name"
                                           Width="580">
                <telerikNavigation:RadColumn.CellTemplate>
                  <DataTemplate>
                    <TextBlock Text="{Binding DisplayName}"
                               ToolTipService.ToolTip="{Binding DisplayToolTip}"></TextBlock>
                  </DataTemplate>
                </telerikNavigation:RadColumn.CellTemplate>
              </telerikNavigation:RadColumn>
            </telerikNavigation:RadTreeListView.Columns>
          </telerikNavigation:RadTreeListView>
        </Grid>
        <!-- right arrow -->
        <it:AnimatedImage Grid.Column="2"
                          VerticalAlignment="Top"
                          Source="/ArchG2.Portal/rg2Images/swooshup.png"></it:AnimatedImage>
      </Grid>
    </Grid>
    <!-- status area -->
    <Grid Grid.Row="1">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="Auto"></ColumnDefinition>
      </Grid.ColumnDefinitions>
      <TextBox x:Name="txtMsg"
               Text=""
               IsReadOnly="True"
               BorderBrush="Transparent"
               BorderThickness="0"
               Grid.Column="0"
               HorizontalAlignment="Left"></TextBox>
      <StackPanel Orientation="Horizontal"
                  Grid.Column="1">
        <telerik:RadButton x:Name="btnLog"
                           Grid.Row="0"
                           HorizontalAlignment="Right"
                           Content="[log...]"
                           Click="btnLog_Click"></telerik:RadButton>
        <telerikNavigation:RadWindow x:Name="logWindow"
                                     WindowStartupLocation="CenterScreen">
          <t:LogWindow x:Name="logWindowInstance"
                       OwnerUserControl="{Binding }"></t:LogWindow>
        </telerikNavigation:RadWindow>
        <telerik:RadButton x:Name="btnNext"
                           IsEnabled="False"
                           Click="btnNext_Click"
                           Content="Show Graph"
                           HorizontalAlignment="Right"></telerik:RadButton>
      </StackPanel>
    </Grid>
  </Grid>
</t:BaseUserControl>

Attached is a shot of the result in action:

[Paul Brun]

Do we still have to do this to make RadTreeView occupy 100% of the Content Area? This does not appear to work for me?

Paul

[Valentin.Stoychev]

Hi Paul Brun,

Set:

HorizontalAlignment="Stretch" VerticalAlignment="Stretch".

Greetings,
Valentin.Stoychev
the Telerik team