How to enable borders in Grid in Xamarin.Forms
<Grid BackgroundColor="White" >
<BoxView BackgroundColor="Pink" />
<Grid BackgroundColor="White" Margin="5">
</Grid>
</Grid>
There's no Border
property for GridView
, but:
Just set grid.BackgroundColor
to your desired border color value, then set grid.ColumnSpacing
and grid.RowSpacing
to some value and make sure all controls you add to the grid have own BackgroundColor
set correctly.
Here is the full answer (in XAML) without needing to write a custom renderer or Effect.
The code is little verbose but easy to understand and the result is like on the image
Here is the code to put the borders on your grid (and whats more you´ll have total control over them like you notice there is no blue line on the far left)
<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>