So, I was reading through a topic in docs, and one of the samples has a Grid, but that Grid looked sleek and neat that I'm not familiar with, it didn't have the <ColumnDefinitions> and <RowDefinitions> tags, children defines their position in the Grid as normal by the attached properties Grid.Column and Grid.Row, and the Grid does the positioning without the need of precedent definitions of rows and columns, for example if you need to accomplish this design:
You can write this:
It will look through the attached properties and compute the needed columns and rows, for example the highest Grid.Column value for the outer Grid is 3, thus it has 4 columns, similarly, the highest Grid.Row value is 1 thus it has 2 rows.
You don't need to write all this:
Look how much code you saved, this is so satisfying!
Please note that we can benefit from this auto-definitions only when we don't have customized columns and rows (i.e., defining Width for columns and Height for rows).
You can write this:
<Grid> <Grid ColumnSpacing="0" RowSpacing="0" Grid.ColumnSpan="3"> <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Red">A</Label> <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" BackgroundColor="Green">B</Label> <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Blue">C</Label> <Label Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" BackgroundColor="Yellow">D</Label> <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Purple">E</Label> </Grid> <BoxView Grid.Column="3"/> <BoxView Grid.Row="1"/> </Grid>
It will look through the attached properties and compute the needed columns and rows, for example the highest Grid.Column value for the outer Grid is 3, thus it has 4 columns, similarly, the highest Grid.Row value is 1 thus it has 2 rows.
You don't need to write all this:
<Grid> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Grid ColumnSpacing="0" RowSpacing="0" Grid.ColumnSpan="3"> <Grid.RowDefinitions> <RowDefinition/> <RowDefinition/> <RowDefinition/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition/> <ColumnDefinition/> <ColumnDefinition/> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" BackgroundColor="Red">A</Label> <Label Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" BackgroundColor="Green">B</Label> <Label Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Blue">C</Label> <Label Grid.Row="1" Grid.Column="2" Grid.RowSpan="2" BackgroundColor="Yellow">D</Label> <Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Purple">E</Label> </Grid> <BoxView Grid.Column="3"/> <BoxView Grid.Row="1"/> </Grid>
Look how much code you saved, this is so satisfying!
Please note that we can benefit from this auto-definitions only when we don't have customized columns and rows (i.e., defining Width for columns and Height for rows).
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.