Page view counter

Toolkit release & Themes

 

Today at Microsoft PDC, Scott Guthrie demonstrated some of the new controls that have been provided as a part of the Silverlight Toolkit. 

The Silverlight Toolkit was previously named the Silverlight Control Pack

This toolkit provides a set of controls and themes for Silverlight 2. 

  • AutoCompleteBox
  • Chart
  • DockPanel
  • Label
  • Expander
  • TreeView
  • UpDown
  • ViewBox
  • WrapPanel
  • ImplicitStyleManager

These controls and their source code are available with Ms-Pl licensing on Codeplex. 

Historically, charting has been an extra-cost item, provided by third party vendors, but the Silverlight team is providing an extensive and extensible set of chart controls, with source code for free. We will be creating numerous HDI videos and tutorials to assist with getting the most from these controls and Tim has already posted a mini-tutorial to get you started.

I’ll kick of an examination of themes with a very simple application. To get started add the theme dll references to your application

ThemesDLLs

Note that for convenience, I’ve chosen to put my Controls dlls into a subdirectory of C:\Program Files (x86)\Microsoft SDKs\Silverlight\v2.0 though this is not required.

You can now add a theme either in Blend or in Visual Studio. Let’s start in Blend, but also look in Visual Studio to see how the Xaml is placed and, at least at the most superficial level, what the Theme does for you.

Themes in Blend

Once the themes are in your references, you can treat them as controls by extending the chevron, clicking on “show all” and choosing “custom controls” (remember, these controls are not in the core).

AssetLibraryThemes

You can add a theme to your page just as you add any control. typically, you will want to add a theme to a high level FrameworkElement, as all of the children (contained controls) will be themed.

Once you add the theme, you’ll want to double click on it, making it the container, so that additional controls will be “within” the theme, and thus the theme will be applied to those controls.

Within that theme can be one control, but of course that control can be (and should typically be) a container control, and so we end up with something like this,

   1: <UserControl
   2:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:     x:Class="ThemesTest.Page"
   5:     Width="800" Height="600" 
   6:     xmlns:shinyRed="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.ShinyRed" 
   7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
   8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
   9:     mc:Ignorable="d">
  10:  
  11:     <Grid x:Name="LayoutRoot" Background="White">
  12:         <shinyRed:ShinyRedTheme HorizontalAlignment="Stretch" Margin="0" Width="Auto" 
  13:          FontFamily="Verdana" FontSize="24" FontWeight="Bold">
  14:             <Grid Height="Auto" x:Name="InnerGrid" Width="Auto">
  15:               <Grid.ColumnDefinitions>
  16:                     <ColumnDefinition Width="0.1*"/>
  17:                     <ColumnDefinition Width="0.1*"/>
  18:                 </Grid.ColumnDefinitions>
  19:  
  20:                 <Button x:Name="btn"
  21:                     Height="72" 
  22:                     HorizontalAlignment="Left" 
  23:                     VerticalAlignment="Bottom" 
  24:                     Width="244" Margin="0" 
  25:                     Content="This button is themed" 
  26:                     FontSize="18"  FontFamily="Verdana"/>
  27:                 <CheckBox 
  28:                     HorizontalAlignment="Left" 
  29:                     VerticalAlignment="Bottom" 
  30:                     Margin="10,0,0,0" 
  31:                     Width="150" Height="50"
  32:                     Content="CheckBox"
  33:                     Grid.Column="1" />
  34:             </Grid>
  35:         </shinyRed:ShinyRedTheme>
  36:     </Grid>    
  37: </UserControl>

Notice that we start with on outer grid, within that grid is a theme and inside that theme is another grid. We’re now back to programming exactly the way we always have; doing nothing special to the controls; but they are created within a theme, and thus the the theme is applied to the button and checkbox,

TwoThemedControls

To get a sense of how this affects a variety of controls, I created a slightly larger application that has two grids, one with a number of controls that are themed, the second with the same controls unthemed.

Here’s the page.xaml,

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="themes1.Page"
Width="700" Height="650" 
xmlns:rainerPurple="clr-namespace:Microsoft.Windows.Controls.Theming;assembly=Microsoft.Windows.Controls.Theming.RainierPurple" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="outer">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="1*" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <rainerPurple:RainierPurpleTheme Margin="0,0,0,0"     >
        <Grid x:Name="LayoutRoot" Background="White" Height="600" Width="320" Grid.Column="0" Grid.Row="0">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.1*"/>
                <ColumnDefinition Width="0.1*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.1*"/>
                <RowDefinition Height="0.8*"/>
            </Grid.RowDefinitions>
            <Button Width="100" Content="Click Me" x:Name="myButton" HorizontalAlignment="Left" FontFamily="Verdana" FontSize="14"  Margin="5,0,0,0" VerticalAlignment="Bottom"/>
            <CheckBox Grid.Column="1" Content="Theme engaged" HorizontalAlignment="Left" IsChecked="True" FontSize="14" FontFamily="Verdana" Margin="5,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Bottom"/>
            <basics:Calendar DisplayMode="Month" IsTodayHighlighted="True" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Margin="5,0,0,0" Width="150" VerticalAlignment="Top" />
            <PasswordBox Width="111" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="30" Margin="5,0,0,0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" />
            <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0"
            Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
                <RadioButton x:Name="rb1" GroupName="Grp1" Content="yes" IsChecked="true" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
                <RadioButton x:Name="rb2" GroupName="Grp1" Content="no" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
            </StackPanel>
            <Button Height="42" Margin="36,82,46,0" VerticalAlignment="Top" Grid.Column="1" Grid.Row="2" Content="Button"/>
        </Grid>
    </rainerPurple:RainierPurpleTheme>
    <Grid x:Name="LayoutRoot2" Background="White" Height="600" Width="320" Grid.Row="0" Grid.Column="1" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0.1*"/>
            <ColumnDefinition Width="0.1*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.1*"/>
            <RowDefinition Height="0.8*"/>
        </Grid.RowDefinitions>
        <Button Width="100" Content="Click Me" x:Name="myButton2" HorizontalAlignment="Left" FontFamily="Verdana" FontSize="14" Margin="5,0,0,0" VerticalAlignment="Bottom"/>
        <CheckBox Grid.Column="1" Content="Theme engaged" HorizontalAlignment="Left" IsChecked="True" FontSize="14" FontFamily="Verdana" Margin="5,0,0,0" d:LayoutOverrides="Height" VerticalAlignment="Bottom"/>
        <basics:Calendar DisplayMode="Month" IsTodayHighlighted="True" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Left" Margin="5,0,0,0" Width="150" VerticalAlignment="Top" />
        <PasswordBox Width="111" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Height="30" Margin="5,0,0,0" VerticalAlignment="Bottom" RenderTransformOrigin="0.5,0.5" />
        <StackPanel HorizontalAlignment="Stretch" Margin="0,0,0,0"
            Grid.Row="1" Grid.Column="1" Orientation="Horizontal">
            <RadioButton x:Name="rb1a" GroupName="Grp1" Content="yes" IsChecked="true" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
            <RadioButton x:Name="rb2a" GroupName="Grp1" Content="no" Width="50" Height="20" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="5,0,0,0" />
        </StackPanel>
    </Grid>
</Grid>
erControl>

The output looks like this (adjusted to save space)

twoGridsWithThemes

Note that the theme is in the .dll and not in App.xaml; you are certainly free to add styles and templates on top of these themes. 

As noted this micro-tutorial is only intended to get you started, and not to be comprehensive. Hope it helps.

Published Tuesday, October 28, 2008 2:33 PM by jesseliberty
Filed under: ,

Comments

# re: Toolkit release & Themes

Jesse, let's say I want to offer 5 themes to my user to pick from, and at runtime I can show the selected theme. Does this mean in every page I have to have 5 copies of the same controls in 5 theme containers throughout the entire app, in order to support 5 or even more themes?

Thanks!

..Ben

Tuesday, October 28, 2008 3:25 PM by BenHayat

# re: Toolkit release & Themes

Awesome!

Thank you Jesse.

Tuesday, October 28, 2008 3:57 PM by davidjjon77

# re: Toolkit release & Themes

Navigation to the webpage was canceled

When going in the .chm in this Toolkit release.

I'm unable to see any help.  There are all the topic on the left pane but as soon as I click on one I still see the message above.

Tuesday, October 28, 2008 5:24 PM by GearWorld

# Silverlight Toolkit

Pingback from  Silverlight Toolkit

Tuesday, October 28, 2008 6:20 PM by Silverlight Toolkit

# Silverlight Cream for October 28, 2008 - 2 -- # 410

In this issue: Jesse Liberty, Michael Sync, Shawn Burke, David Anson, Andy Beaulieu, Dan Wahlin, Laurent

Tuesday, October 28, 2008 7:31 PM by Community Blogs

# re: Toolkit release & Themes

how to dynamically shift themes with a few easy-to-use lines of code?

it might not be a good idea to fix the theme within every page xaml, right?

Wednesday, October 29, 2008 1:46 AM by unruledboy2

# 2008 October 29 - Links for today &laquo; My (almost) Daily Links

Pingback from  2008 October 29 - Links for today &laquo; My (almost) Daily Links

Wednesday, October 29, 2008 5:44 AM by 2008 October 29 - Links for today « My (almost) Daily Links

# Silverlight Toolkit launched

Pingback from  Silverlight Toolkit launched

Wednesday, October 29, 2008 6:14 AM by Silverlight Toolkit launched

# re: Toolkit release & Themes

This example was one theme, quick and easy without the (preferred?) implicit style manager. I'll post two more - one walking through the sample created by the tools folks, and a stripped down, simplified example I'm creating, both of which allow you to switch from one theme to another.  thanks.

Video to follow

Wednesday, October 29, 2008 12:31 PM by jesseliberty

# re: Toolkit release & Themes

How do you install the new Silverlight Toolkit November 2008 dll's for Visual Studio 2008 and Blend 2.0?

Wednesday, October 29, 2008 5:10 PM by burldo

# re: Toolkit release & Themes

The size of the DLL's containing the styles is quite large.  Fortunately, they compress by 90%, which makes the use of them a lot easier.

Jesse, why do you appear to think that the implicit style manager is preferred?  Could you eloborate on that a bit.

Wednesday, October 29, 2008 7:16 PM by samcov

# re: Toolkit release & Themes

Jess,  I noticed on the Swiss MSDN blog they have a post about Silverlight business framework "Alexandria"

blogs.msdn.com/.../live-from-pdc-day-2.aspx

Can you give us any more info ? please...

Wednesday, October 29, 2008 7:33 PM by sariel

# re: Toolkit release & Themes

@sariel - That sounds VERY HOT!!!

If true, I can't wait to get my hands on that framework!!!

Thursday, October 30, 2008 2:56 AM by samcov

# re: Toolkit release & Themes

I miss a dialog/window control

Thursday, October 30, 2008 6:02 AM by Dastei

# Themes Revisited: The Implicit Style Manager

In a recent post on theming using the new Themes from the Controls Toolkit I showed that you can add

Friday, October 31, 2008 1:15 AM by Jesse Liberty - Silverlight Geek

# re: Toolkit release & Themes

No, I'm not at all sure that the ISM is preferred; I think it is more a matter of my getting a better handle on what the theme designers had in mind -- so that I can convey which approach is most efficient or preferred  in a given situation.  That is high on my list for follow up. :-)

Friday, October 31, 2008 1:18 AM by jesseliberty

# Themes Revisited: The Implicit Style Manager

In a recent post on theming using the new Themes from the Controls Toolkit I showed that you can add

Friday, October 31, 2008 1:58 AM by Microsoft Weblogs

# Silverlight Toolkit Overview, Part 3 - Theming

ThemesQuickReference ExpressionDark ...

Friday, October 31, 2008 5:06 AM by baggiojing

# Silverlight Toolkit Overview, Part 3 - Theming

ThemesQuickReference ExpressionDark ...

Friday, October 31, 2008 5:09 AM by baggiojing

# re: Toolkit release & Themes

This works fine, but if I load usercontrols dynamically and add it to the "InnerGrid" the style is not applied. How to apply the style to the dynamically added content?

Friday, October 31, 2008 8:48 AM by nyhetsgrupper@gmail.com

# re: Toolkit release & Themes

yes, I have the some trouble as "nyhetsgrupper", kind of annoying having to define the style to every single usercontrol :(

Friday, October 31, 2008 9:52 AM by elwis

# Dirty And Kinky Mature Women 58

Pingback from  Dirty And Kinky Mature Women 58

Saturday, November 01, 2008 9:22 PM by Dirty And Kinky Mature Women 58

# Jim Powers&#8217; Fuck Truck

Pingback from  Jim Powers&#8217; Fuck Truck

Tuesday, November 04, 2008 8:32 PM by Jim Powers’ Fuck Truck

# A Ridiculous List of Silverlight Toolkit Resources

The Silverlight Toolkit is off to a great start and lots of people have been spending time writing content

Friday, November 07, 2008 11:36 PM by Shawn Burke's Blog

# Silverlight Tools Released at PDC | Enetlive.net- Rich Internet Applications Blog

Pingback from  Silverlight Tools Released at PDC | Enetlive.net- Rich Internet Applications Blog

Sunday, November 09, 2008 9:00 PM by Silverlight Tools Released at PDC | Enetlive.net- Rich Internet Applications Blog

# re: Toolkit release & Themes

Could I make a request jesse that you start posting dates on your blog posts?  Sometimes when you stumble upon something old (> 3 months in this environment :-)) it would be helpful to know in what context the blog is given.

Wednesday, May 27, 2009 9:29 AM by flashfearless

# re: Toolkit release & Themes

flashfearless,

Hi. I'm not sure if this is adequate, but if you rest your cursor on the title of the posting you'll find the date embedded in the full path in the status bar.  

That said, let me look into having the date automatically added below the title so you don't have to hunt for it.

Thanks!

Wednesday, May 27, 2009 11:26 AM by jesseliberty

# re: Toolkit release & Themes

Ach, if it isn't in the status bar, then it is in the url.

-j

Wednesday, May 27, 2009 11:27 AM by jesseliberty