CPSC Tutorial 5 WPF Applications

Size: px

Start display at page:

Download "CPSC Tutorial 5 WPF Applications"

Emory Thompson
6 years ago
Views:

1 CPSC Tutorial 5 WPF Applications (based on previous tutorials by Alice Thudt, Fateme Rajabiyazdi, David Ledo, Brennan Jones, and Sowmya Somanath)

2 Today Horizontal Prototype WPF Applications Controls Events Design Exercise

3 1. Horizontal Prototype

4 Horizontal Prototype

5 Horizontal Prototype

6 Horizontal Prototype Presentations Tuesday Mar 7 in tutorial (T01) Thursday Mar 9 in tutorial (T02)

7 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)

8 Horizontal Prototype Work on it during reading break! Suggestion: Avoid implementation unless it helps show/demo your feature We might iterate on it

9 2. WPF Applications

10 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

11 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#)

12 Resources MSDN: aa970268(v=vs.110).aspx WPF tutorial (Christian Mosers):

13 WPF Application

14 WPF Application

15 WPF Application - XAML <Window x:class="_481wpf1examples.mainwindow" xmlns=" xmlns:x=" Title="MainWindow" Height="350" Width="525"> <Grid> </Grid> </Window> XAML code: MainWindow.xaml C# code: MainWindow.xaml.cs

16 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

17 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

18 WPF Application - Layouts There are others: Dock panel, Wrap panel and Canvas panel

19 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=" "/> <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>

20 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>

21 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>

22 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>

23 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.

24 Event Handling - Button Events Button

25 Button Exercise Add MouseEnter and MouseLeave events to your button Change label s content with appropriate messages

26 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"; }

27 Radio Box Exercise

28 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

29 Image Exercise

30 Image Exercise Create an Image element: <Grid> <Image HorizontalAlignment="Left" Height="182" Margin="104,55,0,0 VerticalAlignment="Top" Width="271"/> </Grid>

31 Image Exercise

32 Image Exercise

33 Adding Images 1. Create an image control 2. Add your image by Project > Add Existing Item 3. Set the source for that image control

34 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.

35 Design Exercise

36 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

37 Next week Reading Break! Work on your Horizontal Prototypes Following week (Feb 27): Horizontal Prototype Feedback session Must attend, bring your group

38 Thanks! Any questions? You can find me at:

CPSC Tutorial 5

CPSC Tutorial 5 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