The next step in learning Expression Interactive Designer is a classic in any graphic editing program: creating Aqua Gel Buttons.

 (Updated for Expression Interactive Designer March 2006 CTP)

http://www.valil.com/AquaGelButton.zip

Create a new Interactive Designer project.

Add a Button to the scene. Edit its template (Right-click on it -> Edit Template - > Create Empty Template -> OK).

Add a Grid to the content of the Button. Clear its Width, Height from Properties palette.

Create 2 rows of equal height (use Layout palette -> Size tab to set the Height to 0.5*).

Add a Rectangle to the Grid’s content.

This will be the shadow. I have used a rectangle instead of a DropShadowBitmapEffect for 2 reasons: BitmapEffects are not supported in EID yet and you cannot use them in Web Browser Applications because of the security restrictions.

Check if Row=0, Column=0, RowSpan=2, ColSpan=1 in the Layout palette.

Clear its Width, Height; set Margin to 1; set RadiusX and RadiusY to 10; set Opacity to 0.3; set the Name to “shadow” in the Properties palette.

Set its Fill to Black in the Appearance palette.

Open Transform palette and set in the Position tab X and Y to 1 pixel.

Add another Rectangle to the Grid’s content.

This will be the background.

Check if Row=0, Column=0, RowSpan=2, ColSpan=1 in the Layout palette.

Clear its Width, Height; set Margin to 1; set RadiusX and RadiusY to 10; set the Name to “background” in the Properties palette.

Right-click on Fill -> Template Binding -> Background.

Right-click on Stroke -> Template Binding -> BorderBrush.

Add a ContentPresenter to the Grid’s content.

Check if Row=0, Column=0, RowSpan=2, ColSpan=1 in the Layout palette.

Clear its Width, Height; set Margin to 1 in the Properties palette.

Right-click on VerticalAlignment -> Template Binding -> VerticalContentAlignment.

Right-click on HorizontalAlignment -> Template Binding -> HorizontalContentAlignment.

Add another Rectangle to the Grid’s content.

This will be the highlight.

Set RowSpan=1 and check if Row=0, Column=0, ColSpan=1 in the Layout palette.

Clear its Width, Height; set Margin to 5,3,5,1; set RadiusX and RadiusY to 5; set the Name to “highlight” in Properties palette.

Set its Fill to LinearGradientBrush in the Appearance palette. Set both start and end color to white. For the end color set its Alpha value to 0 (completely transparent). Make the gradient’s direction vertical (use BrushTransform from the Tools palette to rotate the direction).

Create a new state from the Timeline palette.

Go to Timeline Properties palette, General tab and add a new trigger. Set “IsEnabled” in the first field and “False” in the second one. A new tab “IsEnabled” is created in the Timeline. Click on it, select background rectangle and set its Background to “LightGray”.

Create a new state from the Timeline palette.

Go to Timeline Properties palette, General tab and add a new trigger. Set “IsPressed” in the first field and “True” in the second one. A new tab “IsPressed” is created in the Timeline. Click on it and set shadow and highlight rectangles visibility to Collapsed.

Create a new timeline from the Timeline palette, enter “MouseEnter” as the name.

Go to Timeline Properties palette, General tab and add a new trigger on [Target Element], MouseEnter, Begin.

In the Timeline palette, set the playhead to 0:00.250.

Select the shadow rectangle, go to Transform palette and set in the Position tab X and Y to 3.

Create a new timeline from the Timeline palette, enter “MouseLeave” as the name.

Go to Timeline Properties palette, General tab and add a new trigger on [Target Element], MouseLeave, Begin.

In the Timeline palette, set the playhead to 0:00.250.

Select the shadow rectangle, go to Transform palette and set in the Position tab X and Y to 1. 

Now exit from editing template (Timeline palette -> Return Scope to Root).

Add a couple of buttons and set their templates (Right-click on the Button -> Edit Template -> Apply Resource -> ButtonControlTemplate1).

I have started to learn today how to use Expression Graphic/Interactive Designer. A couple of weeks ago, somebody asked in the Avalon forums if the RichTextBox control from the libraries comes with toolbars.

The answer is no, however it is very simple to create them - the concept of commands is very powerful and Avalon comes with some predefined ones that will make the task very easy.

http://www.valil.com/RichTextBoxEditor.zip

The toolbar icons are created using the Graphic Designer and exported as XAML. I am not a graphic designer so if you want slicker icons you can play with the attached icons.xpr file. Just remember to when exporting as XAML to set

Document Format to ResourceDictionary and Group By to Layers and to manually add Stretch=”Uniform” to every DrawingBrush.

Create a new Interactive Designer project.

Add the icon resource file (icons.xaml) to your project (Project menu item -> Add item).

Link to the resources (Resource palette -> Link to resources -> icons.xaml)

From the Library palette, add a DockPanel to the scene. Set its Margin property to default (Properties palette -> Margin -> Clear/Default)

From the Library palette, add a Toolbar to the DockPanel. Set Dock property to Top and Width, Height properties to default.

Add a new Button to the Toolbar. Set Width, Height properties to default.

Set Command property to "EditingCommands.ToggleBold"

Set Tooltip property to "Bold".

Add a Canvas to the Button. Right-click on it -> Style -> Create Empty Style -> OK.

Now you are editing the Canvas style. Set both Width and Height to 24 and Margin to 2 (don't worry if the value don't change yet).

Exit from editing the style (Timeline palette -> Return Scope to Root).

Set Width, Height, Margin for Canvas to default.

Apply BoldIcon resource to Background property for Canvas (Background -> Apply Resource -> BoldIcon).

Repeat the steps for adding the rest of the buttons.

Set the appropriate commands, icons and tooltips.

These are the rest of the commands:

- EditingCommands.ToggleItalic

- EditingCommands.ToggleUnderline

- EditingCommands.AlignLeft

- EditingCommands.AlignCenter

- EditingCommands.AlignRight

- EditingCommands.AlignJustify

- EditingCommands.IncreaseIndentation

- EditingCommands.DecreaseIndentation

- EditingCommands.ToggleBullets

- EditingCommands.ToggleNumbering

- ApplicationCommands.Undo

- ApplicationCommands.Redo

For the Canvases you don't have to edit a new style but to apply the existing one (Right-click on it -> Edit Style -> CanvasStyle1)

Add Separators between groups of Buttons.

Add RichTextBox to the Canvas. Set Width, Height to default. Go to DockPanel and set LastChildFill to True.

That's it.

These are not the only available commands; explore the documentation for ApplicationCommands and EditingCommands classes if you want to add other features to your editor. And if you are interested to load/save XAML/RTF check this sample: http://blogs.msdn.com/jfoscoding/archive/2006/01/16/513383.aspx