Following is the Expression Blend pure overview from my blogs. It is not an in-depth tutorial but you can get a quick overview of Expression Blend from the following tutorial. For more updates you can watch my blog here or here.
1. WPF Framework Overview
Below is the Framework diagram of WPF from the MSDN help:
The block shown in red is the foundation of WPF.
There are three DLLs which make the Windows Presentation Foundation, that is WindowsBase (WindowsBase.dll), PresentationCore (PresentationCore.dll), and PresentationFoundation (PresentationFoundation.dll). Let's first discuss the above block.
From the bottom, the first WPF component is milcore. MIL stands for Media Integration Layer. MIL is the interface between DirectX and CLR (plus the above layer). MILCORE is an unmanaged component which handles the 2D, 3D animation and another (I forget which one) with the help of DirectX. Performance & Hardware acceleration (benefits of DX) is the key reason why MILCORE is unmanaged. WPF aka Avalon uses MILCORE for the purpose of rendering. MILCORE is also known as a composition engine.
WindowsBase defines most of the base types which you are going to use in WPF. For a WPF application, WindowsBase assembly must be included.
The second component is PresentationCore (PresentationCore.dll). This DLL doesn't hold any UI component but it contains the base types which can be used in implementing the UI component (except the Window class).
The third and last one is the PresentationFoundation which contains all the WPF controls and other useful WPF functionality.
2. Important Classes in WPF
The following classes are the major base of WPF. Let's look at each of them.
System.Threading.DispatcherObject
Almost each class in WPF is derived from DispatcherObject directly or indirectly. This class is used for handling concurrency and threading. It's also responsible for event management. If you know Win32 then you are aware of message pump. The same work is done by dispacherobject here. During the design phase of WPF, the goal was to move to a single thread of execution (STA), but a non-thread "affinitized" model (Affinity: The force attracting atoms to each other and binding them together in a molecule). The reason for STA is interoperability. We are not going into the details of this. Secondly, given that you have objects with STA threading, you need a way to communicate between threads, and validate that you are on the correct thread. Herein lies the role of the dispatcher.
System.Windows.DependencyObject
One of the primary architectural philosophies used in building WPF was a preference for properties over methods or events. WPF introduces a new type of property called a dependency property, used throughout the platform to enable styling, automatic data binding, animation, and more. For example, if there is window object and you are applying some styles to the window object, you need same styling applied to all child objects. In that case, in a normal application, you need to implement the methods which will set all the child's properties to the required values. But with the above DependancyObject, this can be minimized to almost 0. You can set the dependency and notification on the property. Please look at this article for more information regarding DependencyObject and Properties. Moreover, there are attached properties used for a similar purpose.
System.Windows.Media.Visual
When the system is defined, the next step is to draw pixels on the screen. This visual class is the point of connection between these two subsystems, the managed API and the unmanaged milcore.
System.Windows.UIElement
UIElement defines core subsystems including Layout, Input, and Events.
System.Windows.FrameworkElement
The primary features provided by FrameworkElement relate to application layout. FrameworkElement builds on the layout introduced by UIElement (see the previous section) and makes it easier for layout authors to have a consistent set of layout semantics. Effectively, it allows the programmer or designer to override the automatic layout functionality introduced by UIElement by specifying alignment and layout properties for controls. These then use FrameworkElement under the hood. Two critical elements that FrameworkElement introduces to the WPF platform are data binding and styles. Pretty hard huh!!!
3. XAML Overview
The first step in learning WPF is to take an overview of the Framework and the classes. You can get the same on my previous posts in WPF. Once you get the overview, the next thing to learn is XAML. Following are some notes on XAML:
What is XAML?
Extensible Application Markup Language (XAML) is a markup language for declarative application programming. That means that you can do most of your work with XAML for the WPF. Windows Presentation Foundation (WPF) implements an Extensible Application Markup Language (XAML) loader and provides Extensible Application Markup Language (XAML) language support for Windows Presentation Foundation (WPF) types. So you can say, XAML is the XML which extends the possibility of application development. It's not a WPF component.
XAML is the markup language (XML based) that is used to describe UI elements, data binding, eventing, and other features. XAML is used by WPF, WWF and WPF/E (WPF everywhere).
For creating or editing XML, there are many tools available in the market, e.g. XAMLPad (which comes with SDK), Expression Blend etc. Microsoft provides Blend to easily create XAML for WPF or SilverLight.
To start with XAML, download Blend September Preview. It is a paid product. If you don't own the product, you can use other XAML based tools for learning XAML for WPF and Silverlight.
Download Blend : Blend September Preview
Start with the : Tutorial / Video, else read my next section
4. Starting with Blend
I hope you downloaded Microsoft Expression Blend. We have discussed that Blend is a tool for creating XAML with a few clicks. Graphics and Animation support is tremendous. It is similar to Flash to some extent. As my previous suggestion, before going for WPF, start with Expression Blend overview and then switch to WPF.
When you first open Expression Blend, you will be presented with the below screen. There are different sections similar to Flash. These are toolbox, Menu, Window list, Interaction Box, Project Properties and resource panel.
When you open Blend, the welcome screen would be there. If not visible, go to the Help menu and click on welcome screen. From the Help tab choose the UserGuide. From UserGuide, read the following section.
The workspace, Managing projects and working with objects. These points are extremely easy and if you are a regular .NET programmer and do a bit of designing, you can get it easily within 2 hours.
According to me, the important points to read from the user guide are as follows:
- Why Expression Blend
- Keyboard Shortcut
- Area of Workspace
- Adjusting your workspace
- Working with Object Section
Once you learn that, start with the Drawing from the next section.
5. Drawing in Expression Blend
Hope you referred to my previous post and read the topics mentioned in the section from UserGuide of Microsoft Expression Blend.
Now the next topic to discuss is Drawing. Please keep the User Guide open with you so that we can refer to it easily. In WPF, all the objects drawn are Vector based. Vector Graphics means the object which you place is generated using different points, lines, surfaces rather then pixels. That means when you scale the object, it doesn't lose the clarity of the control/shape.
Also the same would be resolution independant. The benefit of changing graphics from raster to vector is you do not need to implement anything special for different resolution. You have a different tool for different kind of drawing.
Shapes and Path
There are two things to keep in mind while drawing Vector based graphics. We have the option of Shapes or Path. Ellipse, rectangle etc. are shapes while Paths have defined points. Path can be drawn using Pen or Pencil and you can edit and move the points within a path. There is always an option to convert shapes to path.
Combining Path/Shapes
You can combine different paths or shapes with different options. Put two circles in the artboard side by side so that they overlap and fill the circle with color. Now select a different option from Object Menu > Combine > (different option is there).
You can try each and see it how it affects the shapes. Else look into the user guide (Drawing section).
Compound Path/Shapes
When you compound path/shapes, the intersection of the shapes are subtracted and the resulting path would be the remaining portion. You can put two shapes and try Compound Path from Object Menu > Path > Compound Path. If the option is disabled, just convert the shapes into path and try again.
Opacity Mask under Brush Section
When you change the opacity mask, the image/shape/path will be converted to opaque shape. Here you are changing the Alpha component and that is used for transparency. I set the 50% transparent to square in following figure. You can see it become transparent like a green glass.
Here, I just show you an overview of the Drawing section. You can complete it from the User Guide now. Then move on to the next section.
6. Appearance in Blend
Hope you liked all the previous five sections.
If you directly come to this section, just read the previous sections. Now, open the User Guide that comes with Expression Blend and go to the Appearance section.
We learned the drawing part, i.e. how to draw and work with different shapes and paths. In this article, we will work on Appearance i.e. looks of the shapes and controls. There are different properties by which you can set the looks. Following are list of properties:
Fill & Stroke : Used for shape/path and it is for filling the shape or changing the border of the same respectively
Background, Foreground & BorderBrush: Similar to Fill and stroke but used for the control
Opacity & Visibility : Used for making control/shapes/path transparent. You can change the values from the Properties section. Following are the images:
A similar window is used for editing shapes properties. Following are the different options for brush. These are No Brush, Solid Color Brush, Gradient Brush, Tile Brush. We can use Image Brush and Pattern Brush too. The Brush is used to set all the above properties.
For Color/Pattern/Brush copy, you can use Eyedropper and Paint Bucket. You can try it from Microsoft Blend.
Gradient : Gradient brush can be applied to any control/shape. There are linear and radial gradient brush. You can create one shape and use both gradients which are displayed at the bottom of the gradient brush section. Also to set the Gradient, you can use 
Bitmap effect: You can use different a bitmap effect for making an object more attractive. You can use None, Blur, Glow etc. option for the same. Please put one shape, give gradient color and try all options from it.
7. Texts using Blend
Hope you are enjoying the Tutorial series of Blend. Please let me know if it needs any improvements.
The next section covers the Text area of WPF. Until now, we have seen how to work with objects (shapes/paths), drawing shapes/paths and giving appearance to the shapes/path and controls.
Now, the agenda of this section is to show how to work with the Text controls. The first thing we need to know is which controls are provided in Expression Blend/WPF.
You are all familiar with TextBox, RichTextBox, PasswordBox and Label. TextBlock is similar to Label. It provides readonly textblock to the user. The only difference between TextBlock and Label is that Label can provide mnemonics support. FlowDocumentScroll Viewer provides a section which has scrollbar support for that area. You can edit the appearance in the same way as we have done for shapes/paths.
Formatting Texts : There are many ways for formatting text. Following are the icons which are used for the same. Almost all features may be already used by you when you work with Microsoft Office.
All the features of text formatting like Font face, size, bold, italic, underline, paragraph, indentation, margins, bulleted or numbered list are available. It's really simple and very useful.
8. Layout using Blend
From the user guide, I skipping the 3D and Media part as it is not as useful at current level. Now, we move on the Layout part of Expression Blend.
Layout is used for laying out different controls on the form. In WPF, they are known as Panels and Containers. Following are panels and containers which are used in WPF as layout controls:
- Grid contains the row and column for the layout. You can make rows and columns into the grid layout and use the same to lay out different controls which align to rows or columns.
- Canvas control is similar to old Windows Form control. All the controls that reside in canvas have a relative X and Y position. It is used for the fix position in the form/page.
- In the Dock panel, controls are always docked to edges defined in the properties.
- Stack panel arranges the controls in one line. The middle point of the controls are aligned to either horizontal or vertical defined in properties of stack panel.
- Wrap panel is similar to an HTML page. It arranges child controls from left to right position.
When you put controls/shapes/path in the panels, it is displayed as layers drawn. They are numbered in Z-Layer. You can use Bring To Front, Bring to Forward, Send To Back etc. function on right click of the control for laying out the controls as you wish.
History
- 18th October, 2007: Initial post
