How to get a TreeView to Expand to 100%

5 posts, 0 answers
  1. AK
    AK avatar
    3 posts
    Member since:
    Jan 2009

    Posted 04 May 2009 Link to this post

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

    Height="*" does not work.

  2. Konstantin Petkov
    Admin
    Konstantin Petkov avatar
    1911 posts

    Posted 05 May 2009 Link to this post

    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.
  3. Manny
    Manny avatar
    13 posts
    Member since:
    Jan 2009

    Posted 16 Dec 2009 Link to this post

    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:


  4. Paul Brun
    Paul Brun avatar
    41 posts
    Member since:
    May 2010

    Posted 16 Jul 2010 Link to this post

    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
  5. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 20 Jul 2010 Link to this post

    Hi Paul Brun,

    Set:

    HorizontalAlignment="Stretch" VerticalAlignment="Stretch".

    Greetings,
    Valentin.Stoychev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top