Creating and applying Styles & Templates in Silverlight 2.0 using Microsoft Expression Blend 2.0.

 

In this lab we will have a closer look on designing Styles and Templates by using Microsoft Expression Blend 2.0. So, lets see how to Create, Apply, and Manage the Styles First-

1) Create a new Silverlight 2.0 project by using Expression Blend 2.0 as shown in previous Blog.

2) Once you are done with creating a project, let’s take few controls on the design surface of Page.xaml as shown bellow-

3) Once you finished with the design, start styling the TextBlock control. Make a choice of first TextBlock titled “First Name”. Then go to Object Menu –> Edit Style –> Create Empty Click as shown bellow-

4) You will get a dialog box for Create Style Resource. Style resources you can keep or manage at different levels. This dialog shows you to manage the styles at a Document level or Application level.

Styles can be managed at various levels, Like-

1) Styles can be managed at Panel level.

2) Document Level – The style which is created at Document level can be accessed through out the document and can be applied to any control which is targeted.

3) Application Level – The style which is created at Application level can be accessed through out all the documents which are there under Silverlight Project  and can be applied to any control which is targeted.

So, Let’s create a style at document level by giving the style name as “TextBlockStyle”.

FontSize = 12,

FontWeight = Bold,

Foreground colour = #FFF3B2B2

Save the style which you have created and then return back to User Control.

4) Now as you are ready with the style, lets apply the same style to other TextBlock Controls. There are different ways of doing the same. For example you can Drag & drop the style from Resources Window on to the different TextBlock controls as shown bellow

Or you can go back to Object Menu –> Edit Style –> Apply Resource –> Style Name.

 

Now as you have seen how to Create and Apply Style for TextBlock, try similar thing with TextBox or some other controls.

Imp. Note: I will be creating No. of styles and templates during this Lab sessions. You can even try the same when you will be following these demos.

Now, let’s move towards creating templates. Follow the steps as bellow-

1) Make a choice of Button and create a empty data Template for Button as shown bellow-

2) Name the Template as Button Template -

3) Once you have created the Style Resource with the name ButtonTemplate, delete the following items from Object and TimeLine window-

i) Background.

ii) DisabledVisualItem.

iii) FocusVisualItem.

4) Draw the Border with Border Thickness of 2,Corner Radius with 10, Border colour White, Background colour LinearGradientBrush with Two colour combination as you like as shown bellow-

5) Make Border Opacity 60. That’s it you got a nice shape Button. Additionally you can add few Visual States which will show you how to give different effects to the Button Templates as you like- For Example -

<vsm:VisualStateManager.VisualStateGroups>
                                <vsm:VisualStateGroup x:Name="CommonStates">
                                    <vsm:VisualState x:Name="Normal"/>
                                    <vsm:VisualState x:Name="MouseOver">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Pressed">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Disabled">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                </vsm:VisualStateGroup>
                                <vsm:VisualStateGroup x:Name="FocusStates">
                                    <vsm:VisualState x:Name="Focused">
                                        <Storyboard/>
                                    </vsm:VisualState>
                                    <vsm:VisualState x:Name="Unfocused"/>
                                </vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>

6) You can do lot many things when you talk about Styles and Templates- We will look at few more examples in future.

Now as you have completed writing the forth Silverlight Lab, let’s have a closer look on Fifth lab – “Encoding Media using Expression Encoder and testing with ASP.NET MediaPlayer control.”