ansaurus

Question

How to make Silverlight UserControl fill webpage?

Answer 1

+2 A:

Take 2:

Thanks for the example XAML. Makes it much easier than guessing.

There are a number of changes needed.

First you need to remove the fixed width and height from your outer grids as previously mentioned.
Next your left column should be an auto width as the row of buttons determines the width of the left side.
The right column should be simply 1* (or just *) to use up the remaining column space.
The middle row needs to be either auto (to fit the row of buttons) or fixed pixel height. As you have a text box on the right overlapping that row, auto would cause problems if you add a splitter later, so I recommend a fixed pixel height of 40.
The first and last row should both be * in height. They then use 50% of the remaining height.
The buttons should be in a stack panel (as mentioned in the other answer) and the info text in a grid within that stack panel.

If you resize they should change as per the pictures below: alt text

Updated XAML below:

<Grid x:Name="LayoutRoot" Background="White">
    <Grid HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="0.5*" />
            <RowDefinition Height="40" />
            <RowDefinition Height="0.5*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" MinWidth="510" />
            <ColumnDefinition />
        </Grid.ColumnDefinitions>
        <local:WatermarkedTextBox Watermark="Source" Margin="12,6,8,8" Name="tbCode" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" KeyDown="tbCode_KeyDown" IsTabStop="True" />
        <TextBox Grid.Column="1" Watermark="Output" AcceptsReturn="True" Margin="9,6,15,8" Name="tbOutput" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <TextBox Grid.Row="1" Grid.Column="1" Watermark="Stack" Grid.RowSpan="2" AcceptsReturn="True" Margin="9,6,15,6" Name="tbStack" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" d:LayoutOverrides="GridBox" VerticalAlignment="Stretch" FontFamily="Courier New" FontSize="12" />
        <TextBox Grid.Row="2" Grid.Column="0" Watermark="Command line args, one per line. Strings/arrays wrapped in quotes" AcceptsReturn="True" HorizontalScrollBarVisibility="Auto" Margin="12,8,8,6" Name="tbArgs" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" FontFamily="Courier New" FontSize="12" />
        <StackPanel Orientation="Horizontal" Grid.Row="1" d:LayoutOverrides="Width" HorizontalAlignment="Left" Margin="12,0,0,0">
            <Button Content="Run" Height="23" Margin="5,0,0,0" x:Name="btnRun" VerticalAlignment="Center" Width="75" Click="btnRun_Click"  />
            <Button Content="Step Forward" Height="23" Margin="5,0,0,0" x:Name="btnStep" VerticalAlignment="Center" Width="115" Click="btnStep_Click" />
            <Button Content="Stop" Height="23" HorizontalAlignment="Left" Margin="5,0,0,0" x:Name="btnStop" VerticalAlignment="Center" Width="75" Click="btnStop_Click" IsEnabled="False" />
            <Button Content="Clear All" Height="23" Margin="5,0,0,0" x:Name="btnClear" VerticalAlignment="Center" Width="75" Click="btnClear_Click" />
            <Grid Width="107" Margin="13,0,0,0">
                <local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" x:Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
                <local:WatermarkedTextBox HorizontalAlignment="Left" Margin="0,17,0,0" x:Name="lblChar" Text="Char: 0" VerticalAlignment="Top" d:LayoutOverrides="HorizontalAlignment" />
                <local:WatermarkedTextBox Height="23" HorizontalAlignment="Left" Margin="57,17,0,0" x:Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
            </Grid>
        </StackPanel>
    </Grid>
</Grid>

Take 1:

The overall Silverlight shell size is determined by the settings in your web hosting page and defaults to full browser so the problem is likely your control or more likely the grid within the control.

Make sure you do not have a fixed size specified in either the user-control or the inner grid. Then both default to stretching to the parent.
The exception is if all your columns are fixed width, then the grid will collapse back to the total width of the columns, or if both are "auto" width in which case the columns will collapse to the width of the objects within them (and not force them to stretch).
Make sure at least one of your grid columns is star sized (e.g. 1*) to ensure it takes up the remaining space of the grid. If you want each column to take up 50% of the browser, make them both "1*" width.

If you can post your sample XAML it will be easier to provide an exact fix.

Enough already 2010-08-25 22:09:37

Added the XAML, will also try what you have suggested myself.

Callum Rogers 2010-08-25 22:28:28

If I change the Grid's rows to `<RowDefinition Height="372*" /><RowDefinition Height="40" /><RowDefinition Height="328*" />` and remove the values for `Width` and `Height` the height is sorted, but how can I get the columns right? Thanks for helping me.

Callum Rogers 2010-08-25 22:33:18

Many, many thanks for helping me out with this. You deserve a lot more upvotes and rep than you have so far got for this answer.

Callum Rogers 2010-08-26 09:58:17

Answer 2

+2 A:

There are a number of things you should consider. #1, remove any fixed width items, such as on the layout grid. (1020)

When you use "*" syntax within row & column definitions with numbers, this is like using a weighting. It isn't like a minimum size or anything like that. Typically this would be for something to use 1/3rd of available width would be to have a two columns with widths of "" (or "1") and "2*" respectively. 2* tells that column to request double the space. (In this case 2/3rds) using heights of 372* and 238* are weighted for available space. If you want controls to have a minimum size then assign the controls MinimumWidth/Height values. (They'll use avaialable space beyond that size as available.)

Generally it's a good idea to use 1 control per cell in a grid. If you want to position more than one control in a cell, then make that another layout control such as a StackPanel or Grid. Stack panels plus left margins work well for arranging things like buttons or text elements. Positioning multiple controls in a layout area using margins is quite messy. If you want controls arranged in multiple rows, or evenly taking up avaiable space, a Grid is preferable.

Steve Py 2010-08-26 03:37:40

Thanks for explaining the significance of the `*` notation.

Callum Rogers 2010-08-26 09:52:38

ansaurus

tags:

views:

answers:

How to make Silverlight UserControl fill webpage?

Take 2:

Take 1:

related questions