From HTML to Silverlight, how can my design stretch and resize ?

03-24-2009 6:54 PM |

Hello,

I'm a seasoned web developper and I am building my first application with SilverLight but I can't set the display the way I want it.

I want to build an interface with several rows and columns, the number of rows depends on
one datasource and the number of columns depends on another data source, here's the idea:

******************* Row **********************
*                |          |         |         |          *
*    Row 1   |   10   |   11   |   12  |   13    *
*                |          |         |         |          *

******************* Row **********************
*                |          |         |         |          *
*    Row 2   |   10   |   11   |   12  |   13    *
*                |          |         |         |          *

...

I want my interface to stretch just like <span width="100%" /> in HTML.
Above that, I will want some other controls to sit, for example, over 11 and 12 on Row 1.
Just like in Outlook...

I've put a Vertical Stack Panel and, at runtime, I'm adding user controls that each, represents  one row :

<UserControl x:Class="SilverlightApp.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <StackPanel x:Name="RowsHolder" Background="Aqua" Orientation="Vertical">
    </StackPanel>
</UserControl>

<UserControl x:Class="SilverlightApp.ucRow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

    <StackPanel Name="Row" Background="Blue" Width="" Orientation="Horizontal">
        <Button x:Name="Text" Content="test" Width="150"></Button>
        <Grid Name="Numbers" ShowGridLines="True">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
        </Grid>
    </StackPanel>
</UserControl>

Each ucRow has only one row but the number of columns will vary.
So, in code, on each ucRow_onLoad, I set the number of columns and add a button in each cell.

My problem is that I what the grid to stretch to the full width available and each columns to have the same size, and the button inside the cell, to take up the full width and height available and to resize if the browser is resized.

Here's my code:
        public ucRow()
        {
            InitializeComponent();
            this.Loaded += new RoutedEventHandler(Row_Loaded);
        }

        void Row_Loaded(object sender, RoutedEventArgs e)
        {
            this.Numbers.ColumnDefinitions.Clear();

            Button oBtn = null;
            for (int i=8 ; i<=23 ; i++ )
            {
                this.Numbers.ColumnDefinitions.Add(new ColumnDefinition());

                oBtn = new Button();
                oBtn.Content = i.ToString() + " h";
                oBtn.SetValue(Grid.RowProperty, 1);
                oBtn.SetValue(Grid.ColumnProperty, i-7);

                this.Numbers.Children.Add(oBtn);
            }
        }

Thank you for any help, don't hesitate to ask if I'm being unclear.
Cheers,
Claude

Re: From HTML to Silverlight, how can my design stretch and resize ?

03-25-2009 6:44 AM |

Thank you for sharing this property [VerticalAlignment], it is exactly what I needed...

One mistake I did, was to put a Grid inside a StackPanel, of course, the grid was not able to take the full width and height.

I have changed my design to use a single grid as the main control and adding rows from code, this way, all columns are of equal width.

There is one animation I would like to do but I'm not sure it is feasible, here what it is...

On load, a web service give me a bunch of data, from that data, I create rows, I would like the user to see each row actually being added to the Grid.

I would like the row to come from out of screen on lower right and move to its place on the grid.

Then, let's say each row represents one day from 8 AM to 11 PM, once the rows are all in the grid, I would like one rectangle per hour to slide inside the row coming from the rightend, out of screen.

 Is that clear ? Feasible ?

Thanks for any advice !

Claude