When working with the Grid, you will be adding Composites at specific row-column (x-y) coordinates. Quite often the Composites that you add will also be grids themselves: GridComposites.
To help make things a little more transparent, try turning on gridlines on your main grid:
. . . and also turn on gridlines on any child GridComposites:
This helps with positioning the elements in the grid as well as with seeing how many rows/columns you may need. It also helps with sizing rows/columns appropriately.
The code below matches the screenshot above. See if you can match up each line of code to the UI element in the screenshot?
thisComposite = myGrid.BeginComposite<Grid>(gridguid1)
.ShowGridLinesOnGridComposite<Grid>()
.AddAnything<Label, Grid>(0, 0)
.AddAnything<TextBox, Grid>(1, 1)
.AddAnything<TextBox, Grid>(2, 1)
.SubscribeEvent<TextBox, Grid>(2, 1, "TextChanged", new TextChangedEventHandler(
(sender, e) => { MessageBox.Show("Text Changed Added Length: " + e.Changes.ToList().FirstOrDefault().AddedLength.ToString()); }
))
.AddText<Grid>(1, 0, "Attraction:")
.AddText<Grid>(2, 0, "Location:")
.AddText<Grid>(3, 0, "Parking Garage Color:")
.AddText<Grid>(4, 0, "Flight:")
.AddText<Grid>(5, 0, "Hotel:")
.SubscribeEventOnContainer<Grid, Grid>("GotFocus", new RoutedEventHandler(
(sender, e) => { MessageBox.Show("GotFocus " + e.Source.ToString()); }))
.AddExisting<ComboBox, Grid>(3, 1, cb)
.AddAnything<TextBox, Grid>(4, 1)
.AddAnything<TextBox, Grid>(5, 1)
.AddExisting<Border, Grid>(7, 1, borderButton)
.AddExisting<Border, Grid>(8, 1, flatButton)
.AddExisting<Border, Grid>(9, 1, flatButton2)
.AddExisting<Border, Grid>(10, 1, validateButton)
.EndComposite<Grid, GridArgs>(new GridArgs(0, 0));
thisComposite.GetChildFromComposite<TextBox, Grid>(5, 1).Text="hi!";
Note that GridArgs tells the main grid where to place the particular GridComposite as a whole in terms of rows/columns (x-y coordinates) on the main grid. So GridArgs(0,0) would indicate the cell in the first row, first column. The composite itself then contains a grid onto which you can add UI Elements positioned at x and y coordinates corresponding to rows and columns.
Here is a longer example including BeginSettings . . . EndSettings:
string gridguid1 = Guid.NewGuid().ToString();
string gridguid2 = Guid.NewGuid().ToString();
string gridguid3 = Guid.NewGuid().ToString();
myGrid.Initialize(double.NaN, double.NaN, 23D, ContainerType.Grid, 2, 3, 0.33, GridUnitType.Star, 0.8D, GridUnitType.Star);
myGrid.SetCompositeGridDimensions<Grid>(10, 3, 0.33, GridUnitType.Star, 0.13D, GridUnitType.Star);
myGrid.ShowGridLines = true;
//BEGIN SETTINGS . . . END SETTINGS
myGrid.BeginSettings<Grid>()
.SetBackgroundColor<Grid>(Brushes.Beige)
.SetUseLayoutRounding<Grid>(true)
.SetFont(0, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetFont(1, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetFont(2, 1, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetFont(3, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetFont(4, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetFont(5, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetTextBackground(0, 0, Brushes.Aqua)
.SetHorizontalAlignment<Grid>(1, 1, TextAlignment.Center)
.SetHorizontalAlignment<Grid>(2, 1, TextAlignment.Center)
.SetTextEffect<Grid>(0, 0, new System.Windows.Media.Effects.DropShadowEffect())
.Set<CheckBox, Grid>("Content", "Hello World")
.Set<TextBox, Grid>("MaxHeight", 30D)
.Set<TextBox, Grid>(1, 1, "Text", "Lake Michigan")
.Set<TextBox, Grid>(2, 1, "Text", "Chicago, Illinois")
.Set<TextBox, Grid>("Margin", new Thickness(1, 3, 1, 3))
.Set<ListBox, Grid>("Margin", new Thickness(1, 1, 1, 1))
.SetVerticalAlignment<Grid>(2, 1, VerticalAlignment.Bottom)
.SetVerticalAlignment<Grid>(3, 1, VerticalAlignment.Top)
.SetAttachedProperty<Label, Grid>(
"ColumnSpan", 0, 0, obj => { obj.SetValue(Grid.ColumnSpanProperty, 2); })
.Set<Label, Grid>("Content", "Add a New Vacation")
.Set<Label, Grid>("HorizontalContentAlignment", HorizontalAlignment.Left)
.Set<Label, Grid>("Background", Brushes.GhostWhite)
.SetVerticalAlignment<Grid>(0, 0, VerticalAlignment.Center)
.SetHorizontalAlignment<Grid>(0, 0, TextAlignment.Center)
.SetHorizontalAlignment<Grid>(1, 0, TextAlignment.Right)
.SetHorizontalAlignment<Grid>(3, 0, TextAlignment.Right)
.SetHorizontalAlignment<Grid>(4, 0, TextAlignment.Right)
.SetHorizontalAlignment<Grid>(5, 0, TextAlignment.Right)
.SetVerticalAlignment<Grid>(1, 0, VerticalAlignment.Center)
.SetTextPadding<Grid>(1, 0, new Thickness(7))
.SetHorizontalAlignment<Grid>(2, 0, TextAlignment.Right)
.SetVerticalAlignment<Grid>(2, 0, VerticalAlignment.Center)
.SetVerticalAlignment<Grid>(3, 0, VerticalAlignment.Center)
.SetVerticalAlignment<Grid>(4, 0, VerticalAlignment.Center)
.SetVerticalAlignment<Grid>(5, 0, VerticalAlignment.Center)
.SetTextPadding<Grid>(2, 0, new Thickness(7))
.SetTextPadding<Grid>(3, 0, new Thickness(7))
.SetTextPadding<Grid>(4, 0, new Thickness(7))
.SetTextPadding<Grid>(5, 0, new Thickness(7))
.SetFont(2, 0, "Arial", 11, FontWeights.Bold, FontStyles.Normal)
.SetItemBorderColorAndThickness(Brushes.Blue, new Thickness(0))
.EndSettings<Grid>();
myGrid.SubscribeMouseDoubleClick(new MouseButtonEventHandler(my_MouseDoubleClick));
//BEGIN COMPOSITE . . . END COMPOSITE
myGrid.BeginComposite<Grid>(gridguid1)
.AddAnything<TextBox, Grid>(1, 1)
.AddAnything<TextBox, Grid>(2, 1)
.SubscribeEvent<TextBox, Grid>(2, 1, "TextChanged", new TextChangedEventHandler(
(sender, e) => { MessageBox.Show("Text Changed Added Length: " + e.Changes.ToList().FirstOrDefault().AddedLength.ToString()); }
))
.AddText<Grid>(1, 0, "Attraction:")
.AddText<Grid>(2, 0, "Location:")
.AddText<Grid>(4, 0, "Flight:")
.AddText<Grid>(5, 0, "Hotel:")
.AddAnything<Label, Grid>(0, 0)
.SubscribeEventOnContainer<Grid, Grid>("GotFocus", new RoutedEventHandler(
(sender, e) => { MessageBox.Show("GotFocus " + e.Source.ToString()); }))
.AddText<Grid>(3, 0, "Parking Garage Color:")
.AddExisting<ComboBox, Grid>(3, 1, cb)
.AddAnything<TextBox, Grid>(4, 1)
.AddAnything<TextBox, Grid>(5, 1)
.AddExisting<Border, Grid>(7, 1, borderButton)
.AddExisting<Border, Grid>(8, 1, flatButton)
.AddExisting<Border, Grid>(9, 1, flatButton2)
// .SetMouseOverColorOnContainer<Grid, Grid>(Brushes.Silver)
.EndComposite<Grid, GridArgs>(new GridArgs(0, 0));