CPSC 481 - Tutorial 5 Assignment #2 and WPF (based on previous tutorials by Alice Thudt, Fateme Rajabiyazdi, David Ledo, Brennan Jones, Sowmya Somanath, and Kevin Ta)
Introduction
Contact Info li26@ucalgary.ca Please always include [CPSC 481] in the subject header Expect replies in: 24 hours on weekdays 48 hours on weekends http://pages.cpsc.ucalgary.ca/~li26/481/
Assignment #2
Assignment #2 Continuation of the interface your team started designing (ideally). Two more design evolutions: Horizontal prototyping (20%) Moderately robust system that implements vertical functionality (80%) Prototype using C# Perform a heuristic evaluation
Horizontal Prototype Deadline: March 6th (Monday) in class Write-up = including redesign rational (i.e., changes from the first prototype), screen snapshots Horizontal prototype presentation freeze Email your slides (PDF files) to me (li26@ucalgary.ca) OR submit in a USB with your write-up Presentation on 7th / 9th during tutorial
Final Project Deadline: April 7th (Friday) in class Complete portfolio (Assignment 1 + new stuff) Redesign rational Implementation freeze = no more changing code after this point Latest screen snapshots Heuristic evaluation of final system Final discussion
Final Project (cont.) USB / DVD: All source code (executable on any lab machine) Required data files README file
Final Project Demo April 10th ~ 14th in lab Roughly 30 mins ALL team members must participate Be prepared!
Assignment #2 March 6th (Monday) in class Horizontal Prototype Redesign + Presentation Slides Freeze March 7th ~ 9th during tutorial Horizontal Prototype Presentation (20%) April 7th (Friday) in class Final Project Submission April 10th ~ 14th in lab Project Demonstration (80%)
Study the handout!
WPF
What is WPF? Windows Presentation Foundation Rendering user interfaces in Windows-based applications (labels, textboxes, buttons, etc.) Good for rapid interface designing WPF uses XAML (Extensive Application Markup Language) = an XMLbased mark-up language WPF separates the appearance of the interface (implemented using XAML) from its behaviour (implemented in C#)
Starting a Project
WPF Application interface explorer XAML coding area
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
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.
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>
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>
Button 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>
Label Drag and drop from TOOLBOX onto the main screen in MainWindow.xaml XAML code: <Grid> <Label Content="I am a label" HorizontalAlignment="Left" Margin="101,70,0,0" VerticalAlignment="Top" Width="210"/> </Grid>
Event Handling 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.
Event Handling (cont.) MainWindow.xaml.cs: private void Button_Click(object sender, RoutedEventArgs e) { label1.content = Hello World! ; } This changes the label content when the button is pressed.
Event Handling (cont.) List of events
Multiple Events <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"/> private void Button_MouseEnter(object sender, MouseEventArgs e) { label1.content = "Mouse Enter"; } private void Button_MouseLeave(object sender, MouseEventArgs e) { label1.content = "Mouse Leave"; }
Image Add an image to your interface <Grid> <Image HorizontalAlignment="Left" Height="182" Margin="104,55,0,0 VerticalAlignment="Top" Width="271"/> </Grid>
Image (cont.) Change the source to your image
Exercise Fruit Selection I Selected: Apple Orange
Visibility
Visibility (cont.) 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
Next Week More WPF! Feel free to show me your horizontal prototypes
Thank You