Silverlight table too large to fit on one "viewing" of the web page. How can i shift the table down over time?

Question

i am trying to create a program that displays some information in a table format. The number of rows of this table can change and therefore the table may or may not be fully vieweable on one viewing of the webpage.

Is there a way where i can show parts of the table over time? For example: show rows 1-30 for 1 minute, then show rows 31-50 for 1 minute, and then back to rows 1-30 for another minute and so forth.

The code i have so far is:

XAML:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition  Height="50"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid x:Name="InnerGrid"  Grid.Row="1" Background="White"> 
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="*"/>
     </Grid.ColumnDefinitions>

    </Grid>
</Grid>

 using system; 
 using System.Collections.Generic;
 using System.Linq;
 using System.Net;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
 using System.Windows.Media.Animation;
 using System.Windows.Shapes;
 using System.Diagnostics;   

 namespace MyNameSpace
{
public partial class MainPage : UserControl
{
    //The value of numRows will depend on a value from a database, so it may change every once in a while. 
    int numRows = 45;
    Border border = new Border();
    Border border2 = new Border();

    public MainPage()
    {
        InitializeComponent();
        createRows();
    }

    public Border initializeBorder(Border b)
    {
        b.BorderBrush = new SolidColorBrush(Colors.Black);
        b.BorderThickness = new Thickness(1);
        return b;
    }

    public void createRows()
    {
        //This for loop creates the necessary amount of rows.
        for (int i = 0; i < numRows; i++)
        {
            RowDefinition rd = new RowDefinition();
            rd.Height = new GridLength(20);
            InnerGrid.RowDefinitions.Add(rd);
        }
        //This for loop creates and applies the borders that make the table "appear"
        for (int i = 0; i < numRows; i++)
        {
            Border b = new Border();
            Border b2 = new Border();

            Grid.SetColumn(initializeBorder(b), i);
            Grid.SetRow(initializeBorder(b2), i);

            Grid.SetColumnSpan(b, 11);
            Grid.SetColumnSpan(b2, 11); 
            Grid.SetRowSpan(b, numRows);
            Grid.SetRowSpan(b2, numRows);

            InnerGrid.Children.Add(b); 
            InnerGrid.Children.Add(b2);
        }
    }
}

}

Instead of building a Grid in code-behind, have you considered using an [ItemsControl](http://msdn.microsoft.com/en-us/library/system.windows.controls.itemscontrol(v=vs.95).aspx) or [DataGrid](http://msdn.microsoft.com/en-us/library/system.windows.controls.datagrid(v=vs.95).aspx)? Then you could bind to an [ObservableCollection](http://msdn.microsoft.com/en-us/library/ms668604(v=vs.95).aspx) that you periodically refresh using a [DispatcherTimer](http://msdn.microsoft.com/en-us/library/system.windows.threading.dispatchertimer(v=vs.95).aspx). I can provide more detail if you'd like. — Andrew, Dec 07 '12 at 23:08
Hey Andrew, yeah that would be awesome if you could provide more detail.. I'm a noob at silverlight so that would be really helpful — rage, Dec 08 '12 at 01:03

score 0 · Answer 1 · answered Dec 08 '12 at 05:19

Here is the simple sample to create datagrid from the service

Silverlight datagrid

Repeat the process:

Get the data from the service Parse the data Assign it as items source to the data grid

Use Disptacher Timer and after every minute or whatever time interval get the xml data from service, parse it and assign it to Datagrid.

Andrew · Answer 2 · 2012-12-11T14:49:39.117

Here are some ideas for how you could show different "pages" of data every so often. This approach uses a DataGrid rather than an ItemsControl, because a DataGrid doesn't require you to specify an ItemTemplate. I haven't tested this code, but hopefully it'll get you on the right track.

Quick question: Is there any reason you couldn't just throw the data into the UI all at once and let the user scroll up and down? Then you could nix the DispatcherTimer and the paging altogether.

In the XAML, add xmlns:c="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" and replace InnerGrid with this:

<c:DataGrid x:Name="MyDataGrid" Grid.Row="1" AutoGenerateColumns="True" />

In the code-behind:

private IEnumerable<MyDataObject>[] _pages;
private int _currentPageIndex = 0;
private ObservableCollection<MyDataObject> _visibleData;
private DispatcherTimer _timer;

public MainPage()
{
    InitializeComponent();

    this._visibleData = new ObservableCollection<MyDataObject>();
    this.MyDataGrid.ItemsSource = this._visibleData;

    this._timer = new DispatcherTimer();
    this._timer.Interval = TimeSpan.FromMinutes(1);
    this._timer.Tick += (sender, args) => this.OnTimerTick();
    this._timer.Start();
}

// I assume you have some code that gets data from the server. Pass that data to this method.
private void ProcessDataFromServer(IEnumerable<MyDataObject> data)
{
    this._pages = this.GroupDataIntoPages(data);
    this.ShowPage(0);
}

private IEnumerable<MyDataObject>[] GroupDataIntoPages(IEnumerable<MyDataObject> data)
{
    // I'll leave this to you.
    // This might help: http://stackoverflow.com/a/860399/674077
}

private void OnTimerTick()
{
    if(this._pages != null)
    {
        this._currentPageIndex++;
        if(this._currentPageIndex >= this._pages.Length)
        {
            this._currentPageIndex = 0;
        }
        this.ShowPage(this._currentPageIndex);
    }
}

private void ShowPage(int pageIndex)
{
    this._visibleData.Clear();
    if(this._pages != null && pageIndex >= 0 && pageIndex < this._pages.Length)
    {
        foreach(var item in this._pages[pageIndex])
        {
            this._visibleData.Add(item);
        }
    }
}

Silverlight table too large to fit on one "viewing" of the web page. How can i shift the table down over time?

2 Answers2