How to make a Silverlight app take up the entire browser width/height?

Question

I have a page that is just an ASP-hosted Silverlight 4 object. I would like it to take up the full width and height of the browser, but it is not - it is too small, in a corner. Where can I adjust this?

I'm new to Silverlight. Thanks for the help.

Edit: Here is the .xaml:

<UserControl x:Class="ExpenseCalc_SilverLight.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"
    mc:Ignorable="d"
    xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk"&gt;

    <Grid x:Name="LayoutRoot" Background="White" Height="Auto" Width="Auto">
        <Rectangle Height="441" HorizontalAlignment="Left" Margin="-21,-14,0,0" Name="rectangle1" Stroke="Black" StrokeThickness="1" VerticalAlignment="Top" Width="583" Fill="#FFA86E6E" Opacity="1" />
        <TextBlock Height="114" HorizontalAlignment="Left" Margin="13,14,0,0" Name="textBlock1" Text="Current Expenses" VerticalAlignment="Top" Width="424" FontSize="28" />

        <sdk:DataGrid AutoGenerateColumns="True" Height="78" HorizontalAlignment="Left" Margin="13,60,0,0" Name="CurrentExpensesGrid" VerticalAlignment="Top" Width="494" />

        <TextBlock FontSize="15" Height="114" HorizontalAlignment="Left" Margin="12,158,0,0" Name="textBlock2" Text="Add New" VerticalAlignment="Top" Width="424" />
        <sdk:Label Height="18" HorizontalAlignment="Left" Margin="13,187,0,0" Name="label1" VerticalAlignment="Top" Width="48" Content="Name" />
        <TextBox Text="{Binding Name, Mode=TwoWay}" Height="23" HorizontalAlignment="Left" Margin="13,205,0,0" Name="NameTextBox" VerticalAlignment="Top" Width="74" />
        <sdk:Label Content="Date" Height="18" HorizontalAlignment="Left" Margin="97,187,0,0" Name="label2" VerticalAlignment="Top" Width="48" />
        <sdk:Label Content="Cost" Height="18" HorizontalAlignment="Left" Margin="203,187,0,0" Name="label3" VerticalAlignment="Top" Width="48" />
        <sdk:Label Content="Who paid" Height="18" HorizontalAlignment="Left" Margin="257,187,0,0" Name="label4" VerticalAlignment="Top" Width="63" />

        <TextBox Text="{Binding Cost, Mode=TwoWay, ValidatesOnExceptions=True}" Height="23" HorizontalAlignment="Left" Margin="203,205,0,0" Name="CostTextBox" VerticalAlignment="Top" Width="48" />

        <sdk:Label Content="Who owes" Height="18" HorizontalAlignment="Left" Margin="337,187,0,0" Name="label5" VerticalAlignment="Top" Width="63" />
        <sdk:AutoCompleteBox Height="23" HorizontalAlignment="Left" Margin="337,205,0,0" Name="WhoOwesInput" VerticalAlignment="Top" Width="74" ValueMemberBinding="{Binding}" LostFocus="WhoOwesInput_LostFocus" />
        <sdk:Label Content="Receipt" Height="18" HorizontalAlignment="Left" Margin="417,187,0,0" Name="label6" VerticalAlignment="Top" Width="63" />
        <Button Content="Add" Height="30" HorizontalAlignment="Left" Margin="337,154,0,0" Name="AddButton" VerticalAlignment="Top" Width="155" FontSize="15" Click="AddButton_Click" />
        <sdk:DatePicker Text="{Binding Date, Mode=TwoWay}" Height="23" HorizontalAlignment="Left" Margin="97,205,0,0" Name="datePicker1" VerticalAlignment="Top" Width="100" />
        <ComboBox Height="23" HorizontalAlignment="Left" Margin="257,205,0,0" Name="WhoPaidComboBox" VerticalAlignment="Top" Width="74" />
        <ListBox Height="100" HorizontalAlignment="Left" Margin="337,232,0,0" Name="WhoOwesListBox" VerticalAlignment="Top" Width="74" KeyDown="WhoOwesListBox_KeyDown" />
        <TextBox Height="23" HorizontalAlignment="Left" Margin="418,205,0,0" Name="textBox1" VerticalAlignment="Top" Width="74" />
    </Grid>
</UserControl>

Answer 1

When you create a SL application and choose to create a Web Applicatio, the VS template creates a .html file that does exactly what you are looking for. The key parts are the following

<style type="text/css">
html, body {
    height: 100%;
    overflow: auto;
}
body {
    padding: 0;
    margin: 0;
}
#silverlightControlHost {
    height: 100%;
    text-align:center;
}
</style>

And in the <form> the control is wrapped in a <div id="silverlightControlHost"> element.

I would suggest you create a quick test app, select the option to create a hosting web application and then take the markup from there.

Answer 2

Check if your usercontrols are hardcoded some size