gridcomp.png

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:
myGrid.ShowGridLines = true;
. . . and also turn on gridlines on any child GridComposites:
myGrid.BeginComposite<Grid>(gridguid1).ShowGridLinesOnGridComposite<Grid>() . . .

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));

Last edited Jan 12, 2013 at 7:00 AM by stagathome0069, version 13

Comments

No comments yet.