Upload
vudang
View
216
Download
2
Embed Size (px)
Citation preview
CPSC 481 – Tutorial 5Intro to Assignment 2 and WPF
Brennan Jones
(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 ([email protected]) 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%)
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="[email protected]"/>
</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