Containing Silverlight Lists and DataGrids in the Browser Window

In a typical Silverlight line-of-business application we have Lists, Grids, DataGrids, and StackPanels.  We populate a list and it flows down and off the browser page.  When we have a ScrollViewer, it will scroll the whole page including edit controls and graphics and not just the list that's tall and flowing off the page.  The good news is that we can easily contain the list in the viewable area with the few simple steps listed below.
  1. Remove the ScrollViewer from the page if it exists.
  2. Contain all upper area graphics and edit controls in a RowDefinitions of explicit size or Auto.
  3. Contain the lower List(s) in a final Grid RowDefinition with the Star notation to fill the remainder of the window using the outer-most Grid as a parent container.
  4. Optionally specify for the List properties,  VerticalAlignment="Top" and VerticalContentAlignment="Stretch".  Otherwise the List and its borders will stretch to the bottom of the screen even if it has no items.  Either way may be preferred. 

The following screen shots demonstrate this with a simple GridSplitter to size either side.  Notice the List on the left is using two rows compared to the list on the right.  The list on the right isn’t flowing to the bottom and uses only one row.  Both lists flow to the bottom of the browser window and no further, regardless of the number of items.

XAML rocks.
-Vince


Runtime:

  

Designer:

  

 

XAML:

    <Grid x:Name="LayoutRoot"
          Background="#FFCEA1A1">
        <Grid.ColumnDefinitions>
            <ColumnDefinition />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <sdk:Label Content="List 1"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="16"
                   FontWeight="Bold" />
        <sdk:Label Grid.Column="2"
                   Content="List 2"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   FontSize="16"
                   FontWeight="Bold" />
        <ListBox Grid.Row="1"
                 Grid.RowSpan="2"
                 Name="listBox1"
                 Margin="10" />
        <sdk:GridSplitter Grid.Row="1"
                          Grid.Column="1"
                          Width="10"
                          HorizontalAlignment="Stretch"
                          Grid.RowSpan="2" />
        <ListBox Grid.Row="2"
                 Grid.Column="2"
                 Name="listBox2"
                 Margin="10"
                 VerticalAlignment="Top"
                 VerticalContentAlignment="Stretch" />
        <sdk:Label Grid.Row="1"
                   Grid.Column="2"
                   Content="(Edit Controls)"
                   FontSize="16"
                   FontWeight="Bold"
                   HorizontalAlignment="Center" />
    </Grid>
</UserControl> 


Code-Behind:

private void MainPage_Loaded(object sender, RoutedEventArgs e)
{
    listBox1.Items.Clear();
    listBox2.Items.Clear();

    for (int i = 1; i <= 100; i++)
    {
        string listItem = "List Item " + i.ToString();

        listBox1.Items.Add(listItem);
        listBox2.Items.Add(listItem);
    }
}

 

 

Published Sunday, May 01, 2011 6:30 PM by vblasberg
Filed under: ,

Comments

No Comments