Last week, we released theme packs for Silverlight Application Templates along with some cool looking themes for the Silverlight Business Application. Download the refreshed Silverlight 4 themes (inlcuding RIA Services templates) here.

Notes: Courtesy of Tim

At the link above you’ll find 3 files to download:

• README_FIRST.txt – please read this :-) but basically I’m writing the same thing here.
• SL4Themes-templates.zip – this includes a folder for Expression Blend and Visual Studio templates.  The VS folder also has a sub-folder for the RIA Services templates.
• SL4Themes-rawassets.zip – this is another (optional) zip that includes the resource dictionaries for each template on their own without any Silverlight project.

The three templates we released are :-

Cosmopolitan:-

See it in action here:- http://www.silverlight.net/content/samples/sl4/themes/cosmopolitan.html#/Home

Windows 7 Theme: 

See it in action here:- http://www.silverlight.net/content/samples/sl4/themes/windows7.html#/Core

Accent Color Theme:

See it in action here:-http://www.silverlight.net/content/samples/sl4/themes/accent.html

These application make the Silverlight Business Application Template just awesome.

Cheers and Enjoy!!

Update: You can download the template from here.

Earlier I had posted about the theme pack for the Silverlight Business Application and amongst them was the Cosmopolitan template. The cosmopolitan theme is inspired by the Metro theme which was first seen in the the Zune Client.

Since then, there have been many variations of the Metro theme, Windows Phone 7, Metrotwit, the Cosmopolitan theme  and many more. They are all inspired by the Metro theme. Recently, Nikola. pointed out one of the key differences between the Zune client and the Cosmopolitan theme. One thing, I would like to call out is that they are just different variations. However, I do understand that there is a demand to create a app that looks and feels like the Zune client and in this post I will show you how that can be done using the Cosmo theme.Thanks Tsitsi for your help. She is also the designer that created these designs. I would definitely recommend subscribing to her blog. First download and install the theme pack, the instructions can be found here.

Making my app look and feel like the Zune client

Let’s start of by creating a Silverlight Business application Cosmopolitan template. Once that is created, follow these steps:-

In Fonts.xaml

1. In the client project, open up Assets\Fonts.xaml
2. Look for following keys and the change their value
   1. ApplicationNameFontSize to 20
   2. NavigationFontSize to 20

   1: <my:Double x:Key="ApplicationNameFontSize">20</my:Double>

   2: <my:Double x:Key="HeaderFontSize">21.333</my:Double>

   3: <my:Double x:Key="NavigationFontSize">20</my:Double>

In Styles.xaml

1. In the client project, open up Assets\Styles.xaml and make the following changes(highlighted in yellow):-

<!-- ApplicationName Style -->

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

        <Setter Property="Foreground" Value="{StaticResource BlackBrush}"/>

        <Setter Property="FontFamily" Value="{StaticResource ContentFontFamily}"/>

        <Setter Property="FontSize" Value="{StaticResource ApplicationNameFontSize}"/>

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

        <Setter Property="TextOptions.TextHintingMode" Value="Animated" />

        <Setter Property="Margin" Value="32,-4,0,-3"/>

        <Setter Property="VerticalAlignment" Value="Center"/>

        <Setter Property="HorizontalAlignment" Value="Left"/>

    </Style>

<!-- Links Border Style -->

<Style x:Key="LinksBorderStyle" TargetType="Border">

        <Setter Property="Height" Value="40"/>

        <Setter Property="Margin" Value="0,32,10,0"/>

        <Setter Property="HorizontalAlignment" Value="Left"/>

        <Setter Property="VerticalAlignment" Value="Top" />

        <Setter Property="BorderBrush" Value="{StaticResource HighlightBrush}"/>

        <Setter Property="BorderThickness" Value="14,0,0,0"/>

    </Style>

<!-- Links StackPanel Style -->

<Style x:Key="LinksStackPanelStyle" TargetType="StackPanel">

        <Setter Property="VerticalAlignment" Value="Bottom"/>

        <Setter Property="HorizontalAlignment" Value="Left"/>

        <Setter Property="Orientation" Value="Horizontal"/>

        <Setter Property="Margin" Value="10,0,0,-7"/>

    </Style>

<!-- Logo Icon Style -->

    <Style x:Key="LogoIcon" TargetType="ContentControl">

        <Setter Property="Height" Value="30"/>

        <Setter Property="Width" Value="35"/>

        <Setter Property="Margin" Value="0,0,53,0"/>

        <Setter Property="VerticalAlignment" Value="Top" />

        <Setter Property="HorizontalAlignment" Value="Right" />

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="ContentControl">

                    <Grid>

                        <Rectangle Fill="{StaticResource HighlightBrush}"/>

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

<!-- Content Frame Style -->

    <Style x:Key="ContentFrameStyle" TargetType="navigation:Frame">

        <Setter Property="Background" Value="Transparent"/>

        <Setter Property="BorderBrush" Value="Transparent"/>

        <Setter Property="Margin" Value="0,75,0,0"/>

        <Setter Property="Padding" Value="30,15,58,15"/>

        <Setter Property="VerticalContentAlignment" Value="Stretch"/>

        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

    </Style>

<!-- Branding Border Style -->

    <Style x:Key="BrandingBorderStyle" TargetType="Border">

        <Setter Property="Height" Value="Auto"/>

        <Setter Property="Margin" Value="0,0,20,10"/>

        <Setter Property="VerticalAlignment" Value="Top"/>

        <Setter Property="HorizontalAlignment" Value="Stretch"/>

    </Style>

In ApplicationStrings.resx

1. Open up Assets\Resources\ApplicationStrings.resx file and make the following changes
   1. AboutPageTitle to “ABOUT”
   2. HomePageTitle to “HOME”
   3. ApplicationName to “application name”

The end result of these changes will be an application that looks like the Zune Client. Here is a screenshot:-

Cheers and enjoy!!

As promised, I am uploading the source code for the demo. Please keep in mind, there are some places where I have not followed best practices, I will follow up with a post after finishing and cleaning up the application. I have had a bunch of folks ask about the source code, so I wanted to get it out there.

You can download the source here:-

http://cid-9d24497f7fef8f33.office.live.com/self.aspx/Demo/TechEd%202010%20-%20Web%20307.zip

Steps:

1. Install RIA Services V1, if you don’t have it. http://www.silverlight.net/getstarted/riaservices/
2. Download the zip
3. Unblock it and then Unzip it
4. Launch the solution and ensure that Web project is set as the startup
5. Run the application
6. Register a new user

Note: If you encounter an error when running the application, just run the application again.

Check out the admin page where, i create one screen that modifies 8 Lookup Tables. You can do as many as you want.

Also, check out the Tips page to recap the Tips we covered in the talk.

I will follow up with a more detailed post with details and steps.

Cheers!!

At Teched 2010, we announced the RTM of Windows Server AppFabric. I am sure most of you are wondering what Windows Server AppFabric is?

So, What is Windows Server AppFabric?

Windows Server AppFabric is a set of integrated technologies that make it easier to build, scale and manage Web and composite applications that run on IIS. You can install and read more about it here. Also, check out the white paper located here. One of the component that Windows Server AppFabric provides is the monitoring AppFabric dashboard in IIS.

The app fabric dashboards lets you monitor any .NET 4 WCF an WF services with monitoring enabled. As you are all aware that a Domain Service is a WCF service and one of the things we enabled in our RTM build was to enable monitoring for the DomainService. However, this will only work when the web application is hosted in full trust.

Check out this episode on EndPoint.tv for more deatils

Endpoint.TV – Windows Server AppFabric in action monitoring and troubleshooting

How do we enable AppFabric monitoring for a DomainService?

Enabling AppFabric monitoring for a domain service is very easy. Here is what you would need to do:-

• Create a new RIA Services project
• Go to the web project and right click to go to properties
• Go to the web node and select Use Local IIS Server.

• Once that is done and your application is configured and running properly, go to the web.config file and add the following entries. One for each DomainService exposed.

   1: <system.serviceModel>

   2:  

   3:    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true">

   4:  

   5:      <serviceActivations>

   6:        <add service="MSTravel.Web.Services.TailSpinTravelService" factory="System.ServiceModel.DomainServices.Hosting.DomainServiceHostFactory, System.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" relativeAddress="~/Services/MSTravel-Web-Services-TailSpinTravelService.svc" />

   7:        <add service="MSTravel.Web.AuthenticationService" factory="System.ServiceModel.DomainServices.Hosting.DomainServiceHostFactory, System.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" relativeAddress="~/Services/MSTravel-Web-AuthenticationService.svc" />

   8:        <add service="MSTravel.Web.UserRegistrationService" factory="System.ServiceModel.DomainServices.Hosting.DomainServiceHostFactory, System.ServiceModel.DomainServices.Hosting, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" relativeAddress="~/Services/MSTravel-Web-UserRegistrationService.svc" />

   9:      </serviceActivations>

  10:  

  11:    </serviceHostingEnvironment>

  12:  

  13:  </system.serviceModel>

• All that we are doing above is to add the activation for SVC less WCF Service.
• Save the web config and compile and run the application
• Now go to the IIS and browse to your Virtual Directory and you will notice the AppFabric DashBoard.

• Double click on the AppFabric Dashboard and you will get all the monitoring information you need.

You can use the AppFabric dashboard to monitor and track the usage of your DomainService. As you can see it gives you all the error and completed tracked events.

Cheers and Enjoy!!

It’s been a great week at TechEd North America 2010 in New Orleans. There is a very good reason why they call it the Big Easy and now I know:)

I was really surprised to see the number of folks that came out there and really glad to see the response RIA Services got . I was at the Silverlight booth most of the time and it was just amazing seeing so many questions from so many different people. Its just great to know that so many folks are using our product.

I had the opportunity to talk at three different occasion during TecheEd, I did a short demo in the JasonZ Developer Foundation Sessions, then i had an interactive session where I talked about accessing web services in Silverlight.

Here are the recordings for those sessions:-

Foundations session by Jason Zander. My demo is around the 43 min mark

Interactive Session ( will update it )

Breakout Session: WEB 307 – Effective RIA: Tips and tricks for building Rich Internet Application

I have not had the chance to clean up the source code for all the demos. I will follow up with the code for most of them soon. Stay Tuned!!

Cheers!!