How to: Build a Standard UI Dialog Box by Using Grid


This example shows how to create a standard user interface (UI) dialog box by using the Grid element.

The following example creates a dialog box like the Run dialog box in the Windows operating system.

The example creates a Grid and uses the ColumnDefinition and RowDefinition classes to define five columns and four rows.

The example then adds and positions an Image, RunIcon.png, to represent the image that is found in the dialog box. The image is placed in the first column and row of the Grid (the upper-left corner).

Next, the example adds a TextBlock element to the first column, which spans the remaining columns of the first row. It adds another TextBlock element to the second row in the first column, to represent the Open text box. A TextBlock follows, which represents the data entry area.

Finally, the example adds three Button elements to the final row, which represent the OK, Cancel, and Browse events.

            // Create the Grid.
            grid1 = new Grid ();
            grid1.Background = Brushes.Gainsboro;
            grid1.HorizontalAlignment = HorizontalAlignment.Left;
            grid1.VerticalAlignment = VerticalAlignment.Top;
            grid1.ShowGridLines = true;
            grid1.Width = 425;
            grid1.Height = 165;

            // Define the Columns.
            colDef1 = new ColumnDefinition();
            colDef1.Width = new GridLength(1, GridUnitType.Auto);
            colDef2 = new ColumnDefinition();
            colDef2.Width = new GridLength(1, GridUnitType.Star);
            colDef3 = new ColumnDefinition();
            colDef3.Width = new GridLength(1, GridUnitType.Star);
            colDef4 = new ColumnDefinition();
            colDef4.Width = new GridLength(1, GridUnitType.Star);
            colDef5 = new ColumnDefinition();
            colDef5.Width = new GridLength(1, GridUnitType.Star);

            // Define the Rows.
            rowDef1 = new RowDefinition();
            rowDef1.Height = new GridLength(1, GridUnitType.Auto);
            rowDef2 = new RowDefinition();
            rowDef2.Height = new GridLength(1, GridUnitType.Auto);
            rowDef3 = new RowDefinition();
            rowDef3.Height = new GridLength(1, GridUnitType.Star);
            rowDef4 = new RowDefinition();
            rowDef4.Height = new GridLength(1, GridUnitType.Auto);

            // Add the Image.
            img1 = new Image();
            img1.Source = new System.Windows.Media.Imaging.BitmapImage(new Uri("runicon.png", UriKind.Relative));
            Grid.SetRow(img1, 0);
            Grid.SetColumn(img1, 0);

            // Add the main application dialog.
            txt1 = new TextBlock();
            txt1.Text = "Type the name of a program, folder, document, or Internet resource, and Windows will open it for you.";
            txt1.TextWrapping = TextWrapping.Wrap;
            Grid.SetColumnSpan(txt1, 4);
            Grid.SetRow(txt1, 0);
            Grid.SetColumn(txt1, 1);

            // Add the second text cell to the Grid.
            txt2 = new TextBlock();
            txt2.Text = "Open:";
            Grid.SetRow(txt2, 1);
            Grid.SetColumn(txt2, 0);
            // Add the TextBox control.
            tb1 = new TextBox();
            Grid.SetRow(tb1, 1);
            Grid.SetColumn(tb1, 1);
            Grid.SetColumnSpan(tb1, 5);
            // Add the buttons.
            button1 = new Button();
            button2 = new Button();
            button3 = new Button();
            button1.Content = "OK";
            button2.Content = "Cancel";
            button3.Content = "Browse ...";
            Grid.SetRow(button1, 3);
            Grid.SetColumn(button1, 2);
            button1.Margin = new Thickness(10, 0, 10, 15);
            button2.Margin = new Thickness(10, 0, 10, 15);
            button3.Margin = new Thickness(10, 0, 10, 15);
            Grid.SetRow(button2, 3);
            Grid.SetColumn(button2, 3);
            Grid.SetRow(button3, 3);
            Grid.SetColumn(button3, 4);
            mainWindow.Content = grid1;

Panels Overview
How-to Topics