CPSC 481 - Tutorial 5 WPF Applications (based on previous tutorials by Alice Thudt, Fateme Rajabiyazdi, David Ledo, Brennan Jones, and Sowmya Somanath)
Today Horizontal Prototype WPF Applications Controls Events Design Exercise
1. Horizontal Prototype
Horizontal Prototype
Horizontal Prototype
Horizontal Prototype Presentations Tuesday Mar 7 in tutorial (T01) Thursday Mar 9 in tutorial (T02)
Horizontal Prototype Write-up: Two-page redesign rational (main reasons for change) Screen snapshots of your screens (but not counted towards the two-page count)
Horizontal Prototype Work on it during reading break! Suggestion: Avoid implementation unless it helps show/demo your feature We might iterate on it
2. WPF Applications
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
What is WPF? 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#)
Resources MSDN: https://msdn.microsoft.com/en-us/library/ aa970268(v=vs.110).aspx WPF tutorial (Christian Mosers): http://www.wpftutorial.net/
WPF Application
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
WPF Application - Layouts 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
WPF Application - Layouts There are others: Dock panel, Wrap panel and Canvas panel
WPF - 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 - 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 XML Code: <Grid> <Button Content="Click Here" HorizontalAlignment="Left" Margin="101,123,0,0" VerticalAlignment="Top" Width="210" Height="90"/> </Grid>
WPF - Labels <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 - 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 - Button Events Button
Button Exercise Add MouseEnter and MouseLeave events to your button Change label s content with appropriate messages
Button Exercise <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"; }
Radio Box Exercise
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 radiobox2
Image Exercise
Image Exercise Create an Image element: <Grid> <Image HorizontalAlignment="Left" Height="182" Margin="104,55,0,0 VerticalAlignment="Top" Width="271"/> </Grid>
Image Exercise
Image Exercise
Adding Images 1. Create an image control 2. Add your image by Project > Add Existing Item 3. Set the source for that image control
WPF - Visibility Property 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.
Design Exercise
Design 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 Reading Break! Work on your Horizontal Prototypes Following week (Feb 27): Horizontal Prototype Feedback session Must attend, bring your group
Thanks! Any questions? You can find me at: kta@ucalgary.ca http://imgur.com/dna5e3p