Windows Phone - Set the width of Grid to 100%

I have a ListBox and within its ItemTemplate, I have a Grid, and the Grid has rows with 2 columns each.
My intention is to have the ListBox stretch to 100%. Also the grid inside each ListBoxItems to stretch to 100% of the screen size. The grid's 1st column is to occupy 80% and 2nd column 20% of the screensize.

All the above settings I want to have without explicitly setting the width in pixels (px), but have it by percentages so that according to different screen widths and orientations (Portrait/ Landscape), the controls re size themselves accordingly.

<StackPanel HorizontalAlignment="Stretch">
<TextBlock Text="Sample" />
<ListBox Name="MyListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid Grid.Column="0">
                        <TextBlock Text="Hello" />
                    </Grid>
                    <Grid Grid.Column="1">
                        <TextBlock Text="Hello" />
                    </Grid>
            </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
</StackPanel>

To make the design fluid based on percentages, I would change the xaml as below:

<StackPanel HorizontalAlignment="Stretch">
<TextBlock Text="Sample" />
<ListBox Name="MyListBox">
    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            </Style>
        </ListBox.ItemContainerStyle>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="8*"/>
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
            <Grid Grid.Column="0">
                <TextBlock Text="Hello" />
            </Grid>
            <Grid Grid.Column="1">
                <TextBlock Text="Hello" />
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
</StackPanel>

We have added a styling to ListBoxItem as below:

<Style TargetType="ListBoxItem">
    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
    </Style>
</ListBox.ItemContainerStyle>

This ensures that the ListBoxItem contents stretches to 100%.

Next changes are on the Grid Control inside the ListBox.

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="8*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
<Grid Grid.Column="0">

We want the first column to consume 80% of the width of the Grid and second column to occupy 20%.
Unlike HTML, XAML doesn't directly support percentages.
We specified 8* and 2*. How it works is as follows:
With the * is works as a ratio. The total width ratio (100%) is calculated on runtime as 10 (8+2).
Out of which 80% (8 out of 10) is first column and 20% (2 out of 10) is second column.
Having said that you would already have guessed that instead of 8* and 2*, 80* and 20* also works. This is correct as it works based on ratio.