cpsc 481 tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfcpsc 481 –tutorial 7...
TRANSCRIPT
![Page 1: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/1.jpg)
CPSC 481 – Tutorial 7More WPF
Brennan Jones
(based on tutorials by Alice Thudt, Fateme Rajabiyazdi, and David Ledo)
![Page 2: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/2.jpg)
Plan for Today
• More WPF material, examples, and coding exercises• Mostly stuff that will be applicable to implementing your
vertical prototypes
![Page 3: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/3.jpg)
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 ([email protected]) OR submit them on a USB along with your write-up.
![Page 4: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/4.jpg)
Horizontal Prototype Presentations
• Tuesday, November 3 in tutorial (T03)
• Monday, November 9 in tutorial (T01)
![Page 5: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/5.jpg)
More WPF!
![Page 6: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/6.jpg)
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
![Page 7: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/7.jpg)
User Controls
Create your own User Control
![Page 8: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/8.jpg)
Exercise
Create your own User Control, and try to add an instance of it to your MainWindow.xaml.
![Page 9: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/9.jpg)
Transitions
Create three buttons
XAML
![Page 10: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/10.jpg)
Transitions
Create a user control
![Page 11: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/11.jpg)
Transitions
Name it
![Page 12: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/12.jpg)
Transitions
Fill it with content
![Page 13: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/13.jpg)
Transitions
Create two additional user controls and do the same.
![Page 14: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/14.jpg)
Transitions
Add a StackPanel to the Main Window
Give it a name
![Page 15: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/15.jpg)
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();
![Page 16: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/16.jpg)
Transitions
Result:
![Page 17: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/17.jpg)
Exercise
Make it so that clicking the buttons at the top changes the current user control.
![Page 18: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/18.jpg)
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);
}
![Page 19: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/19.jpg)
User Controls – Exercise
Create a User Control for an Email that looks like this:
![Page 20: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/20.jpg)
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>
![Page 21: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/21.jpg)
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.
![Page 22: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/22.jpg)
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);
}}
![Page 23: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/23.jpg)
Scroll Viewers
<ScrollViewer Height=“auto"><StackPanel Height=“auto" Width=“auto"></StackPanel>
</ScrollViewer>
![Page 24: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/24.jpg)
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.
![Page 25: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/25.jpg)
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);
}
}
![Page 26: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/26.jpg)
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
![Page 27: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/27.jpg)
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.
![Page 28: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/28.jpg)
Transitions (Method 2)
using System.Windows.Controls;
public static MainWindow pageSwitcher;
public static void Switch(UserControl newPage){
pageSwitcher.Navigate(newPage);}
![Page 29: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/29.jpg)
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;}
![Page 30: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/30.jpg)
Transitions (Method 2)
4. Design MainMenu, Page1, and Page2 to look like this:
![Page 31: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/31.jpg)
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());}
![Page 32: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/32.jpg)
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:
Page1 page1 = new Page1();
...
private void Button_Click_1(object sender, RoutedEventArgs e){
Switcher.Switch(page1);}
Always use this ‘Page1’ object
![Page 33: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/33.jpg)
Styles and Templates
Source (and excellent resource): http://www.codeproject.com/Articles/84630/WPF-Customize-your-Application-with-Styles-and-Con
![Page 34: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/34.jpg)
Styles and Templates
Start by creating a button
![Page 35: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/35.jpg)
Styles and Templates
Add this ‘Resources’ block
![Page 36: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/36.jpg)
Styles and Templates
Insert this code:This defines the style of buttons in your XAML.
The button’s appearance changes
![Page 37: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/37.jpg)
Styles and Templates
You can also give it a key…
…and set specific buttons to the particular style.
![Page 38: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/38.jpg)
Styles and Templates
You can create define Control Templates
• These define how a control is drawn
![Page 39: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/39.jpg)
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={RelativeSourceTemplatedParent}}"></ContentPresenter>
</Border></ControlTemplate>
</Setter.Value></Setter>
</Style></UserControl.Resources>
![Page 40: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/40.jpg)
Styles and Templates
Result:
![Page 41: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/41.jpg)
Styles and Templates
You can also define a default background colour:<UserControl.Resources>
<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"><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" Background="{TemplateBinding Background}">
<ContentPresenter Name="contenido" Content="{Binding Path=Content, RelativeSource={RelativeSourceTemplatedParent}}"></ContentPresenter>
</Border></ControlTemplate>
</Setter.Value></Setter>
</Style></UserControl.Resources>
Add this line
Add this
![Page 42: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/42.jpg)
Styles and Templates
Result:
![Page 43: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/43.jpg)
Styles and Templates
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:
<Button Style="{StaticResource MyButtonStyle}" Background="Red"Content="Button" HorizontalAlignment="Left" Margin="119,234,0,0" VerticalAlignment="Top" Width="75"/>
Background is ‘Red’
![Page 44: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/44.jpg)
Styles and Templates
Result:
![Page 45: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/45.jpg)
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.
![Page 46: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/46.jpg)
Solution
<UserControl.Resources><Style x:Key="MyButtonStyle" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="Black" /><Setter Property="Template">
<Setter.Value><ControlTemplate TargetType="{x:Type Button}">
<Border Name="fondoboton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="5" CornerRadius="10,0,10,0">
<ContentPresenter Name="contenido" Content="{Binding Path=Content, RelativeSource={RelativeSourceTemplatedParent}}"></ContentPresenter>
</Border></ControlTemplate>
</Setter.Value></Setter>
</Style></UserControl.Resources>
![Page 47: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/47.jpg)
Solution
Result:
![Page 48: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/48.jpg)
Solution (cont’d)
<Button Style="{StaticResource MyButtonStyle}" BorderBrush="Blue" Content="Button" HorizontalAlignment="Left" Margin="119,234,0,0" VerticalAlignment="Top" Width="75"/>
![Page 49: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/49.jpg)
Solution
Result:
![Page 50: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/50.jpg)
List Boxes
Drag a ListBox into the XAML
![Page 51: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/51.jpg)
List Boxes
Click to modify items
![Page 52: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/52.jpg)
List Boxes
Click to addSelect ‘ListBoxItem’
![Page 53: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/53.jpg)
List Boxes
Change content
![Page 54: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/54.jpg)
List Boxes
Result:
![Page 55: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/55.jpg)
List Boxes
Can get the currently-selected index:listbox1.SelectedIndex
![Page 56: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/56.jpg)
Exercise
• Write code that changes the text in a textbox whenever a listbox’s selection is changed.
![Page 57: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/57.jpg)
Solution – C#
Add ‘SelectionChanged’ event handler.
private void listBox1_SelectionChanged(object sender, SelectionChangedEventArgs e){
textbox1.Text = (String)((ListBoxItem)listBox1.SelectedItem).Content;
}
![Page 58: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/58.jpg)
Simple Animations
Insert an ellipse into your XAML
![Page 59: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/59.jpg)
Simple Animations
XAML code:<Ellipse Name="ellipse1" Fill="#FFE82828" HorizontalAlignment="Left" Height="118" Margin="10,151,0,0" Stroke="Black" VerticalAlignment="Top" Width="127"/>
![Page 60: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/60.jpg)
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;
![Page 61: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/61.jpg)
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);
![Page 62: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/62.jpg)
Simple Animations
Add this function:private void myEllipseLoaded(object sender, RoutedEventArgs e)
{
myStoryboard.Begin(this);
}
![Page 63: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/63.jpg)
Exercise
• Change the animation so that the width of the ellipse is animated.
![Page 64: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/64.jpg)
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);
![Page 65: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/65.jpg)
Click & Drag
Create an ellipse
Give it a name
![Page 66: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/66.jpg)
Click & Drag
Give the grid a name too
![Page 67: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/67.jpg)
Click & Drag
Add MouseDown
Add MouseMove
Add MouseUp
![Page 68: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/68.jpg)
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;
}}
![Page 69: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/69.jpg)
Triggers
Source (and excellent resource): http://www.wpf-tutorial.com/styles/trigger-datatrigger-event-trigger/
![Page 70: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/70.jpg)
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
![Page 71: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/71.jpg)
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.
![Page 72: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/72.jpg)
Triggers
Property trigger example<TextBlock Text="Hello, styled world!" FontSize="28" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Foreground" Value="Blue"></Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Foreground" Value="Red" />
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
![Page 73: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/73.jpg)
Triggers
Property trigger example
• Result:• Underlines and colours the text red on mouse-over.
![Page 74: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/74.jpg)
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.
![Page 75: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/75.jpg)
Triggers
Data trigger example<CheckBox Name="cbSample" Content="Hello, world?" />
<TextBlock HorizontalAlignment="Center" Margin="0,20,0,0" FontSize="48">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="No" />
<Setter Property="Foreground" Value="Red" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=cbSample, Path=IsChecked}" Value="True">
<Setter Property="Text" Value="Yes!" />
<Setter Property="Foreground" Value="Green" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
![Page 76: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/76.jpg)
Triggers
Data trigger example
• Result:• Changes the text to “Yes!” and the text colour to green
when the checkbox is checked.
![Page 77: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/77.jpg)
Triggers
Event trigger
• Defined by <EventTrigger> element.
• Triggers in response to an event being called.• Triggers exactly once that event is called.
![Page 78: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/78.jpg)
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>
<Storyboard><DoubleAnimation Duration="0:0:0.300" Storyboard.TargetProperty="FontSize" To="28" /></Storyboard>
</BeginStoryboard></EventTrigger.Actions>
</EventTrigger>
...
![Page 79: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/79.jpg)
Triggers
Event trigger example (cont’d)...
<EventTrigger RoutedEvent="MouseLeave"><EventTrigger.Actions>
<BeginStoryboard><Storyboard><DoubleAnimation Duration="0:0:0.800" Storyboard.TargetProperty="FontSize" To="18" /></Storyboard>
</BeginStoryboard></EventTrigger.Actions>
</EventTrigger></Style.Triggers>
</Style></TextBlock.Style>
</TextBlock>
![Page 80: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/80.jpg)
Triggers
Event trigger example
• Result:• Animation enlarges the text on mouse-over, and shrinks
it back to its original size on mouse-leave.
![Page 81: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/81.jpg)
Image as Button
Exercise: Create a button that displays as an image.
![Page 82: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/82.jpg)
Image as Button
Solution:
<Grid><Button Background="Transparent" HorizontalAlignment="Left" Margin="117,84,0,0" VerticalAlignment="Top" Width="361" Height="231">
<Image Name="img1" Stretch="Fill" Source="Testimg.png" Margin="10"/>
</Button></Grid>
![Page 83: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/83.jpg)
Timer
• 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.
![Page 84: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/84.jpg)
XAML
<Grid Name="Grid"><TextBlock Name=”timerText" FontSize="48” HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
![Page 85: CPSC 481 Tutorial 7pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w07.pdfCPSC 481 –Tutorial 7 More WPF Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Alice Thudt, Fateme](https://reader035.vdocuments.mx/reader035/viewer/2022070111/604e3803d7a3ae7fd1496f80/html5/thumbnails/85.jpg)
C#
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();
}