Scrolling in Grid

3 posts, 1 answers
  1. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 03 May 2012 Link to this post

    Hi,

    I have put a RadJumpList in a grid with RowDefinitions, with a textbox above it. As soon as this is done, I cannot scroll with the JumpList anymore. If I take our the RowDefinitions the scrolling works. Am I doing something wrong here? Below is a sample...like I said, just take out the 

    <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
     
    And you will be able to scroll.

    XAML : 

    <phone:PhoneApplicationPage x:Class="RadControlsWindowsPhoneApp2.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:Data="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
                                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                                xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                                xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
                                xmlns:telerikCore="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Core"
                                xmlns:telerikData="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Data"
                                xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
                                d:DesignHeight="768"
                                d:DesignWidth="480"
                                FontFamily="{StaticResource PhoneFontFamilyNormal}"
                                FontSize="{StaticResource PhoneFontSizeNormal}"
                                Foreground="{StaticResource PhoneForegroundBrush}"
                                Orientation="Portrait"
                                shell:SystemTray.IsVisible="True"
                                SupportedOrientations="Portrait"
                                mc:Ignorable="d">
     
        <!--  LayoutRoot is the root grid where all page content is placed  -->
        <Grid x:Name="LayoutRoot"
              Background="Transparent">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
     
            <!--  TitlePanel contains the name of the application and page title  -->
            <StackPanel x:Name="TitlePanel"
                        Grid.Row="0"
                        Margin="12,17,0,28">
                <TextBlock x:Name="ApplicationTitle"
                           Style="{StaticResource PhoneTextNormalStyle}"
                           Text="MY APPLICATION" />
                <TextBlock x:Name="PageTitle"
                           Margin="9,-7,0,0"
                           Style="{StaticResource PhoneTextTitle1Style}"
                           Text="page name" />
            </StackPanel>
     
            <!--  ContentPanel - place additional content here  -->
            <Grid x:Name="ContentPanel"
                  Grid.Row="1"
                  Margin="12,0,12,0">
     
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
     
                <TextBlock Grid.Row="0"
                           Text="Test" />
                <telerikData:RadJumpList x:Name="TestJumpList"
                                         Grid.Row="1"
                                         x:FieldModifier="private" />
            </Grid>
        </Grid>
     
        <!--  Sample code showing usage of ApplicationBar  -->
     
    </phone:PhoneApplicationPage>


    Codebehind:

    using System.Collections.Generic;
    using Microsoft.Phone.Controls;
     
    namespace RadControlsWindowsPhoneApp2
    {
        public partial class MainPage : PhoneApplicationPage
        {
            // Constructor
            public MainPage()
            {
                InitializeComponent();
     
                IList<int> numbers=  new List<int>();
     
                for (int i = 0; i < 100; i++)
                {
                    numbers.Add(i);
                }
     
                TestJumpList.ItemsSource = numbers;
            }
        }
    }


    Thanks very much

    Regards,
    Mauro
  2. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 03 May 2012 Link to this post

    Hello Mauro,

    Thank you for contacting us. IMO, the strange behavior is caused by your row definitions. They should look like the following:

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
     
    A rule of thumb is to put all virtualizing controls (ListBox and all its variations) into an element (Panel, RowDefiniton etc.) which does not measure its child with infinity.

    Elements that measure its child with infinity are StackPanel and RowDefinition with Height="Auto". It is a bad practice to put "performance related" controls (controls that provide virtualization) in StackPanels or RowDefinitions with Height="Auto". The reason for that is hidden in the way the XAML layout system works. Basically, if you put a virtualized ListBox with 1000 items in a StackPanel, all 1000 items will be realized which will have a great performance hit on your application. However, if you put the virtualized ListBox in a Grid panel, only the necessary items will be realized and performance will be better.

    Give it a try and let me know if it works. I'd be glad to further assist you.
    Greetings,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Mauro
    Mauro avatar
    24 posts
    Member since:
    Apr 2011

    Posted 03 May 2012 Link to this post

    Hey Kiril,

    Thanks so much for the reply and explanation...really appreciate it.

    All works 100% now :)

    Regards,
    Mauro
Back to Top