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: