Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 508
jake talledo Avatar asked Aug 09 '16 14:08

jake talledo


People also ask

How do I merge columns in grid?

To enable cell merging, set the allowMerging property to indicate what part or parts of the grid you want to merge, and set the allowMerging property on specific rows and columns to true. Once you do that, the grid will merges cells that have the same content, grouping the data visually.

How do I bind data to grid in xamarin form?

In the main page, add the necessary XML namespace to use SfDataGrid control, set the BindingContext of the page to the ViewModel class, and bind the ItemSource of SfDataGrid with the DataTableCollection.

What is grid layout in xamarin forms?

GridLayout works with a flat-view hierarchy, where child views set their locations in the grid by specifying the rows and columns they should be in.

Which layout control in xamarin forms displays information in columns and rows?

Grid. A Grid is used for displaying elements in rows and columns, which can have proportional or absolute sizes. A grid's rows and columns are specified with the RowDefinitions and ColumnDefinitions properties. To position elements in specific Grid cells, use the Grid.


1 Answers

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.

like image 57
DavidS Avatar answered Sep 27 '22 22:09

DavidS