0
1.6K
ViewsCómo habilitar bordes en Grid en Xamarin.Forms
Estoy construyendo una grilla en Xamarin.Forms. Y me gustaría agregar bordes como tablas. Pensé que podría agregar el borde al definir filas y columnas, pero fallé. ¿Alguien puede ayudarme? Este es mi código actual.
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) }, } };3 answers
Answer question0
No hay una propiedad de GridView Border pero:
Simplemente configure grid.BackgroundColor en el valor de color de borde deseado, luego configure grid.ColumnSpacing y grid.RowSpacing en algún valor y asegúrese de que todos los controles que agregue a la cuadrícula tengan su propio BackgroundColor configurado correctamente.
0
Aquí está la respuesta completa (en XAML) sin necesidad de escribir un renderizador o efecto personalizado.
El código es poco detallado pero fácil de entender y el resultado es como en la imagen.
Aquí está el código para colocar los bordes en su cuadrícula (y además, tendrá un control total sobre ellos como notó que no hay una línea azul en el extremo izquierdo)
<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>0
<Grid BackgroundColor="White" > <BoxView BackgroundColor="Pink" /> <Grid BackgroundColor="White" Margin="5"> </Grid> </Grid>