CPSC Tutorial 9 Blend & Animations

Size: px

Start display at page:

Download "CPSC Tutorial 9 Blend & Animations"

Clara Pierce
6 years ago
Views:

1 CPSC Tutorial 9 Blend & Animations (based on previous tutorials by Alice Thudt, Fateme Rajabiyazdi, David Ledo, Brennan Jones, and Sowmya Somanath)

2 Today Blend & Animations Using Blend Hands on example PicturO

3 Final Project Part II Vertical Prototype Deliverables: 1. An evaluation of your current horizontal prototype using a technique learned in class e.g. walkthrough, heuristic evaluation, etc Then do redesign using your evaluation 2. A substantial part of the vertical functionality 3. A heuristic evaluation of your final interface

4 Deadlines Main Project deadline: Friday April 7th Submitted in-class at 10am Complete portfolio, redesign rationale, implementation, screenshots, etc Hand in code & README via DVD/USB

5 Deadlines Project Demonstrations: April Sign-ups TBA, scheduled with the TA All members must attend Demos will run strictly from USB/media Must run on projector computer in MS 156

6 1. Using Blend

7 Expression Blend Expression Blend, Visual Studio, and.net provide a very compelling and seamless design and development workflow Rapidly iterate on both the user experience and core architecture, evolving your ideas quickly from initial prototype through to completed project

8 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

9 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! r e n g i s e D r e t t e B A 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

10 Basic Idea Design your interface in Blend Code the logic & interaction in Visual Studio

11 Starting Blend

12 Ways to start a Project in Blend 1. Click on New Project if you want to start a project directly in Expression Blend Choose this one for this tutorial 2. Click on Open Project if you want to use an existing project (which may have been created in Visual Studio)

13 Starting Blend

14 The Interface

15 The Interface

16 More Tools

17 More Tools

18 The Interface

19 The Interface

20 Object Browser This is where you see your Visuals Arranged as a reversed list Visuals on the bottom are on top Also true for nested Visuals inside Containers Think Layers and Groups

21 The Interface

22 Properties

23 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: colours/500col.htm

24 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

25 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

26 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 XAML Code as well

27 Coding

28 Coding You can code directly in Expression Blend, BUT it is highly suggested to use Visual Studio in parallel with it for coding 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

29 2. Hands on Example PicturO

30 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

31 Hands on

32 Start Screen

33 Photo Browsing

34 Viewing a Photo

35 Window

36 Window

37 Window

38 Window Rename the grid contained in the window to MainGrid. Insert a new grid within it, call it SplashGrid.

39 Grids For both the MainGrid and SplashGrid: Set the width and height to Auto Set the HorizontalAlignment and VerticalAlignment to Stretch

40 MainWindow

41 Start Screen

42 Start Screen Path: BackgroundShape TextBlock: P TextBlock: AppTitle Button: ViewPhotosButton Button: ExitButton Button: MinimizeButton

43 Animation Done with C# WPF using Storyboards Can also be done easily using Blend

44 Animation

45 Custom Button 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

46 Custom Button Visuals such as Buttons, Containers, and Shapes are called Controls They have an underlying template specifying how they should look The template is customizable

47 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

48 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

49 Custom Button On the first row under the Activated when tab, select grid on the first dropdown box

50 Custom Button Click + on the Actions when activating tab Add a new Storyboard The Storyboard will then start recording

51 Custom Button Now our button gives us feedback Add an event to it that closes the app in Visual Studio ExitButton.Click this.close();

52 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

53 Photos

54 Create a new Grid This is where we will show our photos It has a ScrollViewer that has a UniformGrid inside of it called PhotoViewerGrid

55 Visibility Separate our different views into Grids (if not already done) If SplashGrid is visible, then PhotoGrid should be hidden, and vice versa

56 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

57 Visibility Great! We now have a PhotoTile But wait Do we really want to do this for every photo we have? No! Use UserControls

58 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

59 Photo Tile Right click and turn our PhotoTile grid into a UserControl We can now reuse it for many photos!

60 Loading Photos Back-end Code 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

61 Loading Photos Back-end Code 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

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

63 Loading Photos private PhotoDB db; this.db = new PhotoDB(); this.db.loadphotos("c:\\users\\kevin\\dropbox\\photos\\tutorial"); MakeTiles(); void MakeTiles() { string[] photo_paths = this.db.photos; foreach (string path in photo_paths) { // grab the image from the path BitmapImage img = new BitmapImage(new Uri(path)); PhotoTileControl phototile = new PhotoTileControl(); phototile.imagecontent.source = img; phototile.imagetitle.text = path.split('\\').last().split('.').first(); this.photoviewergrid.children.add(phototile); } } We will then access the photos in this class in MainWindow and create PhotoTileControl s for each of them, then add them to the PhotoViewerGrid

64 Viewing a Photo

65 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

66 Viewing a Photo Go to the code where we create each PhotoTileControl and subscribe to its MouseDown event void MakeTiles() { string[] photo_paths = this.db.photos; foreach (string path in photo_paths) { // grab the image from the path BitmapImage img = new BitmapImage(new Uri(path)); PhotoTileControl phototile = new PhotoTileControl(); phototile.imagecontent.source = img; phototile.imagetitle.text = path.split('\\').last().split('.').first(); phototile.mousedown += new MouseButtonEventHandler(photoTile_MouseDown); this.photoviewergrid.children.add(phototile); } }

67 Viewing a Photo Collapse all of the other views Create an instance of the PhotoPageControl and populate it with the data from the PhotoTileControl void phototile_mousedown(object sender, MouseButtonEventArgs e) { this.photogrid.visibility = Visibility.Collapsed; this.splashgrid.visibility = Visibility.Collapsed; PhotoPageControl photopage = new PhotoPageControl(); photopage.photopagetitle.text = (sender as PhotoTileControl).ImageTitle.Text; photopage.photo.source = (sender as PhotoTileControl).ImageContent.Source; this.maingrid.children.add(photopage); }

68 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

69 Viewing a Photo void phototile_mousedown(object sender, MouseButtonEventArgs e) { this.photogrid.visibility = Visibility.Collapsed; this.splashgrid.visibility = Visibility.Collapsed; PhotoPageControl photopage = new PhotoPageControl(); photopage.photopagetitle.text = (sender as PhotoTileControl).ImageTitle.Text; photopage.photo.source = (sender as PhotoTileControl).ImageContent.Source; photopage.backbutton.click += new RoutedEventHandler(BackButton_Click); this.currentphotopage = photopage; this.maingrid.children.add(photopage); } void BackButton_Click(object sender, RoutedEventArgs e) { this.photogrid.visibility = Visibility.Visible; this.maingrid.children.remove(this.currentphotopage); this.currentphotopage = null; }

70 Extending this To allow for comments within the PhotoPageControl, create a CommentBox UserControl 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 StackPanel within the PhotoPageControl

71 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

72 Next Week Project Group Meetings 15 minutes in Tutorial Show me some interactive scenarios of your implementation I will give feedback

73 Thanks! Any questions? You can find me at: Disapproval Meowchi

CPSC 481 Tutorial 10 Expression Blend. Brennan Jones (based on tutorials by Bon Adriel Aseniero and David Ledo)

CPSC 481 Tutorial 10 Expression Blend Brennan Jones bdgjones@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo) Expression Blend Enables you to build rich and compelling applications