CPSC 481 – Tutorial 10Expression Blend

Brennan Jones

bdgjones@ucalgary.ca

(based on tutorials by Bon Adriel Aseniero and David Ledo)

Announcements

• Final project submission due Dec. 4.• Check your assignment sheet for a description of what’s

required.

• If you need help or have questions regarding your project, please let me know!• Talk to me before/after class

• Email me: bdgjones@ucalgary.ca

• Set up an in-person meeting

Today, you will learn to blend!

Expression Blend

• Enables you to build rich and compelling applications for the desktop and web.

• Enables you to take full advantage of the underlying power of the platform.• Rapid prototyping without writing code• 3D transformations• Pixel effects (blur, glow, ripple, etc.)• Animation

• Visually edit the template of a control easily on the design surface, redesigning it to perfectly fulfill the function it will play within an application.

Expression Blend

• Enables you to build rich and compelling applications for the desktop and web.

• Enables you to take full advantage of the underlying power of the platform.• Rapid prototyping without writing code• 3D transformations• Pixel effects (blur, glow, ripple, etc.)• Animation

• Visually edit the template of a control easily on the design surface, redesigning it to perfectly fulfill the function it will play within an application.

Basic Idea

• Design your interface in Expression Blend

• Code the logic and interaction in Visual Studio

Starting Expression Blend

Starting a Project

• Click on New Project if you want to start a project directly in Expression Blend.• Choose this one for this

tutorial.

• Click on Open Project if you want to use an existing project (which may have been created in Visual Studio).

Starting a Project

• Select WPF Application

• Name it

• Hit OK

The Interface

Project/Solution viewer

The Interface

Tools

Tools

The Interface

“Drawing Board”

The Interface

Objects and Timeline “Layers”

Objects

• This is where you see your Visuals• Arranged as a reversed stack

• Visuals on the bottom are on top

• Also true for Visuals inside Containers which are inside another Container

• Think Layers and Groups

The Interface

Object Properties

Properties

Selecting a visual here……brings up that visual’s

properties in here.

Properties

• Brushes Properties• Used to edit the background fill,

border stroke, opacity, etc. of a visual

• Uses RGB and alpha values or the hex value of a colour

• Nice resource for named colours: http://cloford.com/resources/colours/500col.htm

Properties

• Appearance• Used to change the

appearance of a visual by setting its visibility and opacity, or adding effects to it such as blur or dropdown shadows

Properties

• Layout• Used to change how the window will

appear on the screen, or how a visual will flow with other visuals in a container.

• Use this to edit sizes, positions, and alignments.

Properties

• Some properties are only available to specific types of visuals.• E.g., only windows can have an icon property or a

window state property (maximized, minimized, etc.).

• These properties can be set in the Code Behind as well.

Coding

Choose View – Split View

To view the XAML Editor

Coding

• You can code directly in Expression Blend, BUT it is highly suggested to use Visual Studio in parallel with it for coding.• Why?

• Because you gain access to Visual Studio’s rich set of tools for coding (refactor, debugger, etc.).

• Use Expression Blend for designing the GUI, use Visual Studio to code the logic.

Hands On

• We will create a picture viewer application using Expression Blend and Visual Studio.

• Functionalities:1. Home screen

2. Page to see all photos

3. View each photo

PicturO

Window

Select the windowChange its width & height to 800x600

Window

Change the Background colour to #FF353535

Select ‘Background’

Window

WindowStyle = None

ResizeMode = NoResize

Title = “PicturO”

Window

• Rename the grid contained in the window to ‘MainGrid’.

• Insert a new grid within it, call it ‘SplashGrid’.

Grids

• For both the MainGrid and SplashGrid:• Set the width and height to

‘Auto’

• Set the HorizontalAlignment and VerticalAlignment to ‘Stretch’

Start Screen

Start screen

• Path: BackgroundShape

• TextBlock: P

• TextBlock: AppTitle

• Button: ViewPhotosButton

• Button: ExitButton

• Button: MinimizeButton

Animation

• Can be done in C# WPF using Storyboards.

• Can also be done easily using Expression Blend.

Animation

On the “Object & Timeline” tab, click +

This will add a Storyboard Resource

Animation

• As the Animation starts to record…

• Edit a Visual’s property at a starting time then add a new Keyframe to the ending time and put in the new value of the property.

Controls

• Visuals such as Buttons, Containers, and Shapes are called Controls.

• They have an underlying template specifying how they should look.

• The template is customizable.

Custom Button

• Add a Button to your window

• Right click -> Edit Template -> Create Empty

• Call it ‘TileButton’

• You can then apply this template to other buttons later on

Custom Button

• Good Interfaces should be responsive, so let us add feedback to our custom button when it gets hovered over.

• Add these:• Cover: A transparent rectangle

on top of the button

• Content: The content (text) presenter

• HoverColor: The coloured rectangle that shows up when the button gets hovered over

Custom Button

• On the Triggers tab, add the IsMouseOver = true event

• This means that every time the mouse is over our button, the animation will be triggered

Click ‘+ Property’

Change the second and third dropdowns to:‘IsMouseOver’ and ‘True’ respectively

Custom Button

• On the first row under the Activated when tab, select grid on the first dropdown box

Custom Button

• Click + on the Actions when activating tab

• Add a new Storyboard

• The Storyboard will then start recording

Custom Button

• Now our button gives us feedback

• Add an event to it that closes the app in Visual Studio• ExitButton.Click

• this.Close();

Applying our Template

• Add a minimize button to our app (if not already there)

• Right click on the button -> Edit Template -> Apply Resource -> choose your template

• Add an event to it• MinimizeButton.Click• this.WindowState =

WindowState.Minimize

Photos

Create a new grid

• This is where we will show our photos

• It has a ScrollViewer that has a UniformGridinside of it called PhotoViewerGrid

Visibility

• Separate our different views into Grids (if not already done)

• If SplashGrid is visible, then PhotoGrid should be hidden, and vice versa

Photo Tile

• Here, we will need to load photos into tiles which we call PhotoTiles

• Create a Grid, and inside it, add an Image control and a TextBlock• The Image control will contain our photo

• The TextBlock will contain the title of the photo

Photo Tile

• Great! We now have a PhotoTile

• But wait… Do we really want to do this for every photo we have?• No!

• Use UserControls

User Controls

• User-defined Controls (e.g., CommentBox) that can be used as templates within a project.

• Useful for when you have multiple things that should look the same but have different content.

Photo Tile

• Right click and turn our PhotoTile grid into a UserControl

• We can now reuse it for many photos!

Loading Photos

On the Code Behind…

• Create a Class called PhotoDB

• This class will have a LoadPhotos method and will contain all of the paths to our photos in a string array

Loading Photos

In PhotoDB.cs:

class PhotoDB{

private string[] photos = { };public string[] Photos {

get {return this.photos;

}}

public void LoadPhotos(string path) {try {

photos = System.IO.Directory.GetFiles(path);}catch (Exception) {

// Do nothing}

}}

Loading Photos

• We will then access the photos in this class and create PhotoTileControlsfor each of them, then add them to the PhotoViewerGrid

Viewing a Photo

Viewing a Photo

• Again, we will create a UserControl for this

• Start with drawing a grid that has TextBlock, an Image control, and a StackPanel for comments

• Turn it into a UserControl called PhotoPageControl

Viewing a Photo

• Go to the code where we create each PhotoTileControl and subscribe to its MouseDownevent

Add this

Viewing a Photo

• Collapse all of the other views

• Create an instance of the PhotoPageControl and populate it with the data from the PhotoTileControl

Viewing a Photo

• Now, clicking on a PhotoTile will open up a photo page.

• But we’re stuck! We can’t go back to the photo list from the photo page.

• Solve this by adding a back button inside the PhotoPageControl.

Viewing a Photo

Extending this…

• To allow for comments within the PhotoPageControl, create a CommentBoxUserControl that has TextBlocks for the name of commenter and the comment, and a delete button.

• Add TextBoxes so that when someone types on it and presses Enter (or a send button), it will generate a CommentBox with the respective data from the TextBox fields.

• Append the CommentBox to a Scrollable StackPanelwithin the PhotoPageControl.

Extending this…

• NO! You cannot submit this example app as your project.

• You may reuse code from this example, as long as you cite it.

• Hope you learned something new!

Next Week

• Open session• Attendance is optional (but beneficial)

• Ask questions about your projects (design, coding, etc.)

• Your chance to make design decisions with me