CPSC 481 Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca - PowerPoint PPT Presentation

CPSC 481 – Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme Rajabiyazdi, and David Ledo)

Plan for Today • More WPF material, examples, and coding exercises • Mostly stuff that will be applicable to implementing your vertical prototypes

Reminder Horizontal prototype due Monday Nov. 2 in lecture: 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 (bdgjones@ucalgary.ca) 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)

More WPF!

User Controls • Controls are interactive elements in WPF • Elements such as Buttons, TextBoxes, etc. are Microsoft Controls • If you want to reuse specific elements in your interface, you can create User Controls • User Controls can be composites of Microsoft Elements

User Controls Create your own User Control

Exercise Create your own User Control, and try to add an instance of it to your MainWindow.xaml.

Transitions Create three buttons XAML

Transitions Create a user control

Transitions Name it

Transitions Fill it with content

Transitions Create two additional user controls and do the same.

Transitions Add a StackPanel to the Main Window Give it a name

Transitions Add the following code to your MainWindow.xaml.cs before the public MainWindow (){ … } constructor: // Initialize user controls. UserControl1 page1 = new UserControl1(); UserControl2 page2 = new UserControl2(); UserControl3 page3 = new UserControl3();

Transitions Result:

Exercise Make it so that clicking the buttons at the top changes the current user control.

Solution Add the following click-event handlers: private void page1Button_Click(object sender, RoutedEventArgs e) { stackPanel1.Children.Clear(); stackPanel1.Children.Add(page1); } private void page2Button_Click(object sender, RoutedEventArgs e) { stackPanel1.Children.Clear(); stackPanel1.Children.Add(page2); } private void page3Button_Click(object sender, RoutedEventArgs e) { stackPanel1.Children.Clear(); stackPanel1.Children.Add(page3); }

User Controls – Exercise Create a User Control for an Email that looks like this:

Solution – User Control XAML <Grid Background="White"> <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="10,10,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/> <Label Name="SenderText" Content="Sender: Brennan Jones" HorizontalAlignment="Left" Margin="125,19,0,0" VerticalAlignment="Top" FontWeight="Bold"/> <Label Name="BodyText" Content="Body of the email..." HorizontalAlignment="Left" Margin="125,50,0,0" VerticalAlignment="Top"/> <Canvas Name="DeleteGroup" HorizontalAlignment="Left" Height="25" Margin="401,10,0,0" VerticalAlignment="Top" Width="25" MouseDown="DeleteGroup_MouseDown"> <Ellipse Fill="Red" Height="25" Canvas.Left="0" Stroke="Black" Canvas.Top="0" Width="25"/> <Label Content="X" Canvas.Left="0" Canvas.Top="0" Foreground="White"/> </Canvas> </Grid>

Exercise • Make the Sender a property that can be different in each instance of an email. • When the delete Button is clicked, the email should be removed from the view.

Solution – User Control C# public partial class Email : UserControl { private string sender; public string Sender { get { return sender; } set { sender = value; this.SenderText.Content = this.sender; } } private string body; public string Body { get { return body; } set { body = value; this.BodyText.Content = this.body; } } public Email() { InitializeComponent(); } private void DeleteGroup_MouseDown(object sender, MouseButtonEventArgs e) { (this.Parent as Panel).Children.Remove(this); } }

Scroll Viewers <ScrollViewer Height =“auto"> <StackPanel Height =“auto" Width =“auto"></ StackPanel> </ScrollViewer>

Exercise • Create a scroll viewer in your main window that shows 20 emails (using the Email User Control that you just created). • Create a for loop that initializes 20 Email User Controls. • To make it easy, make the Sender of each email “Sender “ + i • I.e., “Sender 1,” “Sender 2,” “Sender 3,” etc.

Solution – Main Window C# public MainWindow() { InitializeComponent(); for(int i = 0; i < 20; i++) { Email email = new Email(); email.Sender = "Sender " + i.ToString(); this.Emails.Children.Add(email); } }

Remaining Topics Which of these do you want me to go over? • Transitions (Method 2) • Styles and Templates • List Boxes • Simple Animations • Click & Drag • Triggers • Image as a Button • Timer

Transitions (Method 2) 1. Create three User Controls. Name them: MainMenu, Page1, and Page2. 2. Add a Switcher.cs class to the project. This class will handle switching between different User Controls.

Transitions (Method 2) using System.Windows.Controls; public static MainWindow pageSwitcher; public static void Switch(UserControl newPage) { pageSwitcher.Navigate(newPage); }

Transitions (Method 2) 3. Add the following code to MainWindow.xaml.cs public MainWindow() { InitializeComponent(); Switcher.pageSwitcher = this; Switcher.Switch(new MainMenu()); } public void Navigate(UserControl nextPage) { this.Content = nextPage; }

Transitions (Method 2) 4. Design MainMenu, Page1, and Page2 to look like this:

Transitions (Method 2) 5. For MainMenu, Page1, and Page2, add the following events: private void Button_Click(object sender, RoutedEventArgs e) { Switcher.Switch(new MainMenu()); } private void Button_Click_1(object sender, RoutedEventArgs e) { Switcher.Switch(new Page1()); } private void Button_Click_2(object sender, RoutedEventArgs e) { Switcher.Switch(new Page2()); }

Transitions (Method 2) 6. If you ever want to save the state of a page while transitioning (e.g., to save the contents of textboxes, the states of checkboxes etc.), keep the same User Control object. For example: Always use this ‘Page1’ object Page1 page1 = new Page1(); ... private void Button_Click_1(object sender, RoutedEventArgs e) { Switcher.Switch(page1); }

Styles and Templates Source (and excellent resource): http://www.codeproject.com/Articles/84630/WPF- Customize-your-Application-with-Styles-and-Con

Styles and Templates Start by creating a button

Styles and Templates Add this ‘Resources’ block

Styles and Templates The button’s appearance changes Insert this code: This defines the style of buttons in your XAML.

Styles and Templates You can also give it a key… …and set specific buttons to the particular style.

Styles and Templates You can create define Control Templates • These define how a control is drawn

Styles and Templates Example: <UserControl.Resources> <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Name="fondoboton" BorderBrush="DarkGray" BorderThickness="5" CornerRadius="10,0,10,0" Background="LightGray"> <ContentPresenter Name="contenido" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"></ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>

Styles and Templates Result:

Styles and Templates You can also define a default background colour: <UserControl.Resources> <Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> Add this line <Setter Property="Background" Value="Orange" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <Border Name="fondoboton" BorderBrush="DarkGray" BorderThickness="5" CornerRadius="10,0,10,0" Add this Background="{TemplateBinding Background}" > <ContentPresenter Name="contenido" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}"></ContentPresenter> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> </UserControl.Resources>

Styles and Templates Result: