How to make Silverlight UserControl fill webpage?

I am building a webapp in Silverlight 4.0 and I would like it to have it expand to fill the width and height of the web browser. However, I can only get it to remain top center at the moment.

I have a Grid with 3 rows, 2 columns and Controls inside these which fill the cells. Therefore I only believe that I need the Grid to stretch to the size of the UserControl and the UserControl to the size of the page. But how should I do this?

Example XAML:

<UserControl x:Class="RepentWeb.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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Microsoft.Windows.Controls;assembly=Microsoft.Windows.Controls.WatermarkedTextBox"
mc:Ignorable="d"
d:DesignHeight="740" d:DesignWidth="1020" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

<Grid x:Name="LayoutRoot" Background="White" Width="1020">
    <Grid Height="740" HorizontalAlignment="Stretch" Name="grid1" VerticalAlignment="Stretch" Width="1020" ShowGridLines="False">
        <Grid.RowDefinitions>
            <RowDefinition Height="372*" />
            <RowDefinition Height="40*" />
            <RowDefinition Height="328" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="415*" />
            <ColumnDefinition Width="411*" />
        </Grid.ColumnDefinitions>
        <loc开发者_如何转开发al: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" />
        <local:WatermarkedTextBox 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" />
        <local:WatermarkedTextBox 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" />
        <local:WatermarkedTextBox 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" />
        <Button Grid.Row="1" Grid.Column="0" Content="Run" Height="23" HorizontalAlignment="Left" Margin="12,8,0,0" Name="btnRun" VerticalAlignment="Top" Width="75" Click="btnRun_Click"  />
        <Button Grid.Row="1" Grid.Column="0" Content="Step Forward" Height="23" HorizontalAlignment="Left" Margin="93,8,0,0" Name="btnStep" VerticalAlignment="Top" Width="115" Click="btnStep_Click" />
        <Button Grid.Row="1" Grid.Column="0" Content="Stop" Height="23" HorizontalAlignment="Left" Margin="214,8,0,0" Name="btnStop" VerticalAlignment="Top" Width="75" Click="btnStop_Click" IsEnabled="False" />
        <Button Grid.Row="1" Content="Clear All" Height="23" HorizontalAlignment="Right" Margin="0,8,142,0" Name="btnClear" VerticalAlignment="Top" Width="75" Click="btnClear_Click" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,0,0,0" Name="lblCurrPos" Text="Current Position:" VerticalAlignment="Top" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="376,17,0,0" Name="lblChar" Text="Char: 0" VerticalAlignment="Top" />
        <TextBlock Grid.Row="1" Height="23" HorizontalAlignment="Left" Margin="433,17,0,0" Name="lblSymbol" Text="Symbol: " VerticalAlignment="Top" />
    </Grid>
</Grid>
</UserControl>

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:

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.

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.