Search code examples
xamarinxamarin.formsxamarin-studio

How to merge Grid.Column in Grid Xamarin.Form


Good Day to everyone, I have Grid that has 4 columns I wanted to merge column#2 and and Column#3, like the picture below, But the problem is each entry is assign to specific Grid.Column. How do I achieve this? Thank you and Good Day. My Xaml Code:

    <ContentView Grid.Row="0" HorizontalOptions="StartAndExpand" Padding="10" VerticalOptions="CenterAndExpand">
  <Grid RowSpacing="0">
     <Grid.RowDefinitions>
          <RowDefinition Height="1*"/>
          <RowDefinition Height="*"/>
     </Grid.RowDefinitions>  
      <Grid.ColumnDefinitions>
          <ColumnDefinition Width="1*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
      </Grid.ColumnDefinitions>
     <Image Grid.Column="0"
            Grid.Row="0"
            Grid.RowSpan="2"
            Source="contact.png" 
            HorizontalOptions="CenterAndExpand"
            VerticalOptions="CenterAndExpand"
            />
      <Label Grid.Row="0"
             Grid.Column="1"
             FontAttributes="Bold"
             HorizontalOptions="Start" 
             Text="Number:"
             TextColor="White" 
             VerticalOptions="Center"/>
      <Label Grid.Row="1"
            Grid.Column="1"
            FontAttributes="Bold" 
            HorizontalOptions="Start"
            Text="Name:"
            TextColor="White"
            VerticalOptions="Center"/>

    <Entry  Grid.Row="0"
            Grid.Column="2"
            FontAttributes="Bold"
            IsEnabled="False"
            HorizontalOptions="Start"
            Text="911"
            TextColor="White"
            VerticalOptions="Center"/>
    <Entry  Grid.Row="1"
            Grid.Column="2"
            IsEnabled="False"
            FontAttributes="Bold"
            HorizontalOptions="Start"
            Text="Andreson Smith"
            TextColor="White"
            VerticalOptions="Center"/>
     </Grid>
   </ContentView>

enter image description here


Solution

  • You want to set Grid.Column and Grid.ColumnSpan on the elements that you want to take up multiple columns:

    <Entry  Grid.Row="0"
            Grid.Column="2"
            Grid.ColumnSpan="2"
            FontAttributes="Bold"
            IsEnabled="False"
            HorizontalOptions="Start"
            Text="911"
            TextColor="White"
            VerticalOptions="Center"/>
    

    This Entry will start in column #2 and span 2 columns, thus "merging" columns #2 and #3 for this element.