CPSC 481 – Tutorial 5Intro to Assignment 2 and WPF

Brennan Jones

bdgjones@ucalgary.ca

(based on tutorials by Sowmya Somanath, Alice Thudt, Fateme Rajabiyazdi, and David Ledo)

Plan for Today

• Brief introduction to Project Phase 2

• WPF and XAML

• Some coding exercises

Project Phase 2

Continuation of the interface your team started designing (ideally).

Two more design evolutions:

1. Horizontal medium-fidelity prototype (20%)

2. Moderately robust system that implements vertical functionality (80%)

Prototype using C#

Perform a heuristic evaluation

Horizontal Prototype Deadlines

Monday Nov. 2 in class:

1. Write-up – including redesign rational (i.e., changes from the first prototype), screen snapshots, and a grading sheet (from assignment handout)

2. Horizontal prototype presentation freeze

• Either email your slides to me (bdgjones@ucalgary.ca) OR submit them on a USB along with your write-up.

Horizontal Prototype Presentations

• Tuesday, November 3 in tutorial (T03)

• Monday, November 9 in tutorial (T01)

Main Project Deadlines

Friday Dec. 4 in class:

1. Complete portfolio (Assignment 1 + new stuff)

2. Redesign rational

3. Implementation freeze—no more changing code after this point

4. Latest screen snapshots

5. Heuristic evaluation of final system

6. Final discussion

7. USB/DVD:a. All source code (project)b. Required data filesc. README file

Final Project Demonstrations

Dec. 7-11:

• Demos will be STRICTLY run from the submitted USB/DVD media.

• ALL team members must participate.

What you should do: Horizontal Prototype (20%)Redesign your interface:

• Following up on Assignment 1 design.

• In case Assignment 1 direction was unsuccessful, come up with a new idea for a novel system design (IF you do this, I need to know about it).

• Implement a medium-fidelity horizontal prototype using C#—main screens (widget selection and placement).

What you should do: Horizontal Prototype (20%)Write-up:

• Two-page redesign rational (main reasons for change).

• Screen snapshots of your screens (but not counted towards the two-page count).

What you should do: Horizontal Prototype (20%)Presentations:

• MUST be submitted on Nov. 2 in lecture (with your write-up).

• Present screen snapshots of your medium-fi prototype.

What you should do: Main Project (80%)Redesign your interface (again):

• Evaluate your interface using any of the following: heuristic evaluation, walkthrough, or others you learnt in class.

• Implement a substantial part of the vertical functionality (screens, error messages, input handling, etc.).• Anything that you think is interesting should be

functional and demo-able.

What you should do: Main Project (80%)Heuristic Evaluation:

• Evaluate your FINAL interface using the heuristic evaluation method.

What you should do: Main Project (80%)Electronic submission (USB/DVD):

• All source code and data files for the final version of your working project.

• README file – your names, instructions on how to use the system, what cases/functions were implemented, what kind of data needs to be input, etc.

• Test your code on the lab machine before you submit.

What you should do: Main Project (80%)Final demonstration:

• You will demo to me and Ehud (a timetable will be posted by me).

• Test your demo on the lab computer and using the projector before the final demo.

Some Examples: Main Project (80%)

Some Examples: Main Project (80%)

Some Examples: Main Project (80%)

• http://youtu.be/xzGwc0rvAww

WPF

What is WPF?

• WPF – Windows Presentation Foundation

• Helpful for rendering user interfaces in Windows-based applications.

• Good for rapid interface designing—can create things like labels, textboxes, buttons, etc.

• WPF uses XAML (Extensive Application Markup Language)—an XML-based mark-up language.

• WPF separates the appearance of the interface (implemented using XAML) from its behaviour (implemented in C#).

Some Resources

• MSDN: https://msdn.microsoft.com/en-us/library/aa970268(v=vs.110).aspx

• WPF tutorial (Christian Mosers): http://www.wpftutorial.net/

WPF Application

1. Select2. Select

3. Rename

WPF Application

WPF Application – XAML

<Window x:Class="_481WPF1Examples.MainWindow"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="MainWindow" Height="350" Width="525">

<Grid>

</Grid>

</Window>

• XAML code: MainWindow.xaml

• C# code: MainWindow.xaml.cs

WPF Application – Layouts

• The Grid is a layout panel that arranges its child controls in a tabular structure of rows and columns. Its functionality is similar to the HTML table but more flexible.

• The StackPanel is simple layout in WPF. It stacks its child elements below or besides each other depending on its orientation. Useful for creating any kinds of lists.

• There are others: Dock panel, Wrap panel and Canvas panel.

WPF Application – Grid Layout

<Grid Height="320" VerticalAlignment="Bottom"><Grid.RowDefinitions>

<RowDefinition Height="Auto" /><RowDefinition Height="38" />

</Grid.RowDefinitions><Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" /><ColumnDefinition Width="200"/>

</Grid.ColumnDefinitions><Label Grid.Row="0" Grid.Column="0"

Content="Name:"/><Label Grid.Row="1" Grid.Column="0"

Content="E-Mail:"/><Label Grid.Column="1" Grid.Row="0"

Margin="3" Content="Sowmya Somanath"/><Label Grid.Column="1" Grid.Row="1"

Margin="3"Content="ssomanat@ucalgary.ca"/>

</Grid>

WPF Application – StackPanel Layout

<StackPanel><TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock><Button Margin="10">Black</Button><Button Margin="10">With milk</Button><Button Margin="10">With Sugar</Button>

</StackPanel>

WPF – Buttons

• Drag and drop from TOOLBOX onto the main screen in MainWindow.xaml

• XAML code:

<Grid><Button Content="Click Here" HorizontalAlignment="Left" Margin="101,123,0,0" VerticalAlignment="Top" Width="210" Height="90“/></Grid>

WPF – Labels

• Drag and drop from TOOLBOX onto the main screen in MainWindow.xaml

• XAML code:

<Grid><Label Content="Label" HorizontalAlignment="Left" Margin="101,70,0,0" VerticalAlignment="Top" Width="210"/></Grid>

<Grid>

<Button Name="button1" Content="Click Here" HorizontalAlignment="Left" Margin="101,123,0,0" VerticalAlignment="Top" Width="210" Height="90" Click="Button_Click"/>

<Label Name="label1" Content="Label" HorizontalAlignment="Left" Margin="101,70,0,0" VerticalAlignment="Top" Width="210"/>

</Grid>

WPF – Button + Label

WPF Event Handling – Button + Label

Double click on your button, and it should redirect you to MainWindow.xaml.cs:

private void Button_Click(object sender, RoutedEventArgs e)

{

}

• This is an event handler for button click.

• Events are messages constantly sent by the visual elements to your main program.

WPF Event Handling – Button + Label

MainWindow.xaml.cs:

private void Button_Click(object sender, RoutedEventArgs e)

{

label1.Content = "Hello World!";

}

WPF Event Handling – Button

List of events

WPF Event Handling – Button Exercise

• Add MouseEnter and MouseLeave events to your button.

• Change label’s content with appropriate messages.

<Label Name="label1" Content="" HorizontalAlignment="Left"Margin="164,112,0,0" VerticalAlignment="Top" Width="210"/><Button Content="Button" HorizontalAlignment="Left"Height="100" Margin="103,159,0,0" VerticalAlignment="Top"Width="308" MouseEnter="Button_MouseEnter"MouseLeave="Button_MouseLeave"/>

WPF Event Handling – Button Exercise

private void Button_MouseEnter(object sender, MouseEventArgs e){

label1.Content = "Mouse Enter";}

private void Button_MouseLeave(object sender, MouseEventArgs e){

label1.Content = "Mouse Leave";}

WPF – Radio Box Exercise

Fruit Selection

I Selected:

Apple Orange

<Grid><Label Name="label1" Content="" HorizontalAlignment="Left"

Margin="164,112,0,0" VerticalAlignment="Top" Width="210"/><RadioButton Name="radial1" Content="Apples"

HorizontalAlignment="Left" Margin="59,219,0,0"VerticalAlignment="Top" Checked="radial1_Checked"BorderThickness="3"/>

<RadioButton Name="radial2" Content="Oranges"HorizontalAlignment="Left" Margin="219,222,0,0"VerticalAlignment="Top" Checked="radial2_Checked"BorderThickness="3"/>

<Label Content="Fruit Selection" HorizontalAlignment="Left"Height="45" Margin="10,10,0,0" VerticalAlignment="Top" Width="487"FontWeight="Bold" FontSize="20"/>

<Label Content="I Selected:" HorizontalAlignment="Left"Height="26" Margin="41,112,0,0" VerticalAlignment="Top" Width="82"/>

</Grid>

WPF – Radio Box Exercise

private void radial1_Checked(object sender, RoutedEventArgs e){

bool radial1val = radial1.IsChecked.Value;if (radial1val == true){

label1.Content = "Apples";}else{

label1.Content = "";}

}

* Similarly for radio box 2.

WPF – Radio Box Exercise

WPF – Images

Add an image to your project

WPF – Images

Create an Image element:

<Grid><Image HorizontalAlignment="Left" Height="182"Margin="104,55,0,0“ VerticalAlignment="Top" Width="271"/>

</Grid>

WPF – Images

Change Source to your image

WPF – Visibility

Add two images

Change their sources

WPF – Visibility

In MainWindow.xaml.cs in the radio box event handler:

private void radial1_Checked(object sender, RoutedEventArgs e)

{

bool radial1val = radial1.IsChecked.Value;if (radial1val == true)

{

label1.Content = "Apples";

appleImage.Visibility = Visibility.Visible;

orangeImage.Visibility = Visibility.Hidden;

}else

{

label1.Content = "";}

}

* Similarly for radio box 2.

Add these two lines

Exercise

• Try to create some of the screens from your most-evolved Assignment 1 prototype in WPF.• This is for practice.

• You don’t have to integrate this into your project/portfolio.

Next Week

• Please bring your horizontal prototypes—we will have a feedback session.

• Meeting schedule: TBA