Microsoft Expression, Digital Memories, Media and other fun stuff

Themed Applications using Resource Dictionaries in Expression Interactive Designer

jrowe — Wed, 24 May 2006 00:20:00 GMT

Switching themes in an application can be achieved by creating multiple external resource dictionaries and ensuring that styles and/or templates defined in these resource dictionaries contain identical names. The following example demonstrates how to switch “the look” of your application on the fly:

The sample walks through creating two styles for a button. Each style has the same name and same target, but the different “same named” styles are stored in two separate resource dictionaries. The application can then switch the style of the button at run time by loading and unloading respective resource dictionaries:

Setting up:

Launch Expression Interactive Designer
File->SaveProjectAs: “ThemeSwitching”
Create 2 external resource dictionaries by clicking File->New->ResourceDictionary twice.
Expand the Project Palette and notice the new ResourceDictionary1.Xaml in the list of files
Rename “ResourceDictionary1.Xaml” to “ResourceGreen.xaml” and ResrouceDictionary2.Xaml to “ResourceBrown.Xaml”
Ensure the Resource Palette is viewable (View->Resources)
On the resource palette, click “Link To Resources” and select “ResourceGreen.xaml” and “ResourceBrown.Xaml”

Creating a Theme with a style stored in a resource dictionary:

Draw a button on the scene
Rename the button “greenThemeButton” and change the button content to “Switch to Green” rather than “Button”.
Right mouse click the greenThemeButton in the timeline and click: Edit Style->Edit a Copy of the Style to bring up the Create Style Resource Dialog
On the Create Style Resource Dialog, Set “Define in:” option to be “other document” and select “ResourceGreen.xaml” from the dropdown.

After accepting the Create Style Resource Dialog, Interactive Designer leaves you in Style Editing Mode. Using the appearance palette, change the back color of the button to be green.
Now switch back to Window1.xaml and notice the button style has been applied to “greenThemeButton”

Creating a second theme:

First, break the current link to “greenThemeButton” by going to the Resources palette and deleting the link. A dialog will appear asking what to do with the style from ResourceGreen.xaml that is currently applied to greenThemeButton. Click the “Don’t fix” option. After accepting the dialog, notice that the button is no longer green. This is expected and will reappear whenever we reestablish the link to the ResourceGreen.xaml resource.
Draw a second button on the scene and change the button content to “Switch to Brown” rather than “Button”.
Rename the button “brownThemeButton” and
Right mouse click the brownThemeButton in the timeline and click: Edit Style->Edit a Copy of the Style to bring up the Create Style Resource Dialog
On the Create Style Resource Dialog, Set “Define in:” option to be “other document” and this time select “ResourceBrown.xaml” from the dropdown so that the style is saved in the ResourceBrown.Xaml dictionary. IMPORTANT: be sure to name the key “ButtonStyle1” just as it was in the ResourceGreen.xaml.
Using the appearance palette, change the buttons background to be a brown color.
Switch back to the design view of Window1.xaml. Note that both buttons are now brown. This is because each button has “ButtonStyle1” applied to it.

To test resource switching at design time, try the following:

Delete the link to the ResourceBrown.Xaml in the Resources palette,
Now link to ResourceGreen.xaml – the buttons will now turn green.

To get the buttons to do the switching at run-time, from the project palette double click window1.xaml.cs to open an external code editor and paste the following code inside the Window1 class:

public Window1()

{

this.InitializeComponent();

// Insert code required on object creation below this point.

this.greenThemeButton.Click += this.SwitchTheme;

this.brownThemeButton.Click += this.SwitchTheme;

}

private void SwitchTheme(object sender, EventArgs e)

{

string source = null;

if (sender == this.greenThemeButton)

{

source = "ResourceGreen.xaml";

}

else if (sender == this.brownThemeButton)

{

source = "ResourceBrown.xaml";

}

if (source != null)

{

ResourceDictionary resourceDictionary = new ResourceDictionary();

resourceDictionary.Source = new Uri(source, UriKind.Relative);

// if you want to have application level resources (rather than just window), change this.Resources to Application.Current.Resources

this.Resources.MergedDictionaries.Clear();

this.Resources.MergedDictionaries.Add(resourceDictionary);

}

Path Editing: Tips for adjusting tangents using the March CTP of Expression Interactive Designer

jrowe — Fri, 17 Mar 2006 01:51:00 GMT

Path Editing tips for adjusting tangents using the March CTP of Microsoft Expression Interactive Designer:

Adjusting tangents using the sub select tool:

Clicking and dragging tangents with the sub select tool:

Clicking and dragging a tangent adorner will also adjust the direction of the adjacent tangent if and only if the two tangents lie in opposite directions (within 0.25 degrees) when the mouse button is first pressed. If the two tangents are not lined up when the mouse goes down, the adjacent tangent will not be changed. Thus, if you drag a tangent at a sharp corner, only one tangent moves; if you drag a tangent at a smooth point, both tangents move.

How to adjust adjacent tangents equally in size and direction with the sub select tool:

Press alt and hover over a point, then click & drag.

How to change a tangent independently of its adjacent tangent using the sub select tool:

Press alt and hover over the tangent adorner, then click and drag the tangent adorner.
The clicked side of the tangent will change in both size and direction independently of the other side.

Adjusting Tangents using the pen tool:

How to adjust adjacent tangents equally in size and direction with the pen tool activated:

Press alt and hover over a point, then click & drag.

How to change a tangent independently of its adjacent tangent using the pen tool:

Press alt and hover over the tangent adorner, then click and drag the tangent adorner.
The clicked side of the tangent will change in both size and direction independently of the other side.

The pen tool cannot be used to click or drag tangents (without modifier keys such as the alt key).

Path Editing: Using the Pen and Sub Select Tools in Microsoft Expression Interactive Designer

jrowe — Fri, 17 Mar 2006 00:20:00 GMT

In Microsoft Expression Interactive Designer, path editing is supported through using the Pen and Sub Select tools located on the Tools Palette.

Below are some cursors that can be invoked when editing paths. The following functional descriptions may be useful:

- Convert Cursor
What it does: Lets user know that pressing alt is tangent editing mode (this
is true in both sub select and pen)
How to get cursor activated: Ensure point adorners in the path are showing
(activating either the pen tool or subselection tool will make the point
adorners visible). Press the alt key while hovering over the scene

- ConvertPointCursor + click
What it does: Makes the point into a sharp corner.(shrinks the tangent down
to zero - no tangent for curve to approach)
How to get cursor activated: Ensure point adorners in the path are showing
(activating either the pen tool or sub selection tool will make the point
adorners visible). Press the alt key while hovering over a point adorner in
the path

- ConvertPointCursor + click & drag
What it does: Makes any sharp corners smooth. If already smooth, it
readjusts the tangent direction and size(Changes the angle of the curve as
it passes through the clicked point)
How to get cursor activated: Ensure point adorners in the path are showing
(activating either the pen tool or sub selection tool will make the point
adorners visible). Press the alt key while hovering over a point adorner in
the path

- ConvertSegmentCursor + click
What it does: Turns a curve (any) segment into a straight line.
How to get cursor activated: Ensure point adorners in the path are showing
(activating either the pen tool or sub selection tool will make the point
adorners visible). Press the alt key while hovering over a segment in the
path

ConvertSegmentCursor + click & drag
What it does: Takes any segment and bends it in a curve to pass through the
mouse position. (as you get closer to the endpoints, it gets less true that
it will follow the mouse)
How to get cursor activated: Ensure point adorners in the path are showing
(activating either the pen tool or sub selection tool will make the point
adorners visible). Press the alt key while hovering over a segment in the
path

- ConvertTangentCursor + click & drag
What it does: adjust the selected tangent independently of the other side
How to get cursor activated: Subselect a point or a segment. Press the alt
key and hover over a tangent adorner in the path.

- PenTool + alt
What it does: Click with pen tool and then press alt (hold down) you will
be adjusting the last tangent without the smooth constraint. It allows you
to make a sharp corner. (click, drag then press alt)

- PenTool + shift + alt
What it does: Aligns the new point, horizontally, vertically, or diagonally
(based on the closest plane of the clicked point)

- PenAdjustCursor + click
What it does: Click the selected endpoint to reduce the last tangent to
zero length.
How to get cursor activated: Ensure pen tool is selected. Hover over a
selected endpoint.

- PenAdjustCursor + click & drag
What it does: Clicking and dragging will modify the tangent.

- PenCloseCursor + click
What it does: Click on this point when this cursor is active to close the
path with a sharp corner
How to get cursor activated: Ensure pen tool is active. Ensure either the
start point or end point of a path is active. Hover over the non active
start point or end point in the path.

- PenCloseCursor + click & drag
What it does: Close the path with a smooth point.

- PenDeleteCursor + click
What it does: Click on this point when this cursor is active to delete the
clicked point.
How to get cursor activated: Ensure pen tool is selected Hover over any
adorner point along the path.

- PenExtendCursor
What it does: Indicates to the user that the mouse is over an endpoint or
start point. Click here to make this path active and start extending it. (
so that user can click to make this point active to edit the tangent or for
future clicks to add a new segment(s)
How to get cursor activated: Ensure pen tool is selected. Hover over a
start point or endpoint.

- PenTangentCursor
What it does: Indicates that a tangent is being dragged.
How to get cursor activated: While the Pen Extender cursor was showing,
User has pressed and is holding the mouse down on an open point.

- PenInsertCursor + click
What it does: Click at this spot on the segment to insert a new point.
How to get cursor activated: Ensure pen tool is selected. Hover over any
segment along the path.

- PenJoinCursor + click
What it does: Click creates a sharp corner when it joins 2 paths or sub paths.
How to get cursor activated: Need 2 open paths or 1 path that has 2 open
subpaths.

1. Ensure both pathA and pathB are selected.

2. Activate the pen tool.

3. Hover over an openpoint of one of the paths (PathA) and notice the PenExtenderCursor appears. Click the point.

4. Hover over an openpoint on the opposite path (PathB) and now the PenJoinCursor appears. Click the point and the 2 paths will join sharply.

- PenJoinCursor + click & drag
What it does: Click & drag makes a smooth corner when it joins 2 paths.
How to get cursor activated: Need 2 open paths or 1 path that has 2 open
subpaths.

1. Ensure both pathA and pathB are selected.

2. Activate the pen tool.

3. Hover over an openpoint of one of the paths (PathA) and notice the PenExtenderCursor appears. Click the point.

4. Hover over an openpoint on the opposite path (PathB) and now the PenJoinCursor appears. Click the point and drag before letting go of the mouse click. The 2 paths will join smoothly.

- PenStartCursor + click
What it does: Click here to start creation of a new path.
How to get cursor activated: Ensure pen tool is selected. Hover over an
area of the scene where a new path start is desired.

- PenStartCursor + click & drag
What it does: Click & drag makes a tangent to start a curve

Expression Products – Use Microsoft Expression Graphic Designer -- you can be an artist even if you're not!

jrowe — Sat, 11 Mar 2006 04:12:00 GMT

Choose a favorite digital photograph. In this example, I have a picture of a little boy as shown below:

--------------->

Open this picture in Use Microsoft Expression Graphic Designer

Simple steps to turn it into a “sketch”:

Using the menu bar at the top, select Edit->select All
Now select ImageFilters->Sketch->Charcoal. A dialog appears that allows you to turn your photo into a charcoaled looking sketch. You can adjust the settings to change a few things such as charcoal thickness, charcoal color and others. In this example I played with the RGB values and chose an orange-ish color. You can play with the settings until you get it how you want.

3. Then just click OK to accept the previewed image.

4. Now all you have to do is save your image.

Later, I will post how you can convert this image into vector data such that you can use path geometry to store it. Then you can open it in Microsoft Expression Interactive Designer for a host of other scenarios.