How to create Text Style in Expression Blend 3

2009-10-24T10:17:00.000-07:00

Those of you who have a background in Web Design must be familiar with the use of CSS for defining using/ reusing styles. A very efficient way to separate create and modify styling from the content. This is pretty much the same in Expression Blend. Using styles you can rapidly and efficiently modify styles on various areas of text such as headings, sub headings and body text. Styling can also be used for creating styled buttons etc. Another benefit of using styles is that they separate the behavior from the presentation (overall look and feel).

In Expression Blend styling is different from templates. We can use both styles and templates together but they are add different capabilities to the project. A template is used to modify the entire look and feel of a control for example a check box. If we need to make a check box with rounded edges or a custom shape we would have to make changes in the template of the control. But if we only need to change the color of the standard template that can be achieved through the style functions.

Now lets quickly go through the steps for creating simple style in Expression Blend. I’m currently using Expression Blend 3

Open Expression Blend and from the file menu select ‘New Project’. For this example we’d be using Silverlight 3 Application + website. Save the project at any convenient location.

For this article I’m using a few block of the world famous ‘Lorem Ipsum’ text that are placed on the layout root.

For a start we’d create a style for heading and body text. Go to Object > Edit Style > Create Empty.

Like I mentioned before we’re going to make style for heading first so I’m going to name this style ‘headingText’ and from the ‘define in’ section I’d choose ‘Application’ so that I can use this same style on other pages of the application as well.

One the naming and scope definition is done click ok and you’d be taken to the App.xaml in which you can edit the style UI

Play around an experiment to make the right style. For this example I’ve changed the font color , font size font weight and margins. Now if you observe the Properties Panel you’d see that all the properties I’ve edited have a small white box next to them.

The XAML of the style would look like this:

<Application.Resources>



<Style x:Key="headingText" TargetType="TextBlock">

<Setter Property="FontWeight" Value="Bold"/>

<Setter Property="FontSize" Value="16"/>

<Setter Property="Foreground" Value="#FFFF6600"/>

<Setter Property="Margin" Value="2"/>

</Style>

</Application.Resources>

If you go back the MainPage.xaml and check the XAML the defined style would be applied as:

Style="{StaticResource headingText}"

Now lets just repeat the above steps to create a style for the body text and the final output would be:

Rocking Prototypes With Microsoft Sketch Flow

2009-07-19T22:32:00.000-07:00

Microsoft Sketch Flow is a brand new product that takes the prototyping to an all new level rightly being called by them as “Prototyping that works”. It is planned to be shipped along with Expression Blend 3.
The release candidate version can be downloaded from the following link:

Dwonload Microsoft Expression Blend 3 + SketchFlow RC

Sketch Flow helps the designers, account managers and information architects by bringing prototypes drawn on papers to life.

Sketch flow accomplishes this by adding flow transitions and animation to the sketches (That are imported in as scanned images) or to the product screens made inside of Blend using a wide range of hand drawn like components that can be dragged and dropped from the assets panel.

These working prototypes work like a charm to explain the entire high level flow of application to the client BEFORE the start of actual design phase.

The published project of this prototype can be sent to the client for review and feedback. The client doesn’t need to have Expression Blend Installed on their machines, the Sketch Flow projects only requires Silverlight browser plugin to work.

The client can review the prototype in web browser by navigating through very simple options. There is also a flow map available that gives the review of overall flow of the application.

The client can add the feedback in various forms on this running prototype using the text or highlight options available in the feedback panel of the Sketch Flow Player. This feed can then be saved in the form of a feedback file and sent back to the design team.

The design team can import this feedback file into their Sketch Flow project and all the client feedback is visible in the Sketch Flow Project inside of Expression Blend.

This is merely a surface scratch of the awesome features that Sketch Flow brings to the prototyping. I found a very interesting video in which you can see exactly how Sketch Flow adds value to your project.

Microsoft Visual Kitechen

Expression Blend Essentials

How to create Text Style in Expression Blend 3

Rocking Prototypes With Microsoft Sketch Flow