How to use full width of Phone in xaml? - xaml

Question

I have 3 controls in a Grid.Row but how can I make them use the full width of the page?
This is my xaml:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="140" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Grid.Row="1"
Source="/Assets/image1.png"
Height="25"
Width="25" />
<TextBox Grid.Column="1"
Margin="10,0,0,0"
Text="{Binding InputText, Mode=TwoWay}"
BorderBrush="Black"
BorderThickness="2"
VerticalAlignment="Center">
</TextBox>
<Button Grid.Column="2"
BorderThickness="2"
HorizontalAlignment="Right"
Command="{Binding AddTextCommand}"
Margin="10,0,0,0">
<TextBlock x:Uid="ButtonText" />
</Button>
</Grid>
This is now the result:
As you can see it is aligned left, how can I make it use the full width?

Answer 1

You're code only shows 3 controls (Image, TextBox, Button), while your screenshot gives 4 controls. I suppose the full width control on top is missing, but that's no problem to answer the question.
If we break down your XAML, you have:
First column width Auto, filled with an image.
Second column width 140, filled with a TextBox
Third column width * (or the rest of the space), filled with a Button
On the button you have placed HorizontalAlignment="Right" (default is Left), in which you're saying: only use the space necessary and put the control on the right side. If you want to use the full width available, you have to use HorizontalAlignment="Stretch".
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="140" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Source="/Assets/image1.png"
Height="25"
Width="25" />
<TextBox Grid.Column="1"
Margin="10,0,0,0"
Text="{Binding InputText, Mode=TwoWay}"
BorderBrush="Black"
BorderThickness="2"
VerticalAlignment="Center">
</TextBox>
<Button Grid.Column="2" x:Uid="ButtonText"
BorderThickness="2"
HorizontalAlignment="Stretch"
Command="{Binding AddTextCommand}"
Margin="10,0,0,0" />
</Grid>
Note that I have also removed the TextBlock from the Button and move the x:Uid tag to the button. Simply use ButtonText.Content in your resources to have your button localized, there's no need to place a TextBlock in there.