How Windows Phone StackPanel Child Element share avaiable width

Question

In windows Phone XAML, I have a StackPanel in Horizontal Orientation and I want it's child UI controls to share equal available width equally or in my case, I want TextBlock to share 1/3 and TextBox to get 2/3 of available width. How I can get that without giving hard coded values to width?

Below is the code example.

    <StackPanel Orientation="Horizontal">
        <TextBlock Text="Bill Total: " 
                   VerticalAlignment="Center"/>
        <TextBox InputScope="Number" 
                 VerticalAlignment="Center" 
                 PlaceholderText="Bill Total" 
                 AcceptsReturn="True" 
                 x:Name="txtBillTotal"
                 />
    </StackPanel>

har07 har07 · Accepted Answer · 2014-04-19T11:49:51

As far as I can see, you can't do that with StackPanel. Try to use Grid instead with column definitions width set proportionally :

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <TextBlock Text="Bill Total: " 
               VerticalAlignment="Center"/>
    <TextBox Grid.Column="1"
             InputScope="Number" 
             VerticalAlignment="Center" 
             PlaceholderText="Bill Total" 
             AcceptsReturn="True" 
             x:Name="txtBillTotal"
             />
</Grid>

That will set the 2nd column twice wider than the 1st, which means 2/3 Grid width. And the rest 1/3 given to the 1st column.

How Windows Phone StackPanel Child Element share avaiable width

1 Answers