Deborah's Developer MindScape






         Tips and Techniques for Web and .NET developers.

January 16, 2011

Theming a Silverlight Application using Existing Themes

Filed under: C#,Silverlight,VB.NET @ 12:20 am

There are two ways to apply styles in a Silverlight application: explicit styles and implicit styles. The primary difference between them is that explicit styles have names (x:Key) and are applied to controls by their name. Implicit styles are not named and are applied to controls that don’t have an explicit style.

A theme is basically a set of implicit styles that are used to apply a consistent look and interactivity across controls.

NOTE: This post is part of a series that starts with this prior post.

An example of explicit styles is shown below:

<!– Page ScrollViewer Style –>
<Style x:Key="PageScrollViewerStyle" TargetType="ScrollViewer">
  <Setter Property="BorderBrush" Value="Transparent"/>
  <Setter Property="BorderThickness" Value="0,1,0,1"/>
  <Setter Property="Margin" Value="-58,-15,-58,-15"/>
  <Setter Property="Padding" Value="58,0,58,0"/>
  <Setter Property="VerticalScrollBarVisibility" Value="Auto"/>
  <Setter Property="HorizontalScrollBarVisibility" Value="Auto"/>
</Style>

<!– Content Panel Style –>
<Style x:Key="ContentPanelStyle" TargetType="StackPanel"/>

<!– Header Text Style –>
<Style x:Key="HeaderTextStyle" TargetType="TextBlock">
  <Setter Property="Foreground"
           Value="{StaticResource BodyTextColorBrush}"/>
  <Setter Property="FontSize" Value="15"/>
  <Setter Property="FontWeight" Value="Bold"/>
  <Setter Property="TextWrapping" Value="Wrap"/>
  <Setter Property="Margin" Value="0,15,0,4"/>
  <Setter Property="HorizontalAlignment" Value="Left"/>
</Style>

The above code defines three explicit styles named PageScrollViewerStyle (for a ScrollViewer), ContentPanelStyle (for a StackPanel), and HeaderTextSTyle (for a TextBlock).

These styles are applied to the appropriate controls using the Style property as shown below.

    <Grid x:Name="LayoutRoot">
        <ScrollViewer x:Name="PageScrollViewer"
           Style="{StaticResource PageScrollViewerStyle}">
            <StackPanel x:Name="ContentStackPanel">
                <TextBlock x:Name="HeaderText"
                   Style="{StaticResource HeaderTextStyle}" 
                   Text="Welcome to InStep’s Student Management"/>
                <TextBlock x:Name="ContentText" 
                   Style="{StaticResource ContentTextStyle}" 
                   Text="InStep’s Student Management package keeps you in step with your students and their progress."/>
                <Image Height="150" Margin="10" Name="image1"  
                   Width="200" 
            Source="/InStepSM.SL;component/Assets/Images/Welcome.jpg"/>
            </StackPanel>
        </ScrollViewer>
    </Grid>

If you are building a line of business application, you may want all of the controls in the application styled consistently. One way to accomplish that consistency is to repeat the Style properties on every control. Alternatively, you can apply a theme and the controls will automatically be styled  the same.

This prior post covered an introduction to the Silverlight themes available in the Silverlight Toolkit. You can try out each of these toolkit themes by visiting this link and clicking on Theme Browser in the left menu.

This current post applies one of these themes to the sample application that was started here.

NOTE: Before you try the following code, ensure that you have the Silverlight 4 Toolkit installed. You can find it here.

1) Add a reference to the theme in your project references.

image

[On my system the file was located in: Program Files (x86)\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr 10\Themes]

2) Add the following xmlns statement to the top of a xaml file you wish to theme:

xmlns:bureauBlack="clr-
       namespace:System.Windows.Controls.Theming;assembly=
       System.Windows.Controls.Theming.BureauBlack"

Be sure to change "BureauBlack" to the name of the theme you want to use.

3) Define the theme in the desired location in the xaml. You can theme the entire page, or just a portion of the page. Surround the controls with the following tags:

<bureauBlack:BureauBlackTheme>

</bureauBlack:BureauBlackTheme>

NOTE: If you apply a theme to an application that was started with the Silverlight Navigation Application, like the sample associated with this post, you may not see much difference when you run the application. That is because all of the explicit styles defined within the controls override any implicit styles defined in the themes. So you may need to remove some of the explicit Style properties before you will see the theme.

For the sample application, the theme is applied to the MainPage xaml file and several of the explicit styles are removed. The resulting sample code is shown below:

<UserControl
    x:Class="InStepSM.SL.MainPage"
    xmlns="
http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="
http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:navigation="clr-namespace:System.Windows.Controls;
                  assembly=System.Windows.Controls.Navigation"
    xmlns:uriMapper="clr-namespace:System.Windows.Navigation;
                  assembly=System.Windows.Controls.Navigation"
    xmlns:d="
http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="
http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:bureauBlack=
           "clr-namespace:System.Windows.Controls.Theming;
            assembly=System.Windows.Controls.Theming.BureauBlack"
 
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">

    <bureauBlack:BureauBlackTheme>

        <Grid x:Name="LayoutRoot">
            <Border x:Name="ContentBorder"
                  Style="{StaticResource ContentBorderStyle}">

                <navigation:Frame x:Name="ContentFrame"
                   Style="{StaticResource ContentFrameStyle}" 
                   Source="/Home" Navigated="ContentFrame_Navigated" 
                   NavigationFailed="ContentFrame_NavigationFailed">
                    <navigation:Frame.UriMapper>
                        <uriMapper:UriMapper>
                            <uriMapper:UriMapping Uri=""
                               MappedUri="/Views/Home.xaml"/>
                            <uriMapper:UriMapping Uri="/{pageName}"
                               MappedUri="/Views/{pageName}.xaml"/>
                        </uriMapper:UriMapper>
                    </navigation:Frame.UriMapper>
                </navigation:Frame>
            </Border>

            <Grid x:Name="NavigationGrid"
                Style="{StaticResource NavigationGridStyle}">

                <Border x:Name="BrandingBorder" 
                     Style="{StaticResource BrandingBorderStyle}">
                    <StackPanel x:Name="BrandingStackPanel" 
                     Style="{StaticResource BrandingStackPanelStyle}"> 
                       <ContentControl
                             Style="{StaticResource LogoIcon}"/> 
                       <TextBlock x:Name="ApplicationNameTextBlock"  
                        Style="{StaticResource ApplicationNameStyle}"
                        Text="InStep Student Management"/>
                    </StackPanel>
                </Border>

                <Border x:Name="LinksBorder" 
                   Style="{StaticResource LinksBorderStyle}">
                    <StackPanel x:Name="LinksStackPanel" 
                       Style="{StaticResource LinksStackPanelStyle}">
                        <HyperlinkButton x:Name="Link1"  
                           NavigateUri="/Home"
                           TargetName="ContentFrame" Content="home"/>
                        <Rectangle x:Name="Divider1"
                            Style="{StaticResource DividerStyle}"/>
                        <HyperlinkButton x:Name="Link2"  
                          NavigateUri="/About" 
                          TargetName="ContentFrame" Content="about"/>
                    </StackPanel>
                </Border>
            </Grid>
        </Grid>
    </bureauBlack:BureauBlackTheme>
</UserControl>

When you run the code, the screen now looks like this:

image

The theme makes it very difficult to see the links or the page text. So at this point you need to either override the theme’s implicit styles with explicit styles, or modify the theme. But that is for another post.

Use the techniques described in this post any time you want to theme your application using one of the built-in themes.

Enjoy!

7 Comments

  1.   Joe — February 18, 2011 @ 12:45 am    Reply

    well, this is not good 🙁

    going through the SilverLight samples. On the Theming a SL app…Existing Themes, I add the reference to a Theme.

    Then I get “The tag ‘xxxTheme’ does not exist in XML namespace…” with this underlined:

    I can’t fix it, no matter what I try. And searching the web has not provided a solution either. And it’s only the second lesson.

  2.   DeborahK — February 18, 2011 @ 10:00 am    Reply

    Hi Joe –

    Can you post the xmlns line that you used?

    Be sure that the xmlns lines do not contain carriage returns. My example needed them because this posting tool does not wrap them correctly. But the compiler requires that there be no extra spacing in the quoted strings assigned to the xmlns lines.

    Hope this helps.!

  3.   Joe — February 19, 2011 @ 1:58 am    Reply

    That did it. Thanks 🙂

    I didn’t know the xmlns lines have to be continuous.

    It’s those little tips you don’t see anywhere, and trying to figure it out can drive you crazy when you have no clue why it is generating an error.

    Might be good to mention that (for us SilverLight newbies), since all of the code examples show it continued on the next line – for good reason, as you pointed out.

    I went ahead and continued on without setting the themes. Another excellent blog series, as we’ve come to expect from you.

  4.   DeborahK — February 19, 2011 @ 8:29 pm    Reply

    Hi Joe –

    I added a note to the first post in this series to clarify. Hope this helps others that run into this problem.

    Thanks for the heads up on the issues you ran into. Let me know if you run into any other difficulties with this series.

  5.   Michal K — July 10, 2011 @ 9:12 am    Reply

    “The tag ‘xxxTheme’ does not exist in XML namespace…”

    >> You may add next assembly:

    \Silverlight\v4.0\Toolkit\Apr10\Bin\System.Windows.Controls.Theming.Toolkit.dll

    This will sove your problem

  6.   Julissa — August 13, 2011 @ 1:23 am    Reply

    Ab fab my gdoloy man.

  7.   Essence — August 14, 2011 @ 7:48 am    Reply

    I’m not wrohty to be in the same forum. ROTFL

RSS feed for comments on this post. TrackBack URI

Leave a comment

© 2019 Deborah's Developer MindScape   Provided by WPMU DEV -The WordPress Experts   Hosted by Microsoft MVPs