Chapter 17 Notes

Title: Mastering the Grid

Summary

So much ado about Labels and the text in them.

Programming Concepts Summary

Programs

Program SimpleGridDemo

Page 459.

Concepts:

1. Table like layout
   1. Rows/Columns
   2. Column (and Row - not covered) spans
   3. Sizing

Classes:

1. Grid

Note:

By Page 463, you have been introduced to all the public properties and methods defined by Grid.

Program SimpleGridDemo

Page 459.

Concepts:

1. Table like layout
   1. Rows/Columns
   2. Column (and Row - not covered) spans
   3. Sizing

Classes:

1. Grid

Program GridCodeDemo

Page 465

Concepts:

1. How to do it in code!
2. Not as important or aesthetically pleasing.

No new classes.

Classes No new.

Program GridBarChart

Page 467

Concepts:

1. Adding a list of views to a grid (cool thing actually) pay attention to the code

2. Make sure to turn the phone for a better view - remember Xamarin automatically allows rotation.

No new classes.

Program GridAlignment

Page 471

Concepts:

1. Survey of alignment options within a cell.
   1. Start
   2. End
   3. Center

No new classes.

Program SpacingButtons

Page 474

Concepts:

This program equally spaces three vertical buttons and three horizontal buttons. The first three buttons occupy a three-row Grid that takes up much of the page, and the three hori-zontal buttons are in a three-column Grid down at the bottom of the page.

All in XAML - just review.

No New classes.

Program GridCellDividers

Page 475

Concepts:

1. Creating cell dividers (out of cells yuk). Notice the deceptive Grid.RowSpan and Grid.ColSpan attributes.

2. Dividing the GridLength in the ResourceDictionary.

No New Classes.

Program GridCellBorders

Page 478

Concepts:

1. Borders again borders out of box views. Weird!

2. A nicer way to layout grids see:

<Grid Grid.Row="1" Grid.Column="1">
 <Label Text="Cell" />
 <BoxView Style="{StaticResource topBorderStyle}" />
 <BoxView Style="{StaticResource bottomBorderStyle}" />
 <BoxView Style="{StaticResource leftBorderStyle}" />
 <BoxView Style="{StaticResource rightBorderStyle}" /> 
</Grid>

No new classes.

Program KeypadGrid

Page 481

Concepts:

1. This is a keypad example. How does yours compare?

2. Why use StyleId instead of Text? Well, you might (just for instance) want to use a different character than a decimal

No new classes.

Using the grid layout for orientation changes

This deserves a section all its own. This is one approach to orientation changes. Portrait vs. Landscape

Program GridRgbSliders

Page 485

Concept:

1. Make two GridLayouts, one for portrait and one for landscape

2. Add some code behind to make changes when the orientation changes.

Review the code on page 486.

No new classes.