web-dev-qa-db-fra.com

Comment activer les bordures dans la grille dans Xamarin.Forms

Je construis une grille dans Xamarin.Forms. Et je voudrais ajouter des bordures comme des tableaux. J'ai pensé que je pouvais ajouter la bordure lors de la définition des lignes et des colonnes, mais j'ai échoué. Quelqu'un peut-il m'aider? Ceci est mon code actuel.

Grid grid = new Grid {
    VerticalOptions = LayoutOptions.FillAndExpand,
    RowDefinitions = {
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },

    },
    ColumnDefinitions = {
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (5, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
    }
};
c#xamarinxamarin.forms
22
Zachary Bell

Il n'y a pas de propriété Border pour GridView, mais:

Réglez simplement grid.BackgroundColor à la valeur de couleur de bordure souhaitée, puis définissez grid.ColumnSpacing et grid.RowSpacing à une certaine valeur et assurez-vous que tous les contrôles que vous ajoutez à la grille ont leur propre BackgroundColor correctement défini.

25
Daniel Luberda

Voici la réponse complète (en XAML) sans avoir besoin d'écrire un rendu ou un effet personnalisé.

Le code est peu verbeux mais facile à comprendre et le résultat est comme sur l'image

enter image description here

Voici le code pour mettre les bordures sur votre grille (et en plus vous aurez un contrôle total sur elles comme vous remarquez qu'il n'y a pas de ligne bleue à l'extrême gauche)

<Grid BackgroundColor="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"  />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="1" />
  </Grid.ColumnDefinitions>
  <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
  <!--Your stuff here!-->
  <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>

  <!--Vertical lines and no "stuff"-->
  <BoxView Grid.Column="1" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="3" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="5" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="7" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
</Grid>
26
Sturla

enter image description here

  <Grid BackgroundColor="White" >
        <BoxView BackgroundColor="Pink"  />
        <Grid BackgroundColor="White" Margin="5">

        </Grid>
    </Grid>
10
Abdullah Tahan

Je viens de remarquer que mon exemple est similaire à celui de Sturla mais un peu différent, donc je vais le laisser.

Le code n'est pas super joli mais j'ai fait quelque chose de similaire en ajoutant un 1px BoxView entre chaque colonne puis 1 au dessus de votre Grid et un au bas de votre Grid , ainsi:

<Grid VerticalOptions="FillAndExpand"
      HorizontalOptions="FillAndExpand"
      RowSpacing="0"
      ColumnSpacing="0">

  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*"/>
  </Grid.ColumnDefinitions>

  <Grid.RowDefinitions>
    <RowDefinition Height="1"/>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="1"/>
  </Grid.RowDefinitions>

  <BoxView BackgroundColor="Black"
           HeightRequest="1"
           HorizontalOptions="FillAndExpand"
           Grid.Row="0"/>

  <Grid VerticalOptions="Start"
        ColumnSpacing="0"
        Grid.Row="1">

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="1"/>
      <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Button Text="Button 1"/>

    <BoxView BackgroundColor="Black"
             WidthRequest="1"
             VerticalOptions="FillAndExpand"
             Grid.Column="1"/>

    <Button Text="Button 1"
            Grid.Column="2"/>
  </Grid>

  <BoxView BackgroundColor="Black"
           HeightRequest="1"
           HorizontalOptions="FillAndExpand"
           Grid.Row="2"/>
</Grid>

* Edit: Depuis que j'ai écrit ceci, j'ai changé un peu la façon dont je le fais. Maintenant, comme la réponse de Daniel Luberda, j'ai simplement défini le Grid.BackgroundColor Sur Color.Black Et ensuite je peux supprimer tous les BoxViews et j'ai terminé. Je le fais parce que je suppose qu'il est beaucoup mieux d'avoir peu de vues à l'écran, surtout si vous mettez quelque chose comme ce qui précède dans un ListView.

De plus, comme beaucoup de mes pages animeront les Buttons lors du chargement de la page (en utilisant ScaleTo()), j'ai initialement défini le Grid.BackgroundColor Sur Color.Transparent Ou Color.White Puis une fois l'animation terminée, je la change en Color.Black. A assez bien fonctionné jusqu'à présent.

6
hvaughan3

Si vous souhaitez une solution avec des frontières plus égales que la réponse de Daniel Luberda, voici ce que j'ai utilisé:

Créez une grille dans laquelle vous souhaitez que l'élément ait des bordures. Mettez l'espacement entre les colonnes et les lignes à 0. Pour chaque élément de la grille, créez une autre grille avec une Boxview et votre vue au-dessus de cette Boxview. Ensuite, mettez chaque BoxView à remplir et à développer. Ajustez ensuite le remplissage de ces "sous" -Grids comme vous le souhaitez. Chaque élément de votre grille sera également séparé.

C'est assez lourd cependant.

3
Francis R.