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>
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With