in Silverlight

Silverlight 2.0 – How to design the blog theme with Silverlight

This article describes the way to create the XAML (Not so)Freshy theme (blog theme) by using Microsoft Blend and Visual Studi0 2008.

Download ~ demo application for Visual Studio 2008

Contents

  • Introduction
  • Background
  • Credits
  • Prerequisites
  • Getting started with Visual Studio 2008
  • Polishing the Header
  • Using the Rectangle wtih gradient color
  • Filling the gradient color in Canvas and Using Brush Transform
  • Using pan or XAML path to draw the Curve
  • Using the third-party controls in Silverlight project
  • Freshy Toolbar for Silverlight
  • Sidebar
  • Footer
  • What we have learnt
  • Some Limitiations of Silverlight
  • Conclusion

Silverlight Theme

Introduction

In this post, I’m gonna show you how to design the blog theme with Silverlight. As this article is focusing on the power and usefulness of Silverlight, XAML and Microsoft Expression Blend, I’m not going to spend a lot of times for inspiring my own blog design. Instead, I will pick-up my favorite theme called “(Not so)Freshy theme” and will show the way to design the XAML theme that looks like “(Not so)Freshy theme” for Silverlight-enabled website.I used two images (icon_rss.png and bg.gif ) from (Not so)Freshy theme. The rest are the power of XAML that you gonna love. There are a lit bit differences between the original theme and the one that I created with Silverlight. (All design credits go to the original author of (Not so)Freshy theme. )

Background

The time when Microsoft released Silverlight 1.0, I was not very interested in this technologies because ASP.NET Ajax (that I’m not so familiar with) is the big part of Silverlight. but things have been changed a lot in Silverlight 1.1. We don’t need to know ASP.NET Ajax to learn about Silverlight. There will be a lot of Silverlight controls in the next release of Silverlight 2.0. (a.k.a 1.1). Then, I bought the Silverlight book “Introducing Silverlight 1.1” (this is the only book that published for Silverlight 1.1 so far.) and started learning about it since last week. While I’m playing with small examples, I got the idea to create the blog theme for Silverlight-enabled website. I chose the (Not so) Freshy Theme for this article because it is very stylish theme and is also one of my favorite themes for WordPress blog. I have been using it for long time and I’m really like this theme.

Credits

Prerequisites

If you want to develop the Silverlight website, you will need the following softwares. Note that it would be the best if you try to install those softwares on Virtual Machine. If you don’t have the Virtual PC then you should read about things that you need to uninstall before installing and you should search the documentation in forum or Google.

  • Visual Studio 2008 ( download )
    Microsoft Visual Studio 2008 provides an industry-leading developer experience for Windows Vista, the 2007 Microsoft Office system, and the Web. In addition, it continues in the Microsoft tradition of development language innovation
  • Silverlight 1.1 Alpha September Refresh (download)
    Silverlight 1.1 Alpha is intended for developers and designers interested in learning more about how to build experiences with Silverlight using both managed code and Microsoft JScript.
  • Microsoft® Silverlight™ 1.1 Alpha Software Development Kit (SDK) (download)
    The Microsoft® Silverlight™ 1.1 Alpha Software Development Kit contains documentation, samples and tools for developing Silverlight applications.
  • Microsoft Silverlight 1.1 Tools Alpha for Visual Studio 2008 (download)
    Add-on for Visual Studio 2008 for developing applications for Silverlight 1.1 Alpha
  • Microsoft Expression Blend 2 December (download)
    The Expression Blend 2 December Preview lets you create Windows Presentation Foundation (WPF) applications as well as Microsoft Silverlight™-based applications. Additionally, you can export content from Microsoft Expression® Design in a format that you can use in Silverlight-based applications created in the Expression Blend 2 December Preview.

Getting started with Visual Studio 2008

In order to create a blog theme, we normally use the DIV instead of table-layout design and CSS (especially float) for positioning those DIVs. In Silverlight, we can use the silverlight user control that already included XAML Canvas.

Let’s open the Visual Studio 2008 and go to File>New>Project. And Select the Silverlight project under Silverlight project type.

newproject.jpg

Then, Righ-click on the project node in Solution Explorer. Select Add->New Item>Silverlight user control as picture below.

adding-user-control.jpg

Add four user controls and named them as “Header.xaml, Content.xaml, Sidebar.xaml and Footer.xaml”.

theme-project-explorer.jpg

Double-click on XAML file and edit the width, height and Color according the table below. (I’m gonna use the fixed-width for this article. Another thing is that the relative positioning is not available in Silverlight at the time of writing. )

XAML File Name Width Height Color Canvas.Top Canvas.Left
Header 855 150 Blue Not necessary Not necessary
Content 640 400 Green 150 Not necessary
Sidebar 215 400 Yellow 150 640
Footer 855 130 Red 530 Not necessary
Page 855 800 Black Not necessary Not necessary

After editing those things in user controls, you need to write this code below to call those user controls that you created in Page.xaml.cs.

Header header = new Header ();
Content content = new Content ();
Sidebar sidebar = new Sidebar ();
Footer footer = new Footer ();

this.Children.Add (header);
this.Children.Add (content);
this.Children.Add (sidebar);
this.Children.Add (footer);

Run the application. You will see the Silverlight object as below in browser.

Silverlight Theme - Base Layout

Yeah. This is the base step of designing the blog theme with Silverlight. But not look good, hum? Let’s polish our theme.

Polishing the Header

As Visual Studio XAML editor doesn’t support the preview feature, we will use Microsoft Expression Blend for polishing our header.

Open the Microsoft Expression Blend and Select the “Silverlight 1.0 website”. (You may ask why there is no “Silverlight 2.0 website”. Yes. Expression Blend 2 currently doesn’t have the “Silverlight 2.0 website”. But we are using it as a XAML editor so we won’t have any problem with this thing. )

New Project in Microsoft Expression Blend

If we take a look at the header part of Freshy theme, there are three parts such as yellow line at the top, the header text at the middle and toolbar at the bottom. So, we will start with creating the yellow line at the top.

Using the Rectangle

Click on the Rectangle icon (as picture below) and draw the rectangle on Canvas.

Rectangle in Expression Blend

Click on “Direct Selection (A)” on Toolbar at the right. And draw the rectangle on the Canvas.

Filling the gradient color

Select the rectangle object on the Canvas. Go the “Properties” at the right side of ExpressionBlend.

Default Brush Properties

Click on the small checked box (beside) in Stoke line. The small window will be opened and uncheck the checkedbox to reset. (then, “No brush” will be shown in Stoke.)

Click on the “Fill” at the top line of “Brush” properties window. Select the “Gradient Brush” (the rectangle box under “Opacity Mask”). Select the color as you like. As this is the Gradient Bruse, you can specify two colors by choosing the arrow at the bottom. Set the color “#FFEED532″ to the left-side arrow and “#FFF49712″ to the right-side arrow. then, the final view of Brush properties will be looked like this screenshot below.

Brush Properties after editing

then, move the rectangle to the top of Canvas and set the height to 20. tIf you are confusing about those steps, you can just copy the code below and paste it in the Canvas. then, You can copy those XAML code from ExpressionBlend and paste them in Header Control.

<Rectangle Width="855" Height="20" Canvas.Left="0" Canvas.Top="0" Stretch="Fill" StrokeThickness="0">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEED532" Offset="0"/>
<GradientStop Color="#FFF49712" Offset="0.942"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>

I suggest you to explore more about Brush properties. As it’s so easy, I believe that you can explore more about this by yourself. (Of course, you can also contact me if you have any question. )

Filling the gradient color in Canvas and Using Brush Transform

Okay. Let’s move on to creating the header text and background. For this one, I will use the Canvas only instead of Rectangle. Set the “#FF313131″ to the left-side arrow of Gradient bar and set the “#FF848080″ to the right-side arrow. And move the left-side arrow a lit bit to the right so that the offset value will be changed to “0.366”. (The final “Brush” properties window will be like the screenshot below.)

brush-properties-afterjpg.jpg

Then, we want to move the lighting a lit bit. So, Click the “Brush Transform” on the toolbox (at the left.) and click on the Canvas.

Brush Transform

One arrow will be shown as the picture below on your Canvas. If not, click on “Design” of XAML editor.

trasform-arrow.jpg

Adjust the arrow the way you like. In my example, I move the head of arrow a lit bit down to the left-side so that I got the code below.

<Canvas.Background>
<LinearGradientBrush EndPoint="0.489,-0.06" StartPoint="0.491,0.62">
<GradientStop Color="#FF313131" Offset="0.366"/>
<GradientStop Color="#FF848080" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>

Now, our header looks like this one. (Of course, the size of Canvas is much bigger than the picture below. )

Freshy Theme Header Image

then, we need to add the light curve at the left-side of header text.

Using pan or XAML path to draw the Curve

So, we will use the pan to draw the curve on the Canvas. Select the pen (as the picture below) from the toolbox.

Pen - Expression Blend

(To get the right position, I suggest you to zoom the Canvas by pressing Ctrl+”+” key.) Click the six points as the picture below on the Canvas.

Draw the curve with Pen

Move the mouse on the line at the right-side of White Polygon. Press “Alt” + “Click” and move it inside the Polygon.

Making the Curve

Then, fill the gradient color and change the lighting by using “Brush Transform”. (I’m not gonna tell you the steps by steps for this since those steps are the same as the steps that I mentioned above. You can do some experiments for that. )

<Path Width="131.219" Height="100" Stretch="Fill" Stroke="#FF000000" Data="M-1.500357,-0.83333336 L-1.1604391,97.835406 11.657615,97.259216 C33.92501,41.72687 94.865604,7.4207356 132.31078,-1.5717303" StrokeThickness="0" Opacity="0.5" Canvas.Top="-0.743">
<Path.Fill>
<LinearGradientBrush EndPoint="0.506,0" StartPoint="0.494,1">
<GradientStop Color="#FF000000" Offset="0"/>
<GradientStop Color="#FFF0E5E5" Offset="1"/>
</LinearGradientBrush>
</Path.Fill>
</Path>

If you look closely to the header, you will notice that there is one line between yellow line (maybe orange line) and black header. It can be done by using two rectangles. Copy the XAML code below and paste it between the yellow rectangle and black canvas.

<Rectangle Width="855" Height="2" Canvas.Left="0" Canvas.Top="18" Fill="#FF353333"/>
<Rectangle Width="855" Height="2" Canvas.Left="0" Canvas.Top="19" Fill="#FFA59C9C">

Copy all XAML codes and paste them in Header.xaml file. And run the application. You will get the header as below.

Header Step 2

Using the third-party controls in Silverlight project

We need to add the title (hyperlink) in the header. As there is no control in Silverlight 1.1, we will use the Hyperlink third-party control in our example.

I added the control project (SilverlightUIControls, namespace “Silverlight.Samples.Controls”) from Silverlight 1.1 SDK in my sample because I’m thinking to use those controls from SDK in future. If you don’t want to use the SDK controls then you can simply add the blank user control project to the silverlight project.

In order to use the custom control in Silverlight project, you need to follow three steps as below.

  1. Add the control project as a reference in Silverlight project
  2. Add this line in base Canvas of Page.xaml
    x:Class="SilverlightProject1.Page;assembly=ClientBin/SilverlightProject1.dll"
    
  3. Add the line in Canvas of the Silverlight control ( header.xaml in our case )
    xmlns:controls="clr-namespace:Silverlight.Samples.Controls;assembly=ClientBin/Silverlight.Samples.Controls.dll"
    

After that, you can use the third-party control in your XAML file.

<controls:Hyperlink
NavigateUri="http://michaelsync.net"
Canvas.Top="31"
Foreground="#FFECE8E8"
FontSize="26"
Canvas.Left="34"
Width = "600"
Height ="48"
Text="Silverlight Test" />

Note: The intelliSense won’t be available for this third-party control in XAML editor. It will be added in the final release of Silverlight 2.0.

Freshy Toolbar for Silverlight

I created my own custom toolbar based on this toolbar sample and added it in the demo project. You can take a loot at FreshyToolbar.xaml and FreshyToolbarButton.xaml in my demo project. I want to use this control in our header so that I added the code below in header.xaml file.

<controls:FreshyToolbar x:Name="toolbar"
Width="855" Height="31"  Canvas.Left="0" Canvas.Top="120"
/>

The following code is for adding toolbarbuttons to Toolbar and it is written in the constructor of header.xaml.cs file.

System.IO.Stream s = this.GetType ().Assembly.GetManifestResourceStream ("SilverlightProject1.Header.xaml");
Canvas headerCanvas = (Canvas)this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());

try
{
FreshyToolbar toolbar = (FreshyToolbar)headerCanvas.FindName ("toolbar");
if ( toolbar != null )
{
toolbar.ToolBarCollection.Add (new FreshyToolbarButton ("Home", new Uri("http://michaelsync.net")));
toolbar.ToolBarCollection.Add (new FreshyToolbarButton ("About", new Uri("http://michaelsync.net/about-2")));
toolbar.ToolBarCollection.Add (new FreshyToolbarButton ("Guest Book", new Uri("http://michaelsync.net/guest-book")));
}
}
catch ( Exception ex )
{
Console.WriteLine (ex.Message);
}

Now, we have completely polished the header. then, run the application and you will see the result as the picture below.

Header Completed

look cool, isn’t it? :) Creating the header is the most of complicated things for this sample. If you understand how to do this header then the rest part of this article will be tooo easy for you.

Sidebar

Let’s take the sidebar. You don’t even need to use Expression Blend for that. You can just write the XAML in Visual Studio. First, we will create one textblock with font size “20” and text “Available Feeds”. Second, we will add three images and hyperlink controls under textblock. then, we create another textblock with the text “Categories”. The yellow rectangle that we create for header can be used here too. After that, we will add four hyperlink controls. That’s all for creating the sidebar. (In future, we will create the widget dynamically from code-behind.)

Freshy Theme - Sidebar

Footer

Creating the footer is also simple. I set the black color to the base Canvas. Add the yellow rectangle that we created for Header. Add the two textblocks and two hyperlinks controls. That’s all.

Freshy Theme - Footer

This is all about designing the blog theme with Silverlight.

What we have learnt

  • Using Textblock, Rectangle, Pat, Image tags
  • Filling the gradient color and Brush Transformation
  • Using the third-party controls in Silverlight project

Some Limitiations of Silverlight

  • The relative positing is not currently supported in Silverlight (That is why we need to specify the Canvas.Top for each and every controls. )
  • Debugging with Firefox browser is not so good. Visual Studio 2008 can’t attach the firefox automatically when we run the application. so, we have to manually attach the firefox browser from Visual Studio. I suggest you to set the Internet Explorer as the default browser if you want to debug the Silverlight application.
  • Exception handling is not very good so far.. What happened is that if you got the exception in XAML file, those exception doesn’t show on the browsers and it will just show the emply canvas which is not good.
  • No build-in silverlight controls available in Silverlight Alpha. (We need to wait until the Silverlight 2.0 final release.)
  • The support of WPF is currently very limited. I hope it will get better in next release of Silverlight.

Conclusion

This article is very basic sample of designing the blog theme with Silverlight. I will write about how to create the dynamic theme with silverlight soon. I hope you all enjoy reading this article. Don’t hesitate to contact if you have any suggestion or comments. Thanks.

Leave a Reply

14 Comments

  1. Hi Scott,

    I love it!!!
    This quite a fresh approach outside the box in terms of thinking

    Thanks a lot. :)
    I like Silverlight… I’m very new to this things.. I will keep on learning whenever I have free time.. It’s so sad that there is no silverlight project in my company.. (I’m currently working on SCSF..)

    Complete guide!

    thanks.. I have some problems with my digg account. it keep on telling me that my user name or pwd is wrong even I’m sure that it’s correct.. :(

  2. Good work. Mike..
    looking forward the sample that can be used like wordpress theme… :)

  3. Excellent introduction to Silverlight.
    I am waiting for the next releases to see what’s coming then. I hope you’ll continue providing such valuable information on this subject.

  4. Yeah. I’m also waiting for the next releases… I think we will get a lot of cool features in next releases.. For the time being, we have to do everything manually..

    I hope you’ll continue providing such valuable information on this subject.

    Sure. I will write more about that. Thanks for visiting my blog, Zorro .

  5. I downloaded the project code, but it never imported because porject path is invaild. Please help me fixing it, I have billions of problems.

    I’m beginner with everything but I have a rich background, can you suggest me a plan to master Silverlight?
    I’m thinking to start the following:
    .NET 3.5 (Basics + WPF) + SQL Server + XAML
    Then: C# + ADO.NET + Blend
    Then: ASP.NET + Silverlight

    Does this plan work? Or shaill I re arrange it or do you suggest another plan for fastest progress?

  6. Hi Ahmed,

    This sample is for Silverlight 2 Alpha (not beta1). You need to have SL 1.1 Alpha installed to run that sample. but MS released SL 2 beta1 recently so you have to change the code to make compatible with Silverlight 2 beta1.

    >>can you suggest me a plan to master Silverlight?

    You should have good background with web development. (not just ASP.NET since SL is able to work with other languages). but
    if you want to be a .NET developer ~

    1. you should start with basic things (e.g. HTML/XHTML, Javascript and CSS)

    2. then, you can start learning ASP.NET with C# or VB.NET. (including Web Service and XML)

    3. after that, you should learn Silverlight (including XAML, Blend, ADO.NET Data service(Astoria))

    that would be good enough…

  7. hi i want to build a website but there is a problem that when i build my website my browser would not show the full view of my site .

  8. I don’t know If I said it already but …I’m so glad I found this site…Keep up the good work I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say GREAT blog. Thanks, :)

    A definite great read….