Embed Size (px)
Citation preview
CPSC481– Tutorial10ExpressionBlend
(basedontutorialsbyBonAdrielAseniero andDavidLedo)
ExpressionBlend
• Enablesyoutobuildrichandcompellingapplicationsforthedesktopandweb.• Enablesyoutotakefulladvantageoftheunderlyingpoweroftheplatform.• Rapidprototypingwithoutwritingcode• 3Dtransformations• Pixeleffects(blur,glow,ripple,etc.)• Animation
• Visually editthetemplateofacontroleasilyonthedesignsurface,redesigningittoperfectlyfulfillthefunctionitwillplaywithinanapplication.
BasicIdea
• DesignyourinterfaceinExpressionBlend• CodethelogicandinteractioninVisualStudio
StartingExpressionBlend
StartingaProject
• ClickonNewProject ifyouwanttostartaprojectdirectlyinExpressionBlend.• Choosethisoneforthistutorial.
• ClickonOpenProject ifyouwanttouseanexistingproject(whichmayhavebeencreatedinVisualStudio).
StartingaProject
• SelectWPFApplication• Nameit• HitOK
TheInterface
Project/Solutionviewer
TheInterface
Tools
Tools
TheInterface
“DrawingBoard”
TheInterface
ObjectsandTimeline“Layers”
Objects
• ThisiswhereyouseeyourVisuals• Arrangedasareversedstack
• Visualsonthebottomareontop• AlsotrueforVisualsinsideContainerswhichareinsideanotherContainer
• ThinkLayers andGroups
TheInterface
ObjectProperties
Properties
Selectingavisualhere… …bringsupthatvisual’spropertiesinhere.
Properties
• BrushesProperties• Usedtoeditthebackgroundfill,borderstroke,opacity,etc.ofavisual• UsesRGBandalphavaluesorthehexvalueofacolour• Niceresourcefornamedcolours:http://cloford.com/resources/colours/500col.htm
Properties
• Appearance• Usedtochangetheappearanceofavisualbysettingitsvisibilityandopacity,oraddingeffectstoitsuchasblurordropdownshadows
Properties
• Layout• Usedtochangehowthewindowwillappearonthescreen,orhowavisualwillflowwithothervisualsinacontainer.• Usethistoeditsizes,positions,andalignments.
Properties
• Somepropertiesareonlyavailabletospecifictypesofvisuals.• E.g.,onlywindowscanhaveaniconpropertyorawindowstateproperty(maximized,minimized,etc.).
• ThesepropertiescanbesetintheCodeBehindaswell.
Coding
ChooseView– SplitView
ToviewtheXAMLEditor
Coding
• YoucancodedirectlyinExpressionBlend,BUT itishighlysuggestedtouseVisualStudioinparallelwithitforcoding.• Why?
• BecauseyougainaccesstoVisualStudio’srichsetoftoolsforcoding(refactor,debugger,etc.).
• UseExpressionBlendfordesigningtheGUI,useVisualStudiotocodethelogic.
HandsOn
• Wewillcreateapictureviewer applicationusingExpressionBlendandVisualStudio.• Functionalities:
1. Homescreen2. Pagetoseeallphotos3. Vieweachphoto
PicturO
Window
Selectthewindow Changeitswidth&heightto800x600
Window
ChangetheBackgroundcolourto#FF353535
Select‘Background’
Window
WindowStyle =None
ResizeMode =NoResize
Title=“PicturO”
Window
• Renamethegridcontainedinthewindowto‘MainGrid’.• Insertanewgridwithinit,callit‘SplashGrid’.
Grids
• ForboththeMainGrid andSplashGrid:• Setthewidthandheightto‘Auto’• SettheHorizontalAlignment andVerticalAlignment to‘Stretch’
StartScreen
Startscreen
• Path:BackgroundShape• TextBlock:P• TextBlock:AppTitle• Button:ViewPhotosButton
• Button:ExitButton• Button:MinimizeButton
Animation
• CanbedoneinC#WPFusingStoryboards.• CanalsobedoneeasilyusingExpressionBlend.
Animation
Onthe“Object&Timeline”tab,click+
ThiswilladdaStoryboardResource
Animation
• AstheAnimationstartstorecord…• EditaVisual’spropertyatastartingtime thenaddanewKeyframe totheendingtime andputinthenewvalueoftheproperty.
Controls
• VisualssuchasButtons,Containers,andShapesarecalledControls.• Theyhaveanunderlyingtemplate specifyinghowtheyshouldlook.• Thetemplateiscustomizable.
CustomButton
• AddaButton toyourwindow• Rightclick->EditTemplate->CreateEmpty• Callit‘TileButton’• Youcanthenapplythistemplatetootherbuttonslateron
CustomButton
• GoodInterfacesshouldberesponsive,soletusaddfeedbacktoourcustombuttonwhenitgetshoveredover.• Addthese:
• Cover: Atransparentrectangleontopofthebutton• Content:Thecontent(text)presenter• HoverColor: Thecolouredrectanglethatshowsupwhenthebuttongetshoveredover
CustomButton
• OntheTriggers tab,addtheIsMouseOver =true event• Thismeansthateverytimethemouseisoverourbutton,theanimationwillbetriggered
Click‘+Property’
Changethesecondandthirddropdownsto:‘IsMouseOver’and‘True’respectively
CustomButton
• OnthefirstrowundertheActivatedwhen tab,selectgrid onthefirstdropdownbox
CustomButton
• Click+ontheActionswhenactivatingtab• AddanewStoryboard• TheStoryboardwillthenstartrecording
CustomButton
• Nowourbuttongivesusfeedback• AddaneventtoitthatclosestheappinVisualStudio• ExitButton.Click• this.Close();
ApplyingourTemplate
• Addaminimizebuttontoourapp(ifnotalreadythere)• Rightclickonthebutton->EditTemplate->ApplyResource->chooseyourtemplate• Addaneventtoit
• MinimizeButton.Click• this.WindowState =WindowState.Minimize
Photos
Createanewgrid
• Thisiswherewewillshowourphotos• IthasaScrollViewer thathasaUniformGridinsideofitcalledPhotoViewerGrid
Visibility
• SeparateourdifferentviewsintoGrids(ifnotalreadydone)• IfSplashGrid isvisible,thenPhotoGrid shouldbehidden,andviceversa
PhotoTile
• Here,wewillneedtoloadphotosintotileswhichwecallPhotoTiles• CreateaGrid,andinsideit,addanImage controlandaTextBlock• TheImagecontrolwillcontainourphoto• TheTextBlock willcontainthetitleofthephoto
PhotoTile
• Great!WenowhaveaPhotoTile• Butwait…Dowereallywanttodothisforeveryphotowehave?• No!
• UseUserControls
UserControls
• User-definedControls(e.g.,CommentBox)thatcanbeusedastemplates withinaproject.• Usefulforwhenyouhavemultiplethingsthatshouldlookthesamebuthavedifferentcontent.
PhotoTile
• RightclickandturnourPhotoTile gridintoaUserControl• Wecannowreuse itformanyphotos!
LoadingPhotos
OntheCodeBehind…• CreateaClasscalledPhotoDB• ThisclasswillhaveaLoadPhotos methodandwillcontainallofthepathstoourphotosinastringarray
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}
}}
LoadingPhotos
• WewillthenaccessthephotosinthisclassandcreatePhotoTileControlsforeachofthem,thenaddthemtothePhotoViewerGrid
ViewingaPhoto
ViewingaPhoto
• Again,wewillcreateaUserControl forthis• StartwithdrawingagridthathasTextBlock,anImage control,andaStackPanel forcomments• TurnitintoaUserControl calledPhotoPageControl
ViewingaPhoto
• GotothecodewherewecreateeachPhotoTileControl andsubscribetoitsMouseDownevent
Addthis
ViewingaPhoto
• Collapsealloftheotherviews• CreateaninstanceofthePhotoPageControl andpopulateitwiththedatafromthePhotoTileControl
ViewingaPhoto
• Now,clickingonaPhotoTile willopenupaphotopage.• Butwe’restuck!Wecan’tgobacktothephotolistfromthephotopage.• SolvethisbyaddingabackbuttoninsidethePhotoPageControl.
ViewingaPhoto
Extendingthis…
• ToallowforcommentswithinthePhotoPageControl,createaCommentBoxUserControl thathasTextBlocks forthenameofcommenterandthecomment,andadeletebutton.• AddTextBoxes sothatwhensomeonetypesonitandpressesEnter(orasendbutton),itwillgenerateaCommentBox withtherespectivedatafromtheTextBox fields.• AppendtheCommentBox toaScrollableStackPanelwithinthePhotoPageControl.
Extendingthis…
• NO! Youcannotsubmitthisexampleappasyourproject.• Youmay reusecodefromthisexample,aslongasyoucite it.• Hopeyoulearned somethingnew!
