Professional Feel

Business applications need to have a professional, but how many of us have a full time designer on our staff? I’d guess very few. That is why we invested in a great out of box experience. The Silverlight Navigation Application and Silverlight Business Application (which adds login\logout support) project starts with a clean, prescriptive application structure, a nice look and feel, and is very easy to customize, even for a developer.

File\New Project – Silverlight Business Applications

Hit F5

Change from Mix: Notice the cool new, clean, light default template.

This is a full frame Silverlight Application. Notice the navigation links (home and about).

Notice the forward and back in the browser works…

And there is a deep link, that navigates you back to exactly this point in the application. You can cut and paste it into a blog entry, an email or an IM to your co-works and they will be taken to exactly the same point in the app.

… no mater what browser they are using.

Now, even the best developers sometimes make errors in applications. Links that are invalid or exceptions that get thrown. The Navigation Application Template makes it super easy to deal with those. Type in a bad URL and look at the experience (be sure to run in retail).

Now, let’s go in and look a bit of customization.

First, let’s add a new page.

Right click on Views in the client project and Add New Item, Select Silverlight Page.

When the page opens, add some simple text..

<TextBlockText="Hello World!"></TextBlock>

Now, let’s wire up the this page to the main navigation menu. In MainPage.xaml, add a new button following the same format as the ones that are there.

<RectangleStyle="{StaticResource DividerStyle}"/>

<HyperlinkButtonStyle="{StaticResource LinkStyle}"

NavigateUri="/MyFirstPage"

TargetName="ContentFrame"

Content="my page"/>

Now, while we are in there, let’s customize the error window template… Open Views\ErrorWindow.xaml. You can change the format, log the error back to the server or customize the text on the error message the end user sees.

Finally, let’s go in and change the colors to match your companies branding. Open up the Styles.xaml file in Assets folder. While all the styling is there for you to customize, we made a few of the common properties easy to find and change even for a developer.

Fit F5 and see what we have….

As you can see, my color choices aren’t great, so it is good that we are shipping a whole library of app.xaml files for you to choice from. If you just drag one of the light, clean ones.. hit F5..

You can get all the latest themes from here.. they work just great from VS as well as expression!