0
1.6K
ViewsHow to enable borders in Grid in Xamarin.Forms
I'm building a grid in Xamarin.Forms. And I'd like to add borders like tables. I thought that I could add the border when defining rows and columns, but failed. Can anyone help me? This is my current code.
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
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.
0
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>
0
<Grid BackgroundColor="White" >
<BoxView BackgroundColor="Pink" />
<Grid BackgroundColor="White" Margin="5">
</Grid>
</Grid>