CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. ·...
Transcript of CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. ·...
![Page 1: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/1.jpg)
CPSC 481 – Tutorial 10Expression Blend
Brennan Jones
(based on tutorials by Bon Adriel Aseniero and David Ledo)
![Page 2: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/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 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/3.jpg)
Today, you will learn to blend!
![Page 4: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/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.
![Page 5: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/5.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 6: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/6.jpg)
Basic Idea
• Design your interface in Expression Blend
• Code the logic and interaction in Visual Studio
![Page 7: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/7.jpg)
Starting Expression Blend
![Page 8: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/8.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 9: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/9.jpg)
Starting a Project
• Select WPF Application
• Name it
• Hit OK
![Page 10: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/10.jpg)
The Interface
Project/Solution viewer
![Page 11: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/11.jpg)
The Interface
Tools
![Page 12: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/12.jpg)
Tools
![Page 13: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/13.jpg)
The Interface
“Drawing Board”
![Page 14: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/14.jpg)
The Interface
Objects and Timeline “Layers”
![Page 15: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/15.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 16: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/16.jpg)
The Interface
Object Properties
![Page 17: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/17.jpg)
Properties
Selecting a visual here……brings up that visual’s
properties in here.
![Page 18: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/18.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 19: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/19.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 20: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/20.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 21: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/21.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 22: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/22.jpg)
Coding
Choose View – Split View
To view the XAML Editor
![Page 23: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/23.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 24: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/24.jpg)
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
![Page 25: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/25.jpg)
PicturO
![Page 26: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/26.jpg)
Window
Select the windowChange its width & height to 800x600
![Page 27: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/27.jpg)
Window
Change the Background colour to #FF353535
Select ‘Background’
![Page 28: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/28.jpg)
Window
WindowStyle = None
ResizeMode = NoResize
Title = “PicturO”
![Page 29: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/29.jpg)
Window
• Rename the grid contained in the window to ‘MainGrid’.
• Insert a new grid within it, call it ‘SplashGrid’.
![Page 30: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/30.jpg)
Grids
• For both the MainGrid and SplashGrid:• Set the width and height to
‘Auto’
• Set the HorizontalAlignment and VerticalAlignment to ‘Stretch’
![Page 31: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/31.jpg)
Start Screen
![Page 32: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/32.jpg)
Start screen
• Path: BackgroundShape
• TextBlock: P
• TextBlock: AppTitle
• Button: ViewPhotosButton
• Button: ExitButton
• Button: MinimizeButton
![Page 33: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/33.jpg)
Animation
• Can be done in C# WPF using Storyboards.
• Can also be done easily using Expression Blend.
![Page 34: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/34.jpg)
Animation
On the “Object & Timeline” tab, click +
This will add a Storyboard Resource
![Page 35: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/35.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 36: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/36.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 37: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/37.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 38: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/38.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 39: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/39.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 40: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/40.jpg)
Custom Button
• On the first row under the Activated when tab, select grid on the first dropdown box
![Page 41: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/41.jpg)
Custom Button
• Click + on the Actions when activating tab
• Add a new Storyboard
• The Storyboard will then start recording
![Page 42: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/42.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 43: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/43.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 44: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/44.jpg)
Photos
![Page 45: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/45.jpg)
Create a new grid
• This is where we will show our photos
• It has a ScrollViewer that has a UniformGridinside of it called PhotoViewerGrid
![Page 46: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/46.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 47: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/47.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 48: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/48.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 49: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/49.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 50: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/50.jpg)
Photo Tile
• Right click and turn our PhotoTile grid into a UserControl
• We can now reuse it for many photos!
![Page 51: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/51.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 52: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/52.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 53: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/53.jpg)
Loading Photos
• We will then access the photos in this class and create PhotoTileControlsfor each of them, then add them to the PhotoViewerGrid
![Page 54: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/54.jpg)
Viewing a Photo
![Page 55: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/55.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 56: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/56.jpg)
Viewing a Photo
• Go to the code where we create each PhotoTileControl and subscribe to its MouseDownevent
Add this
![Page 57: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/57.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 58: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/58.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 59: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/59.jpg)
Viewing a Photo
![Page 60: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/60.jpg)
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.
![Page 61: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/61.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 62: CPSC 481 Tutorial 10pages.cpsc.ucalgary.ca/~bdgjones/cpsc481/slides/w10.pdf · 2015. 11. 17. · •If you need help or have questions regarding your project, please let me know!](https://reader034.fdocuments.in/reader034/viewer/2022051900/5feec2f3a5861d779978e122/html5/thumbnails/62.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