Expression Blend

Expression Blend

Key Shortcut	User Control	Simple Text	Shape Tool	Combine path & shape
Apply color	BitmapEffect	Gradient	Flow Document	Convert text to path
Transform	Timeline	Keyframe	Motion	Integrate Image & Video
Trigger	DataSource	DataBind	Interactive Button	Resource

Blend KeyShort
1. F6 ( animation workspace <-> design workspace )
2. F11 ( Design <-> XAML <-> Split)
3. F12 ( Show Result panel)
4. F5 ( Build)

Create User Control
1. Drag controls (Textbox & button) into ArtBoard > adjust control's properties.
2. Hit F5 and run it.
3. Select all controls > Ctnl C (copy) > Project Panel > Right click project > Add new item > UserControl > name it (Uc.xaml) > ok
4. This creates UC.xaml in project & edit mode for usercontrol> Paste copied controls on it (Ctnl+V)
>Adjust properties of Usercontrol > Save > build project (F5)
5. Asset Library > Custom controls > select it > double click on it

DataSource
1. Add datasource => project > Data > XML > Add XML datasource > provide URL to .rss (Standard xml format)
2. click on datasource rssDS > drag to Artboard > option window popup > select controls to bind.
3. Custumize data template > OK .
4. Properties > Layout > Margin (0,0,0,0) : populate entire window.

Back

Data Binding (bind text size based on slider value)
1. Drag slider > properties > min =5 > max=100 > initialval=12
2. Drag TextBlock > put some random text into Textblock
3. select TextBlock > Properties > Text > Advanced Property of font size > DataBinding
4. Element Property (Bind to another WPF control) > Screen elements> select Slider > slider Properties > Value> Finish
5. Hit F5

Simple Text
1. Uneditable Text
* Drag TextBlock > put some text > deselect textblock
* Properties > Layout >
* Drag label > Deselect >

Using shape tools
1. Shape Tool ( Rectangular , Ellipese , Line )
2. Press Shift + draw ( Draw square or circle )
3. Press shift + Alt + draw ( Draw from center for square or circle)
4. Press Alt + draw ( Draw one direction )

Back

Combine path and shape
1. Draw multiple controls to panel
2. select controls you want to combine.
3. Menu> object > combine > (unite, Divide, Intersect, Substract , Exclude overlap )

Convert Text To path (text to graphic)
1. Drag TextBlock into Artboard> Put text > Text Properties
2. Select TextBlock > Object Menu > path > ConvertToPath
3. TextBlock in visualtree -> Path
4. At design view > Directselection Tool > adjust text at design view

Using FlowDocument ( Rich control)
1. Text > FlowDocument
2. Asset library > system control > Flow Document

Apply Color
1. Drag rectangular to Artboard.
2. Properties > Brush.
3. Under Brush > 3 options to choose ( Fill , Stroke , OpacityMask )
4. five Brush ( No brush , solid brush , gradient brush, tile brush , Resource brush : created brush that we can apply )
5. Color Eye droper > display color where eye dropper point to.

Back

Bitmap Effect ( blur, Bevel , DropShadow ,Emboss, Outer Glow)
1. Drag rectangular to Artboard and select it.
2. Properties > Appearance > Click on Bitmap Effect, drop it down.
3. Bitmap effect > New > choose Bitmap Effect Group > Children collection editor shown and click on .....
4. Add multiple bitmap effect to the selected control at the time.

Using Gradient
1. Drag rectangular to Artboard and select it
2. Under Brush > Select Fill or Stroke
3. Properties > Brush > Gradient brush (3rd ) & customize color and option
4. Select Brush Transform > adjust vertical , horizontal , diaganol
5. click Brush > Save as Resource > select any control and apply to it.

Integrate Image (.JPG)
1. Asset Library > System Controls (Show All) > Images
2. Double click on image control , it shows up at panel and select it.
3. Properties > Common Properties > Source > [-] > import images.
4. Properties > Layout > Margin & alignment & Width & Height.

Back

Integrate video (.wmv)
1. Asset Library > System Control (Show all) > Media Element
2. Double click on it and show on panel.
3. Properties > media > Source > Choose .wmv file
4. Hit F5
5. Play manual > properties > Media > Advanced > LoadBehavior = Manual
6. Add button to play, select it > Events (under properties, next to name, yellow thunder sign) > Give event name (btnPlay) > launch Visual Studio

OR
1. Right click Project > Add existing item
2. Choose video file (.wmv)

Create Interactive Button
1. Asset Library > Simple Styles > (Show All ) > Simple Button > Insert into panel
2. SimpleStyles.xaml is added to project
3. Click on resource > view all resources (optional)
4. Select button > customize button properties using properties tab
5. Select button > Right click > Edit Control Pars (Template ) > Template
6. Open interaction Panel > choose isMouseOver=T/F (Over State) , isPressed=T/F , isEnable=T/F > Properties > Brush color for each state.
7. Hit F5

Back

Transform(translate, scale, rotate, skew , flip)
1. Translate (moving object along X-axis & Y-axis, up down right left)
* Square on Artboard > Properties > Transform > Render Transform > translate (most left btn)
* Advanced > Layout Transform.

2. Scaling ( enlarge at X-axis & Y-axis )
* Select Square> Properties > Transform > Render Transform > Scale (3rd left btn)
* Choose value for X=2 ( 200% larger than original size at X-axis) and Y

3. Rotating ( Move object at certain degree)
* Select Square >Properties > Transform > Render Transform > Rotae (2nd left btn)
* Ajust pivot pt of Square=center rotate pt ( white dot on square) > Ajust angle value.

4. Skewing

Timeline( Create animation)
1. Shift to animation workspace (F7). ( put Interaction workspace below Artboard)
2. Under objects and Timeline, Click + sign under object and create timeline (ABC) > name StoryBoard Resource ( a group of animation)
3. Red Line around Pane ( animation mode) , can turn on or off by clicking red circle on left upper corner.
4. Shift to design workspace (F6) > interaction panel > Click Trigger (vertical tab ) > Window = Timeline1, Loaded=Begin.
5. TimeLine can be widen , snapping on and off , right upper corner of interaction panel.

Back

Keyframe (object move from one point to another point)
1. Select control you want to animate on Artboard.
2. Choose availble timeline > Interaction panel > Object and Timeline. (Create Timeline if Not created)
3. Drag slider first along timeline and stop it (keyframe create, white spot) > drag the control to next spot.
This will move object move along with slider.
4. Right click on keyframe > EaseIn > Choose percentage. ( Apply easein/out on keyframe)
5. Hold out. Hold object till next keyframe and move to next spot.
6. Play and test it.

Motion (object travel along the path )
1. Drag and draw ellipse to Artboard
2. Unselect color> brush > white.
3. Select ellipse > Object > Path > Convert to motion path > Choose target object
4. Make object move along path without seeing path.
5. Change timeline to default (design workspace ) > Ellipse properties > Appearance > visibility=hidden
6. Play it.

Back

Trigger(action trigger animation, any action based upon any object)
1. By default, window load event occurs while animation timeline created.
2. Delete event trigger > Interaction panel > Trigger > -Trigger
3. Drag button to Artboard> Select button > Open Trigger
4. Under trigger > When (Window ->button (Timeline) , loaded-> Click (Begin) )

Releated Resources
http://contentpresenter.com/
http://thewpfblog.com
http://www.microsoft.com/expression/products/overview.aspx?key=blend
http://blogs.msdn.com/karstenj/
http://windowsclient.net/default.aspx

Back