Come abilitare i bordi nella griglia in Xamarin.forms

Sto costruendo una griglia in Xamarin.forms. E mi piacerebbe aggiungere bordi come tabelle. Ho pensato che avrei potuto aggiungere il bordo durante la definizione di righe e colonne, ma non ci sono riuscito. Qualcuno può aiutarmi? Questo è il mio codice corrente.Come abilitare i bordi nella griglia in Xamarin.forms

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) }, 
    } 
};

fonte

2015-07-16 Eiji Kimura

Non c'è Border immobili per GridView, ma:

Basta impostare grid.BackgroundColor al valore di colore del bordo desiderato, quindi impostare grid.ColumnSpacing e grid.RowSpacing di un certo valore e assicurarsi che tutti i controlli si aggiungono alla rete hanno proprio BackgroundColor impostato correttamente.

fonte

2015-07-16 13:58:47

A meno che non manchi qualcosa.Ciò crea bordi non uniformi, ovvero: la parte superiore e inferiore della griglia sarà di 1 pixel, ma i separatori saranno tutti 2 pixel. La mancanza di un modello box appropriato sembra essere un vero problema per un controllo fondamentale come questo. – Kinetic

Ecco la risposta completa (in XAML) senza la necessità di scrivere un renderer o un Effetto personalizzato.

Il codice è poco prolisso, ma di facile comprensione e il risultato è come sull'immagine

Qui è il codice per mettere i confini sulla griglia (e che cosa è più avrete modo hanno totale il controllo su di loro come si nota non esiste una linea blu all'estrema sinistra)

<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>

fonte

2016-09-01 13:06:11 Sturla

appena notato il mio esempio è simile a Sturla di, ma un po 'diverso in modo da lascerò in su.

Il codice non è super bella, ma ho fatto qualcosa di simile con l'aggiunta di un 1px BoxView tra ogni colonna e poi 1 sulla parte superiore del Grid e uno sulla parte inferiore del vostro Grid, in questo modo:

<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>

* Modifica: da quando ho scritto questo, ho cambiato il modo in cui lo faccio un po '. Ora, come la risposta di Daniel Luberda, ho semplicemente impostato il Grid.BackgroundColor su Color.Black e quindi posso rimuovere tutti gli BoxView s e ho finito. Lo faccio perché presumo che sia molto meglio avere poche visualizzazioni sullo schermo, specialmente se stai mettendo qualcosa come sopra in un ListView.

Inoltre, dal momento che un sacco di mie pagine animerà le Button s quando il caricamento della pagina (utilizzando ScaleTo()) Inizialmente ho impostato il Grid.BackgroundColor-Color.Transparent o Color.White e poi una volta l'animazione è fatto, lo cambio a Color.Black. Ha funzionato abbastanza bene finora.

fonte

2016-09-01 13:23:42 hvaughan3

Sembra una soluzione interessante –

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

     </Grid> 
    </Grid>

fonte

2017-02-23 13:10:25

Stavo parlando dei margini di spaziatura tra righe e colonne. –

il miglior lavoro intorno sta usando fotogramma, ma al momento non il suo lavoro su Android \t –

Se si desidera una soluzione con i bordi più uguale degli anwser Daniel Luberda'S, ecco cosa ho usato:

fare una griglia in cui si desidera elemento di avere confini. Metti la spaziatura tra colonne e righe su 0. Per ogni elemento della griglia, crea un'altra griglia con un Boxview e la tua vista sopra quella Boxview. Quindi, inserisci ciascun BoxView per riempirlo ed espanderlo. Quindi regola il padding di questi "under" -Grids come preferisci. Ogni elemento della tua griglia verrà separato equamente.

Questo è piuttosto pesante però.

fonte

2017-09-08 18:56:37

potrebbe condividere alcuni C# per quello? Sarebbe davvero fantastico. – tmighty

Come abilitare i bordi nella griglia in Xamarin.forms

risposta

Problemi correlati