cpsc 481 – week 11 expression blend sowmya somanath [email protected] (based on tutorials by...
TRANSCRIPT
![Page 1: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/1.jpg)
CPSC 481 – Week 11
Expression Blend
Sowmya [email protected]
(based on tutorials by Bon Adriel Aseniero and David Ledo)
![Page 2: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/2.jpg)
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: [email protected]• Set up an in-person meeting
![Page 3: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/3.jpg)
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.
![Page 4: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/4.jpg)
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.
A BETTER DESIGNER!
![Page 5: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/5.jpg)
Basic Idea
• Design your interface in Expression Blend• Code the logic and interaction in Visual Studio
![Page 6: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/6.jpg)
Starting Expression Blend
![Page 7: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/7.jpg)
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).
![Page 8: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/8.jpg)
Starting a Project
• Select WPF Application• Name it• Hit OK
![Page 9: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/9.jpg)
The Interface
Project/Solution viewer
![Page 10: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/10.jpg)
The Interface
Tools
![Page 11: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/11.jpg)
Tools
![Page 12: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/12.jpg)
The Interface
“Drawing Board”
![Page 13: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/13.jpg)
The Interface
Objects and Timeline “Layers”
![Page 14: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/14.jpg)
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
![Page 15: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/15.jpg)
The Interface
Object Properties
![Page 16: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/16.jpg)
Properties
Selecting a visual here… …brings up that visual’s properties in here.
![Page 17: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/17.jpg)
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
![Page 18: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/18.jpg)
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
![Page 19: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/19.jpg)
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.
![Page 20: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/20.jpg)
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.
![Page 21: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/21.jpg)
Coding
Choose View – Split View
To view the XAML Editor
![Page 22: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/22.jpg)
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.
![Page 23: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/23.jpg)
Hands On
• We will create a picture viewer application using Expression Blend and Visual Studio.• Functionalities:
1. Home screen2. Page to see all photos3. View each photo
![Page 24: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/24.jpg)
PicturO
![Page 25: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/25.jpg)
Window
Select the window Change its width & height to 800x600
![Page 26: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/26.jpg)
Window
Change the Background colour to #FF353535
Select ‘Background’
![Page 27: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/27.jpg)
Window
WindowStyle = None
ResizeMode = NoResize
Title = “PicturO”
![Page 28: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/28.jpg)
Window
• Rename the grid contained in the window to ‘MainGrid’.• Insert a new grid within it,
call it ‘SplashGrid’.
![Page 29: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/29.jpg)
Grids
• For both the MainGrid and SplashGrid:• Set the width and height to
‘Auto’• Set the
HorizontalAlignment and VerticalAlignment to ‘Stretch’
![Page 30: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/30.jpg)
Start Screen
![Page 31: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/31.jpg)
Start screen
• Path: BackgroundShape• TextBlock: P• TextBlock: AppTitle• Button: ViewPhotosButton
• Button: ExitButton• Button: MinimizeButton
![Page 32: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/32.jpg)
Animation
• Can be done in C# WPF using Storyboards.• Can also be done easily using Expression Blend.
![Page 33: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/33.jpg)
Animation
On the “Object & Timeline” tab, click +
This will add a Storyboard Resource
![Page 34: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/34.jpg)
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.
![Page 35: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/35.jpg)
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.
![Page 36: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/36.jpg)
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
![Page 37: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/37.jpg)
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
![Page 38: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/38.jpg)
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
![Page 39: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/39.jpg)
Custom Button
• On the first row under the Activated when tab, select grid on the first dropdown box
![Page 40: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/40.jpg)
Custom Button
• Click + on the Actions when activating tab• Add a new Storyboard• The Storyboard will then start
recording
![Page 41: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/41.jpg)
Custom Button
• Now our button gives us feedback• Add an event to it that
closes the app in Visual Studio• ExitButton.Click• this.Close();
![Page 42: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/42.jpg)
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
![Page 43: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/43.jpg)
Photos
![Page 44: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/44.jpg)
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
![Page 45: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/45.jpg)
Visibility
• Separate our different views into Grids (if not already done)• If SplashGrid is visible,
then PhotoGrid should be hidden, and vice versa
![Page 46: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/46.jpg)
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
![Page 47: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/47.jpg)
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
![Page 48: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/48.jpg)
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.
![Page 49: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/49.jpg)
Photo Tile
• Right click and turn our PhotoTile grid into a UserControl• We can now reuse it for
many photos!
![Page 50: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/50.jpg)
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
![Page 51: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/51.jpg)
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 } }}
![Page 52: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/52.jpg)
Loading Photos
• We will then access the photos in this class and create PhotoTileControls for each of them, then add them to the PhotoViewerGrid
![Page 53: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/53.jpg)
Viewing a Photo
![Page 54: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/54.jpg)
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
![Page 55: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/55.jpg)
Viewing a Photo
• Go to the code where we create each PhotoTileControl and subscribe to its MouseDown event
Add this
![Page 56: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/56.jpg)
Viewing a Photo
• Collapse all of the other views• Create an instance of the PhotoPageControl and
populate it with the data from the PhotoTileControl
![Page 57: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/57.jpg)
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.
![Page 58: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/58.jpg)
Viewing a Photo
![Page 59: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/59.jpg)
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.
![Page 60: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/60.jpg)
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!
![Page 61: CPSC 481 – Week 11 Expression Blend Sowmya Somanath ssomanat@ucalgary.ca (based on tutorials by Bon Adriel Aseniero and David Ledo)](https://reader035.vdocuments.site/reader035/viewer/2022062519/5697c0191a28abf838cce5f8/html5/thumbnails/61.jpg)
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