cpsc 481 tutorial 5 - university of...
TRANSCRIPT
![Page 1: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/1.jpg)
CPSC 481 – Tutorial 5Intro to Assignment 2 and WPF
Brennan Jones
(based on tutorials by Sowmya Somanath, Alice Thudt, Fateme Rajabiyazdi, and David Ledo)
![Page 2: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/2.jpg)
Plan for Today
• Brief introduction to Project Phase 2
• WPF and XAML
• Some coding exercises
![Page 3: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/3.jpg)
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
![Page 4: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/4.jpg)
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.
![Page 5: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/5.jpg)
Horizontal Prototype Presentations
• Tuesday, November 3 in tutorial (T03)
• Monday, November 9 in tutorial (T01)
![Page 6: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/6.jpg)
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
![Page 7: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/7.jpg)
Final Project Demonstrations
Dec. 7-11:
• Demos will be STRICTLY run from the submitted USB/DVD media.
• ALL team members must participate.
![Page 8: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/8.jpg)
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).
![Page 9: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/9.jpg)
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).
![Page 10: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/10.jpg)
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.
![Page 11: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/11.jpg)
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.
![Page 12: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/12.jpg)
What you should do: Main Project (80%)Heuristic Evaluation:
• Evaluate your FINAL interface using the heuristic evaluation method.
![Page 13: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/13.jpg)
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.
![Page 14: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/14.jpg)
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.
![Page 15: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/15.jpg)
Some Examples: Main Project (80%)
![Page 16: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/16.jpg)
Some Examples: Main Project (80%)
![Page 18: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/18.jpg)
WPF
![Page 19: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/19.jpg)
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#).
![Page 20: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/20.jpg)
Some Resources
• MSDN: https://msdn.microsoft.com/en-us/library/aa970268(v=vs.110).aspx
• WPF tutorial (Christian Mosers): http://www.wpftutorial.net/
![Page 21: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/21.jpg)
WPF Application
1. Select2. Select
3. Rename
![Page 22: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/22.jpg)
WPF Application
![Page 23: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/23.jpg)
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
![Page 24: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/24.jpg)
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.
![Page 25: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/25.jpg)
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>
![Page 26: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/26.jpg)
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>
![Page 27: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/27.jpg)
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>
![Page 28: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/28.jpg)
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>
![Page 29: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/29.jpg)
<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
![Page 30: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/30.jpg)
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.
![Page 31: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/31.jpg)
WPF Event Handling – Button + Label
MainWindow.xaml.cs:
private void Button_Click(object sender, RoutedEventArgs e)
{
label1.Content = "Hello World!";
}
![Page 32: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/32.jpg)
WPF Event Handling – Button
List of events
![Page 33: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/33.jpg)
WPF Event Handling – Button Exercise
• Add MouseEnter and MouseLeave events to your button.
• Change label’s content with appropriate messages.
![Page 34: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/34.jpg)
<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";}
![Page 35: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/35.jpg)
WPF – Radio Box Exercise
Fruit Selection
I Selected:
Apple Orange
![Page 36: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/36.jpg)
<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
![Page 37: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/37.jpg)
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
![Page 38: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/38.jpg)
WPF – Images
Add an image to your project
![Page 39: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/39.jpg)
WPF – Images
Create an Image element:
<Grid><Image HorizontalAlignment="Left" Height="182"Margin="104,55,0,0“ VerticalAlignment="Top" Width="271"/>
</Grid>
![Page 40: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/40.jpg)
WPF – Images
Change Source to your image
![Page 41: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/41.jpg)
WPF – Visibility
Add two images
Change their sources
![Page 42: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/42.jpg)
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
![Page 43: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/43.jpg)
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.
![Page 44: CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca](https://reader031.vdocuments.mx/reader031/viewer/2022022509/5ad379577f8b9a92258e88af/html5/thumbnails/44.jpg)
Next Week
• Please bring your horizontal prototypes—we will have a feedback session.
• Meeting schedule: TBA