posted on Sunday, February 22, 2009 permalink
Foundation Expression Blend 2: Building Applications in WPF and Silverlight
by Victor Gaudioso
More and more video tutorials on WPF and Silverlight show the presenters using Blend so I decided to get a quick background on everything it can do. I have been doing all of my XAML by hand so far and seeing videos with someone building a page in Blend or binding data is impressive. However, I experienced Visual InterDev back in the day and am suspicious that Blend is one of those applications that looks good in demos but once you start using it, you find out that it has serious limits. I can imagine though that the ability to hop back and forth between Visual Studio and Blend minimizes that a bit. In any case, I'm excited to see the extent of what Blend can do.
- Author's website is www.actionscript.org and it's still under construction, interesting.
- Book has copyright of 2008.
- Explains WPF/Blend and C# and XAML.
- Mentions Silverlight 1.1 but not Silverlight 2.0, uh oh, might be old this book.
Chapter 1: Installing
- Shows how to install everything, but seems old, e.g. downloads Microsoft Silverlight Tools Alpha Refresh.
- Also installs Microsoft Expression Blend 2 September Preview.
- Creates a WPF project.
- TIP: I have you create a new directory called Projects and save your project there because by default Visual Studio 2008 and Blend 2 save their projects in different locations.
Chapter 2: Setting Up the WPF Development Environment
- Talks about the designer/developer workflow.
- Talks about how he used to work with Flash/actionscript and Photoshop.
- Does a HelloWorld in WPF in Visual Studio.
- Shows how to style a textblock.
- Makes a button.
- Is going to create EventTriggers for the button.
- Kind of hard to follow the screenshots and what he is doing, not sure a book is the best medium to teach Expression Blend.
- Nice UI for events.
- Didn't know you could record like this: "Blend is taking note of every action you are performing and placing it into the Storyboard. This is much like recording actions in Photoshop or the using the AutoKey function in After Effects.".
- Interesting that all coding of the event for the button was done in Blend instead of Visual Studio.
Chapter 3: The Blend 2 Integrated Development Environment
- Talks about the tool bar on the left.
- Selection tool (all keys have keyboard shortcuts).
- Direct selection: shows how to create paths.
- Pan (hand).
- Camera orbit (only WPF).
- Eye dropper, paint brush, all same as e.g. photoshop.
- Brush Transform: most powerful, allows you to manipulate an object's gradient, very nice interface:
- Shape keys (same as other applications).
- Talks about Asset Library: it's a collection of every control available to you in WPF/Silverlight.
- Shows InkCanvas, ok, don't know when I would use it.
- With the frame element you can have a website in an application.
- Talks about Objects and Timeline, talks about brushes.
- Then talks about ResourceDictionaries, Appearance, Layout, common properties, text, transform.
- Design/xaml view, etc.
- shows how to make a quick animation with a storyboard, very easy, nice interface, creates all the XAML with trigger elements, etc. in background, very nice.
- Shows how to do 3D rotating with the Camera Orbit tool, uses storyboard, looks easy as well.
Chapter 4: C# and XAML
- Won't go into details.
- .NET CLR background.
- Talks about basic OOP, etc. this section is for designers.
- Then some XAML.
- Very quick chapter.
Chapter 5: Layout Elements
- Talks about Grid, like HTML table.
- Didn't know it was this easy to make a Grid in Blend.
"Fortunately for you, you are getting started with me, and I am going to teach you about the slightly more complex Grid Layout mode."
- You can click the corner icon to get into Canvas mode to lock (not star size) your columns/rows.
- Shows how to put textboxes in grid.
- Talks about Canvas, basically just that its children are absolutely positioned.
- Talks aout StackPanel, does vertical and horizontal, also WrapPanel (readjusts content).
- Also does DockPanel, but is not the obvious useful use (application layout).
- You can rightclick in objects and timeline and change the layout type e.g. from StackPanel to WrapPanel, nice.
- Talks about ScrollViewer, puts picture in it.
- Talks about Border, "allows you to draw a Stroke around another element", etc.
- Does UniformGrid, shows how it functions a bit like wrappanel.
- Does ViewBox, puts image in it and now when you make the ViewBox bigger, the image gets bigger.
Chapter 6: The MediaElement
- MediaElement control plays audio as well as video.
- Independent mode allows you to control the play behavior of the MediaElement, e.g. play in slow or fast motion, nice.
- Technically XAML can be changed on a XAML EventTrigger.
- If you tell your MediaElement to run in Clock mode, you are telling the MediaTimeline to drive the media playback.
- Creates a "first MediaElement project".
- Loads in video, uses a .wmv video.
"I like to create my buttons using shapes and then let Blend 2 turn them into Button controls."
"I like to keep the x:Name on the same line as the control type, and then every other property has its own line."
- Ok so he spends the rest of the chapter building a video player with four buttons.
Chapter 7: ControlTemplates, Styles and Custom UserControls
- Going to create a Style for a WPF Button control that will contain a ControlTemplate, and then change that ControlTemplate to have the Button show an Image control.
- Constructs a button with rounded corners, etc.
- Shows how to use the rectangle handles.
- Talks about ControlTemplate blend used to create the style for our button.
- I went into Visual Studio and added an button event, easy, the button doesn't have a "keydown" image though.
- Talks about styles.
- To reuse a Style in another XAML file, you can define it in a file called a ResourceDictionary that is accessible to your entire application.
- Going to show how to create a ResourceDictionary.
- TODO: ResourceDictionary example got a bit complicated, left it.
- Then adds Button Style to ResourceDictionary.
- TODO: Then changes the text to image on button style and both buttons change, page 155.
- Goes to visual studio, does button handler, etc.
- Talks about Custom UserControls.
- Says "Right-click the new Button control and select Edit Control Parts (Template) ä Apply Resource of BlueButtonControl", but that was greyed out for me.
Chapter 8: Events and EventHandlers
- Makes a button in blend.
- Goes to vs2008 and puts in the click event in the code.
myButton.Click += new RoutedEventHandler(myButton_Click);
- Put in AllowDrop, cool it works, when you drag things in.
- There is also DragLeave and DragOver, also Drop e.g. to drag a video and drop it onto the application, and the video will start playing.
- TODO: Page 174, does an example of dragging a video into an application and it immediately starts playing.
- Talks about MouseEvents.
- Also DoubleClick and MouseDown.
- FLASHCARD: When would PreviewMouseDown and PreviewMouseUp be useful?
- Also MouseEnter and MouseLeave.
- MouseLeftButtonDown made for controls that do not have a Click event.
Chapter 9: ObservableCollections and the Data Factory
- In chapter 4 he was explaining what C# was and now we are already on the "Abstract factory pattern", nice.
- Example: path of images on hard drive bound to a control, nice.
- Uses static classes within one namespace the he refers to, interesting pattern.
- Explains namespaces quick.
- Created 3 classes in Visual Studio.
- Is going to show how to databind now in Blend.
- Clicked on +CLR object and it created a DataSource we can use in XAML.
- Goes back to visual studio for intellisense.
- Runs application, dropdown works.
"Everything visible in your application was painted by a brush."
- The comboxbox example is good.
Chapter 10: WPF and 3D
"Trying to create a XAML Viewport3D by hand would be very impractical, if not impossible."
- Blend 2 at this time has very limited capabilities for creating 3D objects (in this chapter he will use ZAM 3D by Electric Rain).
- Adds an image to the blend project.
- then: tools, make image 3D, nothing seems to happen, but the image has been alterted:
- It's amazing what you can do with the 3D animation of a picture, e.g. have it spinning around in 3D and slowing resting into place, nice#.
"Currently the only 3D software program that exports directly into XAML is Electric Rain’s ZAM 3D."
- Shows that in ZAM 3D you can do 3D text, combines graphics and 3D, does a flyby.
- Shows how to import and work with OBJ files, the OBJ file format is open source and has been adopted by other 3D animation vendors such as 3ds Max, Maya, Poser, Softimage, and Blender, etc.
"If you painted a MediaElement video player onto a 3D surface, you could no longer interact with its play, stop, or pause buttons."
- Mentions some tutorials.
- And you can get the 3DTools at codeplex.
- Talks about skewing a video etc. lots of possibilities.
Chapter 11: DependencyProperties
- Nice: one section of this chapter is: How DependencyProperties can solve a real-world problem.
"You already have experience in working with DependencyProperties because Fill and Source are DependencyProperties."
"What is the big deal, and why are you devoting a chapter to something that seems so relatively straightforward?"
- Nice he presents a scenario in the past which dependency properties solved.
"Blend 2 cannot even open a code-behind file."
- The problem is that you create a UserControl and want a designer to be able to change the properties on it (not go in the code behind and change the properties there).
- So now we are going to build a custom UserControl with custom DependencyProperties.
- Shows how to make a reflection button, quite complicated.
- TODO: This example has about 30 steps and starts to break up after awhile, I couldn't get the UserControl created, gets quite complicated, I couldn't finish it, but worth doing, around page 260.
Chapter 12: Case Study A: 3DImageProject
- He is using all the concepts we learned to make a project.
- After a couple pages, makes a cube with three pictures on it.
Chapter 13: Case Study B: 3DTieFighterProject
- Project which uses ZAM 3D to make a 3D star wars like ship.
- Looks like it has a little functionality.
Chapter 14: Case Study C: SilverlightPagingSystemProject
- Creates navigation buttons.
- Has buttons and each removes and adds children from the canvas to display a page, quite hard-wired.
Chapter 15: Case Study D: SilverlightVideoPlayerProject
- TODO: In a couple pages creates a video player with play button, stop button, etc. in Silverlight, page 331.
Chapter 16: WPF and Silverlight Resources
- http://www.contentpresenter.com - about 8 tutorials, look good, like random animation.
- http://silverlight.net - always new stuff here.
- Can find some intereseting things here.
- http://bea.stollnitz.com/blog/ - nice blog.
- http://rhizohm.net/irhetoric/ - interseting, also jquery stuff.
- http://blogs.msdn.com/tims/ - good blog.
- http://www.thewpfblog.com/ - the author of this blog seems to have "joined adobe", cool.
- http://silverlight.net/Learn - great videos.
- http://blendables.com/ - costs money, might be worth a try to see what is possible.