cpsc 481 –tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 ·...
TRANSCRIPT
![Page 1: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/1.jpg)
CPSC481– Tutorial10ExpressionBlend
(basedontutorialsbyBonAdrielAseniero andDavidLedo)
![Page 2: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/2.jpg)
ExpressionBlend
• Enablesyoutobuildrichandcompellingapplicationsforthedesktopandweb.• Enablesyoutotakefulladvantageoftheunderlyingpoweroftheplatform.• Rapidprototypingwithoutwritingcode• 3Dtransformations• Pixeleffects(blur,glow,ripple,etc.)• Animation
• Visually editthetemplateofacontroleasilyonthedesignsurface,redesigningittoperfectlyfulfillthefunctionitwillplaywithinanapplication.
![Page 3: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/3.jpg)
BasicIdea
• DesignyourinterfaceinExpressionBlend• CodethelogicandinteractioninVisualStudio
![Page 4: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/4.jpg)
StartingExpressionBlend
![Page 5: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/5.jpg)
StartingaProject
• ClickonNewProject ifyouwanttostartaprojectdirectlyinExpressionBlend.• Choosethisoneforthistutorial.
• ClickonOpenProject ifyouwanttouseanexistingproject(whichmayhavebeencreatedinVisualStudio).
![Page 6: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/6.jpg)
StartingaProject
• SelectWPFApplication• Nameit• HitOK
![Page 7: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/7.jpg)
TheInterface
Project/Solutionviewer
![Page 8: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/8.jpg)
TheInterface
Tools
![Page 9: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/9.jpg)
Tools
![Page 10: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/10.jpg)
TheInterface
“DrawingBoard”
![Page 11: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/11.jpg)
TheInterface
ObjectsandTimeline“Layers”
![Page 12: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/12.jpg)
Objects
• ThisiswhereyouseeyourVisuals• Arrangedasareversedstack
• Visualsonthebottomareontop• AlsotrueforVisualsinsideContainerswhichareinsideanotherContainer
• ThinkLayers andGroups
![Page 13: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/13.jpg)
TheInterface
ObjectProperties
![Page 14: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/14.jpg)
Properties
Selectingavisualhere… …bringsupthatvisual’spropertiesinhere.
![Page 15: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/15.jpg)
Properties
• BrushesProperties• Usedtoeditthebackgroundfill,borderstroke,opacity,etc.ofavisual• UsesRGBandalphavaluesorthehexvalueofacolour• Niceresourcefornamedcolours:http://cloford.com/resources/colours/500col.htm
![Page 16: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/16.jpg)
Properties
• Appearance• Usedtochangetheappearanceofavisualbysettingitsvisibilityandopacity,oraddingeffectstoitsuchasblurordropdownshadows
![Page 17: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/17.jpg)
Properties
• Layout• Usedtochangehowthewindowwillappearonthescreen,orhowavisualwillflowwithothervisualsinacontainer.• Usethistoeditsizes,positions,andalignments.
![Page 18: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/18.jpg)
Properties
• Somepropertiesareonlyavailabletospecifictypesofvisuals.• E.g.,onlywindowscanhaveaniconpropertyorawindowstateproperty(maximized,minimized,etc.).
• ThesepropertiescanbesetintheCodeBehindaswell.
![Page 19: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/19.jpg)
Coding
ChooseView– SplitView
ToviewtheXAMLEditor
![Page 20: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/20.jpg)
Coding
• YoucancodedirectlyinExpressionBlend,BUT itishighlysuggestedtouseVisualStudioinparallelwithitforcoding.• Why?
• BecauseyougainaccesstoVisualStudio’srichsetoftoolsforcoding(refactor,debugger,etc.).
• UseExpressionBlendfordesigningtheGUI,useVisualStudiotocodethelogic.
![Page 21: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/21.jpg)
HandsOn
• Wewillcreateapictureviewer applicationusingExpressionBlendandVisualStudio.• Functionalities:
1. Homescreen2. Pagetoseeallphotos3. Vieweachphoto
![Page 22: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/22.jpg)
PicturO
![Page 23: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/23.jpg)
Window
Selectthewindow Changeitswidth&heightto800x600
![Page 24: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/24.jpg)
Window
ChangetheBackgroundcolourto#FF353535
Select‘Background’
![Page 25: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/25.jpg)
Window
WindowStyle =None
ResizeMode =NoResize
Title=“PicturO”
![Page 26: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/26.jpg)
Window
• Renamethegridcontainedinthewindowto‘MainGrid’.• Insertanewgridwithinit,callit‘SplashGrid’.
![Page 27: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/27.jpg)
Grids
• ForboththeMainGrid andSplashGrid:• Setthewidthandheightto‘Auto’• SettheHorizontalAlignment andVerticalAlignment to‘Stretch’
![Page 28: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/28.jpg)
StartScreen
![Page 29: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/29.jpg)
Startscreen
• Path:BackgroundShape• TextBlock:P• TextBlock:AppTitle• Button:ViewPhotosButton
• Button:ExitButton• Button:MinimizeButton
![Page 30: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/30.jpg)
Animation
• CanbedoneinC#WPFusingStoryboards.• CanalsobedoneeasilyusingExpressionBlend.
![Page 31: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/31.jpg)
Animation
Onthe“Object&Timeline”tab,click+
ThiswilladdaStoryboardResource
![Page 32: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/32.jpg)
Animation
• AstheAnimationstartstorecord…• EditaVisual’spropertyatastartingtime thenaddanewKeyframe totheendingtime andputinthenewvalueoftheproperty.
![Page 33: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/33.jpg)
Controls
• VisualssuchasButtons,Containers,andShapesarecalledControls.• Theyhaveanunderlyingtemplate specifyinghowtheyshouldlook.• Thetemplateiscustomizable.
![Page 34: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/34.jpg)
CustomButton
• AddaButton toyourwindow• Rightclick->EditTemplate->CreateEmpty• Callit‘TileButton’• Youcanthenapplythistemplatetootherbuttonslateron
![Page 35: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/35.jpg)
CustomButton
• GoodInterfacesshouldberesponsive,soletusaddfeedbacktoourcustombuttonwhenitgetshoveredover.• Addthese:
• Cover: Atransparentrectangleontopofthebutton• Content:Thecontent(text)presenter• HoverColor: Thecolouredrectanglethatshowsupwhenthebuttongetshoveredover
![Page 36: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/36.jpg)
CustomButton
• OntheTriggers tab,addtheIsMouseOver =true event• Thismeansthateverytimethemouseisoverourbutton,theanimationwillbetriggered
Click‘+Property’
Changethesecondandthirddropdownsto:‘IsMouseOver’and‘True’respectively
![Page 37: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/37.jpg)
CustomButton
• OnthefirstrowundertheActivatedwhen tab,selectgrid onthefirstdropdownbox
![Page 38: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/38.jpg)
CustomButton
• Click+ontheActionswhenactivatingtab• AddanewStoryboard• TheStoryboardwillthenstartrecording
![Page 39: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/39.jpg)
CustomButton
• Nowourbuttongivesusfeedback• AddaneventtoitthatclosestheappinVisualStudio• ExitButton.Click• this.Close();
![Page 40: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/40.jpg)
ApplyingourTemplate
• Addaminimizebuttontoourapp(ifnotalreadythere)• Rightclickonthebutton->EditTemplate->ApplyResource->chooseyourtemplate• Addaneventtoit
• MinimizeButton.Click• this.WindowState =WindowState.Minimize
![Page 41: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/41.jpg)
Photos
![Page 42: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/42.jpg)
Createanewgrid
• Thisiswherewewillshowourphotos• IthasaScrollViewer thathasaUniformGridinsideofitcalledPhotoViewerGrid
![Page 43: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/43.jpg)
Visibility
• SeparateourdifferentviewsintoGrids(ifnotalreadydone)• IfSplashGrid isvisible,thenPhotoGrid shouldbehidden,andviceversa
![Page 44: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/44.jpg)
PhotoTile
• Here,wewillneedtoloadphotosintotileswhichwecallPhotoTiles• CreateaGrid,andinsideit,addanImage controlandaTextBlock• TheImagecontrolwillcontainourphoto• TheTextBlock willcontainthetitleofthephoto
![Page 45: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/45.jpg)
PhotoTile
• Great!WenowhaveaPhotoTile• Butwait…Dowereallywanttodothisforeveryphotowehave?• No!
• UseUserControls
![Page 46: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/46.jpg)
UserControls
• User-definedControls(e.g.,CommentBox)thatcanbeusedastemplates withinaproject.• Usefulforwhenyouhavemultiplethingsthatshouldlookthesamebuthavedifferentcontent.
![Page 47: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/47.jpg)
PhotoTile
• RightclickandturnourPhotoTile gridintoaUserControl• Wecannowreuse itformanyphotos!
![Page 48: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/48.jpg)
LoadingPhotos
OntheCodeBehind…• CreateaClasscalledPhotoDB• ThisclasswillhaveaLoadPhotos methodandwillcontainallofthepathstoourphotosinastringarray
![Page 49: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/49.jpg)
LoadingPhotos
InPhotoDB.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 50: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/50.jpg)
LoadingPhotos
• WewillthenaccessthephotosinthisclassandcreatePhotoTileControlsforeachofthem,thenaddthemtothePhotoViewerGrid
![Page 51: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/51.jpg)
ViewingaPhoto
![Page 52: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/52.jpg)
ViewingaPhoto
• Again,wewillcreateaUserControl forthis• StartwithdrawingagridthathasTextBlock,anImage control,andaStackPanel forcomments• TurnitintoaUserControl calledPhotoPageControl
![Page 53: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/53.jpg)
ViewingaPhoto
• GotothecodewherewecreateeachPhotoTileControl andsubscribetoitsMouseDownevent
Addthis
![Page 54: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/54.jpg)
ViewingaPhoto
• Collapsealloftheotherviews• CreateaninstanceofthePhotoPageControl andpopulateitwiththedatafromthePhotoTileControl
![Page 55: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/55.jpg)
ViewingaPhoto
• Now,clickingonaPhotoTile willopenupaphotopage.• Butwe’restuck!Wecan’tgobacktothephotolistfromthephotopage.• SolvethisbyaddingabackbuttoninsidethePhotoPageControl.
![Page 56: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/56.jpg)
ViewingaPhoto
![Page 57: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/57.jpg)
Extendingthis…
• ToallowforcommentswithinthePhotoPageControl,createaCommentBoxUserControl thathasTextBlocks forthenameofcommenterandthecomment,andadeletebutton.• AddTextBoxes sothatwhensomeonetypesonitandpressesEnter(orasendbutton),itwillgenerateaCommentBox withtherespectivedatafromtheTextBox fields.• AppendtheCommentBox toaScrollableStackPanelwithinthePhotoPageControl.
![Page 58: CPSC 481 –Tutorial 10pages.cpsc.ucalgary.ca/~li26/481/slides/w09.pdf · 2017-03-16 · applications for the desktop and web. •Enables you to take full advantage of the underlying](https://reader034.vdocuments.mx/reader034/viewer/2022042304/5ecf4001fc81594a35595a9e/html5/thumbnails/58.jpg)
Extendingthis…
• NO! Youcannotsubmitthisexampleappasyourproject.• Youmay reusecodefromthisexample,aslongasyoucite it.• Hopeyoulearned somethingnew!