CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7...

CPSC 481 – Tutorial 7More 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

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.csbefore 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);

User Controls – Exercise

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

Solution – User Control XAML

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

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.

using System.Windows.Controls;

public static MainWindow pageSwitcher;

public static void Switch(UserControl newPage){

pageSwitcher.Navigate(newPage);}

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

4. Design MainMenu, Page1, and Page2 to look like this:

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());}

Switcher.Switch(new Page2());}

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:

page1 = new Page1();

Switcher.Switch(page1);}

Always use this ‘Page1’ object

Styles and Templates

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

Start by creating a button

Add this ‘Resources’ block

Insert this code:This defines the style of buttons in your XAML.

The button’s appearance changes

You can also give it a key…

…and set specific buttons to the particular style.

You can create define Control Templates

• These define how a control is drawn

Example:<UserControl.Resources>

<Setter.Value><ControlTemplate TargetType="{x:Type Button}">

</Border></ControlTemplate>

</Setter.Value></Setter>

</Style></UserControl.Resources>

Result:

You can also define a default background colour:<UserControl.Resources>

Add this line

Add this

Result:

For a specific button, you can set the background colour to something other than the ‘default’, while keeping everything else the same as the template.

• Without changing the template, change the button’s XAML code to something like this:

Background is ‘Red’

Result:

Exercise

Define a template for a button (like the one shown in the previous slides) that has a default border colour of black, and create a button of that template that has the border colour blue.

Solution

<UserControl.Resources><Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">

Solution

Result:

Solution (cont’d)

Solution

Result:

List Boxes

Drag a ListBox into the XAML

List Boxes

Click to modify items

List Boxes

Click to addSelect ‘ListBoxItem’

List Boxes

Change content

List Boxes

Result:

List Boxes

Can get the currently-selected index:listbox1.SelectedIndex

Exercise

• Write code that changes the text in a textbox whenever a listbox’s selection is changed.

Solution – C#

Add ‘SelectionChanged’ event handler.

private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e){

textbox1.Text = (String)((ListBoxItem)listBox1.SelectedItem).Content;

Simple Animations

Insert an ellipse into your XAML

Simple Animations

XAML code:<Ellipse Name="ellipse1" Fill="#FFE82828" HorizontalAlignment="Left" Height="118" Margin="10,151,0,0" Stroke="Black" VerticalAlignment="Top" Width="127"/>

Simple Animations

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 Animations

Add this code to your user control constructor:// animate fade in and fade outDoubleAnimation 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 Animations

Add this function:private void myEllipseLoaded(object sender, RoutedEventArgs e)

myStoryboard.Begin(this);

Exercise

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

Solution

// animate fade in and fade outDoubleAnimation 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));

// Use the Loaded event to start the Storyboard.ellipse1.Loaded += new RoutedEventHandler(myEllipseLoaded);

Click & Drag

Create an ellipse

Give it a name

Click & Drag

Give the grid a name too

Click & Drag

Add MouseDown

Add MouseMove

Add MouseUp

Click & Drag

In your C# file:bool captured = false;

private void Ellipse_MouseDown_1(object sender, MouseButtonEventArgs e){

captured = true;}

private void Ellipse_MouseUp_1(object sender, MouseButtonEventArgs e){

captured = false;}

private void Ellipse_MouseMove_1(object sender, MouseEventArgs e){

if (captured){

Thickness margin = ellipse1.Margin;margin.Left = e.GetPosition(_mainGrid).X - (ellipse1.Width / 2);margin.Top = e.GetPosition(_mainGrid).Y - (ellipse1.Height / 2);ellipse1.Margin = margin;

Triggers

Source (and excellent resource): http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/

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

Triggers

Property trigger

• Defined by <Trigger> element.

• Watches a specific property on the owner control, and whenever that property has a specific value, it changes other properties.

Triggers

Property trigger example<TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">

<TextBlock.Style>

<Style.Triggers>

</Trigger>

</Style.Triggers>

</Style>

</TextBlock.Style>

</TextBlock>

Triggers

Property trigger example

• Result:• Underlines and colours the text red on mouse-over.

Triggers

Data trigger

• Defined by <DataTrigger> 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.

Triggers

Data trigger example<CheckBox Name="cbSample" Content="Hello, world?" />

<TextBlock.Style>

<Style.Triggers>

</DataTrigger>

</Style.Triggers>

</Style>

</TextBlock.Style>

</TextBlock>

Triggers

Data trigger example

• Result:• Changes the text to “Yes!” and the text colour to green

when the checkbox is checked.

Triggers

Event trigger

• Defined by <EventTrigger> element.

• Triggers in response to an event being called.• Triggers exactly once that event is called.

Triggers

Event trigger example<TextBlock Name="lblStyled" Text="Hello, styled world!" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Center">

<TextBlock.Style><Style TargetType="TextBlock">

<Style.Triggers><EventTrigger RoutedEvent="MouseEnter">

<EventTrigger.Actions><BeginStoryboard>

</BeginStoryboard></EventTrigger.Actions>

</EventTrigger>

Triggers

Event trigger example (cont’d)...

</BeginStoryboard></EventTrigger.Actions>

</EventTrigger></Style.Triggers>

</Style></TextBlock.Style>

</TextBlock>

Triggers

Event trigger example

• Result:• Animation enlarges the text on mouse-over, and shrinks

it back to its original size on mouse-leave.

Image as Button

Exercise: Create a button that displays as an image.

Image as Button

Solution:

</Button></Grid>

• We are going to make use of a DispatchTimer.

• Make sure you are using the Threading namespace.

• Add a TextBlock on your code. We will change the value every time the timer ticks.

</Grid>

using System.Windows.Threading;

public void DispatcherTimerSample(){

InitializeComponent();DispatcherTimer timer = new DispatcherTimer();timer.Interval = TimeSpan.FromSeconds(1);timer.Tick += timer_Tick;timer.Start();

void timer_Tick(object sender, EventArgs e){

timerText.Content = DateTime.Now.ToLongTimeString();

CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7...

Documents

10, . , 01135, . (044) 481-32-21, (044) 481-47-96 - : mon ...€¦ · , 10, . , 01135, . (044) 481-32-21, (044) 481-47-96 - : mon@mon.gov.ua, 38621185 ( ) ( ) 2020/2021

Welcome to ECON 481! - MSPE | Department of 481 Government...Welcome to ECON 481! ECON 481: ... •Perfect Competition (Jan 25th) ... •Final Project Introduction (Feb 22nd)

Mensajero 481

Futuro 481

481 Lecture 7

protostypos 481

edición 481

one piece 481

Periodico 481

Audi SSP 481

Anboto 481

Journal of Basic & Applied Sciences, 2017, 481-490 481

Edição 481

FCC Form 481

Mixer Zelmer 481

Dublin Infocenter 481

hawal zhmara 481

CPSC 481 Tutorial 5 - University of Calgarypages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w05.pdfCPSC 481 –Tutorial 5 Intro to Assignment 2 and WPF Brennan Jones bdgjones@ucalgary.ca

Naruto 481

CPE 481 - Minesweeper