CODEWITHSUNDEEP
xamllayoutwindows-phone
Bayern
Bayern

Reputation: 350

How to use full width of Phone in xaml?

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?

enter image description here

Upvotes: 2

Views: 322

Answers (1)

Bart
Bart

Reputation: 10015

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.

Upvotes: 2

Related Questions