cpsc 481 tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. ·...
Post on 11-Sep-2020
1 Views
Preview:
TRANSCRIPT
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
top related