Second GUI | Top Grade Essay Writings

Second GUI.

After this lab, students will be able to:

Write XAML by hand
Create a gridded user interface that uses fixed, proportional, and automatic sizing
Put WPF controls inside the grid

Follow these instructions carefully to complete your second GUI assignment. If you have questions at any time, don’t hesitate to raise your hand during lab or to stop by my office.

You’ll do this lab in a pair (or individually, if you don’t make it to lab). As with FirstGUI, you will both be at the same computer. One student will be the pilot (Student A), while the other will be the navigator (Student B).

Introduction to XAML

I’m assuming most people have seen HTML source code before. XAML uses the same underlying syntax as HTML. They are both XML – eXtensible Markup Languages. Instead of <html>, <body>, <p>, and other tags, there are <Window>, <Grid>, <Label>, and other tags – each defining the “document” – our user interface in this case. In this assignment, you’ll be editing the XAML by hand, instead of using the WYSIWYG editor. We’ll go through some of the major XAML tags, then I’ll have you practice creating a gridded user interface.

Before we get too far, here are some useful definitions (see Figure 1 below): <Grid> is a “start tag”, </Grid> is an “end tag” (note how the end tag has a slash, while the start tag does not), Grid is an “element”, while Title, Width, and Height (all part of the Window tag) are “attributes”.

Grid Tag

The Grid tag is used to define a grid of rectangles where you can place controls. One example of a grid is a Tic-Tac-Toe board which has 3 rows and 3 columns. A XAML grid is 1 row tall and 1 column wide by default.

You place the Grid tag within the Window start and end tags as shown here.

You can run the program at this point, but it’s pretty boring.

Grid.RowDefinitions and Grid.ColumnDefinitions Tags

As I mentioned, a grid is 1×1 by default. You add rows and columns by adding a Grid.RowDefinitions and Grid.ColumnDefinitions tag to the Grid. This creates a tree structure – A Grid is inside a Window, Grid.RowDefinitions and Grid.ColumnDefinitions is inside the Grid. This hierarchical tree structure will become more important later when we talk about events and delegates.

An example of adding the Grid.RowDefinitions and Grid.ColumnDefiinitions is shown here. Go ahead and add them now.

RowDefinition Tag

Even though we added these definitions, the grid is still just a 1 row by 1 column. We still need to add the actual rows and columns. We’ll start with rows.

To add a row, just add a RowDefinition tag between the Grid.RowDefinitions start and end tags.

Rows have an important attribute called Height, which we’ll discuss after adding columns. For now, go ahead and add two rows – as shown here. Make sure you include an attribute called Height – set to Auto for right now.

ColumnDefinition Tag

The ColumnDefintion tag is the same as the RowDefinition tag, except it goes between the Grid.ColumnDefinitions start and end tag, and has a Width attribute instead of a Height attribute.

Go ahead and add two columns, creating a 2×2 grid.

Height and Width attribute

The Height and Width attributes are used to define how tall and how wide rows and columns are, respectively. There are three options for what to use inside the string literal parameter.

Fixed – Fixed size of logical units
· Star (*) – Proportional sizing
· Auto – Takes as much space as needed

We’ll look at each in turn.

Fixed Sizing

Fixed width / height parameters are given as an integer. This parameter creates a fixed size of n / 96 inches tall, where n is the number you provide. So, for example:

Will create a row 1/16th inch tall (6 / 96 == 1 / 16). And:

Will create a column exactly one inch wide (96 / 96 == 1).

If a control (ex: a Label, Button, etc.) is too big to fit in a row or column that has fixed sizing, the control will be cut off. Also, when resizing a window that contains fixed size grids, those rows and columns will not grow or shrink to fit the dialog. We’ll discuss these “resizable” grids next.

Proportional (Star) Sizing

You can also set the width and height of a grid area to take up as much space as available after filling all auto and fixed sized columns. To indicate that a row or column should use proportional sizing, add a star after the number: For example:

Would create a row that took up all of the rest of the area of the grid, assuming there were no other rows.

Things get more complicated when you have multiple star rows or columns. In this scenario, you need to consider all of the star sizes as ratios. So, for example:

Would create 2 rows. The first row would take up 3/5th of the space left after fixed and auto sizing, while the second row would take up 2/5th.

Another example may be helpful:

Would create 2 rows. The first row would take up 3/5th of the space left after fixed and auto sizing, while the second row would take up 2/5th.

Another example may be helpful:

Add all of the numbers together to get a common denominator: 1 + 2 + 3 = 6.

The first column takes up 1/6. The second column takes up 2/6 (i.e. 1/3). The third column takes up 3/6 (i.e. 1/2).

For your assignment, I’ll provide a specification of the grid and you’ll need to determine the value to place in the Height or Width field. For proportional sizes, I’ll always give you a series of fractions. You’ll need to:

Find the common denominator between the fractions
Convert them to use that common denominator
Use the numerators with a star to use as the attribute values.

An example might be helpful…

What if you want to have one row take up 1/2 of the space left, 1 row take up 1/4 , and the last row take up 1/4?

The common denominator between 4 and 2 is 4. Converting 1/2 to fourths gives us 2/4. The two 1/4 values stay the same. Then just use the numerators of the fractions, like so:

This would look like this (focus on the row sizes for now, not the columns):

Let’s try one more example: What if the first column should take up 1/6th of the leftover space and the second column should take the rest? See if you can figure it out before reading on.

LEFT BLANK ON PURPOSE

“The rest” is 5/6. Since both have 6 as a denominator, you can just use the numerators in both.

Which would look like this:

Adding Control Tags

After you’ve created the grid, you’ll need to add controls into the grid. Each control has its own tag. To add the control, you need to place the appropriate tag inside the Grid, but not in the Grid.XXXDefinitions tags.

One last practice problem too.

Auto Width / Height

Auto width and height uses only the space that is needed by the controls inside that grid. This minimizes the size of the GUI, but can also make it less easy to read and less aesthetically pleasing. However, this also means the controls are not cut off, as would be the case in a fixed width grid size.

Mixed Width / Height Example

One more example, this time mixing everything together.

Rows

The last row will be 28/96 inches tall.
The first two rows will be sized according to the controls inside those rows.
The third row will take up the rest of the space (Just a star is a shortcut for 1*).

Columns

The right column will be 200/96 inches wide.
The left column will be sized according to the contents of the column.

Adding Control Tags

For example, this is how you add a basic Label:

To place the control inside a particular grid area, you’ll need to add a Grid.Row and Grid.Column attribute to the start tag. Simply use Grid.Row=”n” or Grid.Column=”n”, where n is the index of the row or column you want the control to be added to. The indexes start at 0. So, for example, this image shows the label placed in the 1st row and the 1st column:

Other elements you’ll use for this assignment are <ListBox>, <Button>, and <TextBox>. They all handle the Grid.Row and Grid.Column attributes

Spanning Multiple Columns

Let’s work on adding a button. First, we’ll switch to proportional (star) sizing and put it in row 1, column 0. These steps result in the following XAML file:

This XAML results in a UI that looks like this:

However, this isn’t really what we want. It would be a little nicer if it spread across the whole bottom row.

In order to accomplish this, we’ll need to use the Grid.ColumnSpan attribute. Grid.ColumnSpan=”n” specifies that this control should go across n number of columns. So, if we use Grid.ColumnSpan=”2” (in the XAML file below). We get a button that goes across the whole bottom row (screenshot below).

Note that Grid.RowSpan is also an attribute for controls.

Your Turn

You can decide on your own method of splitting up the work.

1. Change the title of the window to your names
2. Change the initial size of the window to be 200 pixels wide and 300 pixels tall
3. Create a 2×4 grid that looks like the image below, matching these specifications:

First two rows should be exactly ¼ inch tall each
Third row should take up ¾ of what’s left.
Fourth row should take up ¼ of what’s left.
The first column should expand across 1/3 of the window
The second column should expand across the rest.

4. Make sure the label text matches the image. The controls to the right of the labels are

TextBoxes.
5. The third row contains a ListBox. This is where our database results will eventually go.

To finish this assignment, I’ll need you to upload the XAML file to Blackboard. You should also The XAML file can be found by right clicking on the Solution in the Solution Explorer and choosing Open Folder in File Explorer.

This will open the Windows File Explorer. You want the MainWindow file (make sure it’s the Windows Markup file, not the .cs source file):

Posting to Blackboard

Go into our Blackboard course under Assignments. Click the SecondGUI link. Type in both of your GitHub usernames and a link to the repository in the “Comments” box. If you don’t remember how to push to GitHub, check the instructions in FirstGUI. Finally, attach the XAML file and submit. Congratulations on creating your first “gridded” WPF application!

The post Second GUI appeared first on My Assignment Online.

Second GUI