Scrolling in Grid

[Mauro]

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

[Kiril Stanoev]

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

[Mauro]

Hey Kiril,

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

All works 100% now :)

Regards,
Mauro