Comment afficher les traits entre les lignes et les colonnes d'une Grid .Net Maui et son contenu utilisant BoxView?

Question

je veux dessiner une grid ligne par ligne et colonne par colonne avec C#. pour la 1ere ligne creer les traits entre les differentes colonnes et les noms des colonnes sont apparus par contre le contenu du tableau n'est pas apparu , seulement les traits. voila mon code:

//Create a BoxView instance

    var boxView = new BoxView

    {

             Color = Color.FromHex("#E8E9EB"), // Set the color of the BoxView

   };

    var grid = new Grid

    {

       RowSpacing = 1,

        ColumnSpacing = 1,

       Margin = 2,

       BackgroundColor = Colors.LightGray,

      };

//creation des colonnes Header pour chaque site

foreach (var det in distinctsite.OrderBy(x => x.siteordree))

      {

          grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star  }); // Add a column for each site

           grid.Add(new Label { Text = det.siteabrege, FontAttributes = FontAttributes.Bold, HorizontalOptions = LayoutOptions.Center , TextColor = Colors.Black , Padding= new Thickness(5, 0, 5, 0) }, columnCounter, 0);

            columnCounter++;

          grid.Add(new BoxView { Color= Color.FromHex("#E8E9EB") }, columnCounter, 0);

     }

// Création de la cellule pour la couleur (si c'est la première fois) couleur n'est pas apparu

               if (createcouleur == 1)

               {

                  var couleurCell = new Label

                 {

                     Text = couleurlibelle,

                     HorizontalTextAlignment = TextAlignment.Center,

                 };

                  grid.Add(couleurCell, 0, rowIndex);

                  grid.SetRowSpan(couleurCell, myrowspan);

                //grid.Add(new BoxView { Color = Color.FromHex("#E8E9EB") }, 0, myrowspan);

                createcouleur = 0;

             }

pouvez vous m'aider à afficher le contenu de la grid?

Answer 1

Bonjour,

Merci d'avoir sollicité la communauté Q&A France.

Pour afficher des traits entre les lignes et les colonnes d’une Grid dans .NET MAUI en utilisant BoxView, vous pouvez suivre ces étapes :

1. Définissez les RowDefinitions et ColumnDefinitions de votre Grid pour spécifier le nombre de lignes et de colonnes ainsi que leurs tailles respectives.
2. Utilisez les propriétés RowSpacing et ColumnSpacing de la Grid pour définir l’espace entre les lignes et les colonnes.
3. Placez des BoxView éléments dans la Grid en les configurant pour qu’ils s’étendent sur les espaces entre les lignes et les colonnes.

Voici un exemple de code:

<Grid RowSpacing="1" ColumnSpacing="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
        <RowDefinition Height="*" />
        <!-- Ajoutez autant de RowDefinition que nécessaire -->
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <!-- Ajoutez autant de ColumnDefinition que nécessaire -->
    </Grid.ColumnDefinitions>

    <!-- BoxViews pour les traits horizontaux -->
    <BoxView BackgroundColor="Black" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="1" />
    <BoxView BackgroundColor="Black" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" HeightRequest="1" />

    <!-- BoxViews pour les traits verticaux -->
    <BoxView BackgroundColor="Black" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" WidthRequest="1" />
    <BoxView BackgroundColor="Black" Grid.Row="0" Grid.Column="1" Grid.RowSpan="2" WidthRequest="1" />

    <!-- Ajoutez vos autres éléments de contenu ici -->
</Grid>

Dans cet exemple, les BoxView éléments avec BackgroundColor="Black" sont utilisés pour créer des lignes noires entre les lignes et les colonnes. Les propriétés HeightRequest et WidthRequest sont utilisées pour définir l’épaisseur des traits. Vous pouvez ajuster la couleur et l’épaisseur selon vos besoins.

A bientôt

Alexis

Si cette réponse a répondu à votre question, veuillez « Accepter comme réponse » et voter en utilisant « Pouce levé » afin que la pertinence de ce message s’améliore lorsque quelqu’un dans la communauté recherche une requête similaire