CODEWITHSUNDEEP
maui
Naryoril
Naryoril

Reputation: 601

How do I make a grid with gridlines in .NET MAUI?

I want to display data in a grid with gridlines, basically I want it to look like Excel. I don't need a way to edit the data, just display it. How can I do that?

I have tried using a GridLayout, but I couldn't find a way to turn on grid lines. I also tried to add a Border to each Cell of the GridLayout, but even though RowSpacing and ColumnSpacing are set to 0, there is a gap between the borders on Android, and on Windows the lines have twice the intended width, no idea about iOS.

So how do i make a grid with grid lines? Or is there a better control than GridLayout for this?

In case it matters: I'm adding this grid/table programmatically. And in the end I'll need to be able to react to taps on rows.

Edit: The data also needs to be scrollable, e.g. with a ScrollView around the GridLayout. It's also possible that the data doesn't fill out all the available space.

Edit 2: I also tried setting the background color of the grid to black and of the labels inside to white and then add a column and row spacing to achieve gridlines. The problem with that is, that the background color of the grid fills the whole space allotted to the grid. So if there isn't enough data to fill the available space, that empty space is rendered black. Wrapping it inside a Border or Content view as suggested, doesn't work. As an aside: My grid is inside an absolute layout. That layout can contain multiple grids and the their position and size is determined outside my application. The equivalent xaml looks like this:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:viewModel="clr-namespace:something"
             xmlns:resx="clr-namespace:something else"
             x:Class="Maui.Pages.Views"
             x:DataType="viewModel:ViewsViewModel"
             Title="Test">
  <AbsoluteLayout x:Name="ViewLayout"
                  Grid.Column="0"
                  Grid.Row="1"
                  IsVisible="{Binding HasViews}">
    <ScrollView AbsoluteLayout.LayoutBounds="0,0,0.5,1"
                AbsoluteLayout.LayoutFlags="All">
      <ContentView>
        <Grid RowDefinitions="Auto, Auto, Auto"
              ColumnDefinitions="Auto, Auto, Auto"
              BackgroundColor="Black"
              RowSpacing="1"
              ColumnSpacing="1">
          <Label Grid.Row="0"
                 Grid.Column="0"
                 Text="sample text 1"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="0"
                 Text="sample text 2"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="0"
                 Text="sample text 3"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="0"
                 Grid.Column="1"
                 Text="sample text 4"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="1"
                 Text="sample text 5"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="1"
                 Text="sample text 6"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="0"
                 Grid.Column="2"
                 Text="sample text 7"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="1"
                 Grid.Column="2"
                 Text="sample text 8"
                 Padding="4"
                 BackgroundColor="White" />
          <Label Grid.Row="2"
                 Grid.Column="2"
                 Text="sample text 9"
                 Padding="4"
                 BackgroundColor="White" />
        </Grid>
      </ContentView>
    </ScrollView>
  </AbsoluteLayout>
</ContentPage>

And the result looks like this: Grid with background color as grid line replacement

Upvotes: 3

Views: 8835

Answers (2)

Jeff
Jeff

Reputation: 304

Try messing with HorizontalOptions and VerticalOptions. This seems to stop the grid background color from overtaking everything.

<Grid RowDefinitions="Auto, Auto, Auto"
      ColumnDefinitions="Auto, Auto, Auto"
      BackgroundColor="Black"
      RowSpacing="1"
      ColumnSpacing="1"
      HorizontalOptions="Start"
      VerticalOptions="Start">

Upvotes: 1

Quoc Nguyen
Quoc Nguyen

Reputation: 29

I see what you want, but please remember Grid is not a table. For your matter, you can try CollectionView

The Grid should not be confused with tables, and is not intended to present tabular data. Unlike HTML tables, a Grid is intended for laying out content. For displaying tabular data, consider using a ListView or CollectionView. https://learn.microsoft.com/en-us/dotnet/maui/user-interface/layouts/grid?view=net-maui-8.0

Upvotes: 1

Related Questions