CPSC 481 – Week #7 Sowmya Somanath

Reminder Monday Nov 2 in class – 1.Write-up – redesign rational (i.e. changes from first prototype) 2.Screen snapshots 3.Grading sheet from handout 4.Horizontal prototype presentation freeze Either your slides to me OR submit them on a USB along with your write-up.

Reminder Wednesday Nov 4 in tutorial (15 min each group) – T04: Horizontal prototype presentation Friday Nov 6 in tutorial (15 min each group) – T02: Horizontal prototype presentation

Plan for Today More WPF – useful for implementing vertical prototype. Please download Week 7 slides from:

User Controls

User controls pack a set of UI elements. Useful when repeating same UI patterns Instead of copy pasting code, you can re-use user controls.

User Controls 1.Add a user control to your class. Name it UserControlDemo

User Controls 2. Add Elements to your user control

User Controls 3. Add below code to MainWindow.xaml

User Controls 4. Add below code to MainWindow.cs private void button1_Click(object sender, RoutedEventArgs e) { UserControlDemo ucdemo = new UserControlDemo(); Grid.SetRow(ucdemo, 1); grid1.Children.Add(ucdemo); }

User Control and Transitions: Navigation Method

1.Create 3 user controls. Name them: MainMenu, Page 1 and Page 2 2.Add a Switcher.cs to the project – This class will handle switching between different user controls using System.Windows.Controls; public static MainWindow pageSwitcher; public static void Switch(UserControl newPage) { pageSwitcher.Navigate(newPage); } You will need this to use Navigate() method

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

4. Design MainMenu, Page 1 and Page 2 to look like this:

5. For MainMenu, Page 1 and Page 2 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()); }

User Control and Transitions: Excercise1

Don’t duplicate this

Solution

Solution private void button1_Click(object sender, RoutedEventArgs e) { Next _next = new Next(); stack1.Children.Clear(); stack1.Children.Add(_next); } private void button2_Click(object sender, RoutedEventArgs e) { Back _back = new Back(); stack1.Children.Clear(); stack1.Children.Add(_back); }

User Control and Scroll Viewers: Excercise2

Create a user control for an that looks like this:

Solution

Create a scroll viewer in MainWindow.xaml:

Solution

Make the Sender a property that can be different in each instance of an . When the delete Button is clicked, the should be removed from the view. Use the scroll viewer in your main window to show 20 s (using the User Control you created) ---- Create a for loop that initializes 20 User Controls To make it easy, initialze the Sender of each to “Sender” + I e.g. Sender 0, Sender 1….

Solution public partial class UserControl { private string name; public string Name { get { return name; } set { name = value; this.SenderTextblock.Content = this.name; } public () { InitializeComponent(); this.DeleteGroup.MouseLeftButtonDown += DeleteGroup_MouseLeftButtonDown; } void DeleteGroup_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) { (this.Parent as Panel).Children.Remove(this); }

Solution public MainWindow() { InitializeComponent(); for(int i = 0; i < 20; i++) { = new (); .Name = "Sender " + i.ToString(); this. s.Children.Add( ); }

Styles and Templates: Button

Give the style a key you can refer it by Create this as a resource – window/ user control

Control Template defines how a control is drawn Can also include a setter property that can be changed:

Style and Template: Excercise3

Define a template for a button that has default border color of black. Create a button instance that uses the template but changes border color to blue.

Solution

List Boxes

Drag a ListBox into the XAML List Boxes

Click to modify items

List Boxes Click to add Select ‘ListBoxItem’

List Boxes Change content

Can get the currently-selected index: listbox1.SelectedIndex

ListBox: Excercise4

Create a listbox like below and change TextBox content based on listbox selection. Add ‘SelectionChanged’ event handler.

Solution private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e) { textbox1.Text = (String)((ListBoxItem)listbox1.SelectedItem).Content; }

Simple Animation

Add an ellipse to your xaml Simple animations

Simple animation Add this code to the top of your C# file: using System.Windows.Media.Animation; Add this inside your user control class before the constructor: private Storyboard myStoryboard;

Simple animation // animate fade in and fade out DoubleAnimation animation = new DoubleAnimation(); animation.From = 1.0; animation.To = 0.0; animation.Duration = new Duration(TimeSpan.FromSeconds(5)); animation.AutoReverse = true; animation.RepeatBehavior = RepeatBehavior.Forever; myStoryboard = new Storyboard(); myStoryboard.Children.Add(animation); Storyboard.SetTargetName(animation, ellipse1.Name); Storyboard.SetTargetProperty(animation, new PropertyPath(Ellipse.OpacityProperty)); // Use the Loaded event to start the Storyboard. ellipse1.Loaded += new RoutedEventHandler(myEllipseLoaded);

Simple animation private void myEllipseLoaded(object sender, RoutedEventArgs e) { myStoryboard.Begin(this); }

Simple animations: Excercise5

Change the animation so that the width of the ellipse is animated.

Solution // animate change width DoubleAnimation animation = new DoubleAnimation(); animation.From = 120.0; animation.To = 240.0; animation.Duration = new Duration(TimeSpan.FromSeconds(5)); animation.AutoReverse = true; animation.RepeatBehavior = RepeatBehavior.Forever; myStoryboard = new Storyboard(); myStoryboard.Children.Add(animation); Storyboard.SetTargetName(animation, ellipse1.Name); Storyboard.SetTargetProperty(animation, new PropertyPath(Ellipse.WidthProperty));

Mouse based Interactions

Add an ellipse to your xaml Click and Drag

Click and Drag Add MouseDown, MouseMove and MouseUp events to the ellipse

Drag and Move bool captured = false; private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e) { captured = true; } private void ellipse1_MouseMove(object sender, MouseEventArgs e) { if (captured) { Thickness margin = ellipse1.Margin; margin.Left = e.GetPosition(grid1).X - (ellipse1.Width / 2); margin.Top = e.GetPosition(grid1).Y - (ellipse1.Height / 2); ellipse1.Margin = margin; } private void ellipse1_MouseUp(object sender, MouseButtonEventArgs e) { captured = false; }

Triggers

Allow you to change the value of a given property once a certain condition changes Allow you to do this entirely in XAML Three types: 1.Property trigger 2.Data trigger 3.Event trigger

Property Trigger Defined by element. Watches a specific property on the owner control, and whenever that property has a specific value, it changes other properties.

Property trigger example

Property trigger example Result: Underlines and colours the text red on mouse-over.

Data Triggers Defined by element. Watches a specific property that can be anywhere (not specifically on the owner control), and whenever that property has a specific value, it changes other properties.

Data Trigger example

Triggers Data trigger example Result: Changes the text to “Yes!” and the text colour to green when the checkbox is checked.

Event Triggers Defined by element. Triggers in response to an event being called. Triggers exactly once that event is called.

Event Trigger example...

Event Trigger example...

Event Trigger Result: Animation enlarges the text on mouse-over, and shrinks it back to its original size on mouse-leave.

Image as a Button Exercise: Create a button that displays as an image.

Image as a Button Solution: