Silverlight 2 Control Skins

Silverlight 2 Control Skins

Rate This
  • Comments 36

Last week, Silverlight 2 beta one was the hot topic at the Mix 08 conference that took place in Las Vegas, and rightly so, as it now has even more great functionality to offer, and you can find out about specific details on Silverlight.net or on Scott Guthrie's blog. Scott's blog also contains several very informative walkthroughs detailing how to use much of the new functionality, and I highly recommend checking it out.

One of the new aspects of Silverlight 2 that I'm most psyched about right now is the new set of controls that it has to offer; which includes...

  • Button
  • Toggle Button
  • Radio Button
  • Checkbox
  • Texbox
  • Tooltip
  • Hyperlink
  • Slider
  • ScrollViewer
  • Calendar
  • Datepicker
  • DataGrid
  • ListBox
  • etc…

The default controls look great as is, but I need variety, so a designer friend of mine and I decided to put together a few new sets of styles for the controls listed above. We now have three different sets that are ready for you to check out and two more that will be ready for consumption within the next two weeks. Here’s what we have now, and you can view the styled controls in action or download them to add to your project (Page.xaml contains my sample page layout and App.xaml contains the style definitions)….

The download for the Flat set of styles also contains a Page.xaml.cs, and a Page.xaml.vb file. The reason these files are there is because I'm auto generating my columns in my data grid and the only way I can control the styles for the column content is through code (I'm changing fontfamily and fontsize). If I weren't autogenerating the columns I could control the style for the column content in the way I have for every other control (in the case of datagrid, I would use ElementStyle and EditingElementStyle).

 

The following set of steps describe some of the ways that you can apply these styles to your project.

 

Apply Styles Globally

To use the styles globally in your project, open your App.xaml file and replace your <Application.Resources>...</Application.Resources> with my <Application.Resources>...</Application.Resources> for the set of styles that you are interested in using.

Then, you can utilize the styles for controls throughout your project by adding a reference to the style of interest. For example, for button you would add the bold text below to the button tag,

<Button Content="hi" Style="{StaticResource buttonStyle}"/>

 

Apply Styles to a Particular XAML Page

To use the styles in a particular XAML page, open the page and add the following below the opening UserControl tag, <UserControl.Resources></UserControl.Resources>, and then copy and paste my styles from App.xaml into the tag (minus <Application.Resources></Application.Resources>)

Then, you can utilize the styles for controls throughout the XAML page by adding a reference to the style of interest. For example, for button you would do exactly as described in the previous example, and add the bolded text below to the button tag,

<Button Content="hi" Style="{StaticResource buttonStyle}"/>

 

Apply a Style to a Particular Control Inline

To use a style for a particular control inline, place the style directly in the control of interest. For example, for button you would add the following to your button tag (you also need to remove the x:Key attribute from the style tag as shown in the comment below)

<Button Content="hi">

<Button.Style>

<!-- Button -->

<!-- ORIGINAL STYLE TAG NEEDS X:KEY REMOVED AS SHOWN BELOW, HERE'S THE ORIGINAL TAG ----> <Style x:Key="buttonStyle" TargetType="Button">-->

<Style TargetType="Button">

<REST OF STYLE HERE BUT I'M NOT SHOWING IT :)-->

</Style>

</Button.Style>

</Button>

Please ping me with questions if anything is unclear.

Leave a Comment
  • Please add 1 and 6 and type the answer here:
  • Post
  • PingBack from http://msdnrss.thecoderblogs.com/2008/03/10/silverlight-2-control-skins/

  • One of the great things about Silverlight is that the controls are very skinable.. that is you can make

  • One of the great things about Silverlight is that the controls are very skinable.. that is you can make

  • Corrina, I'm curious if you can put up a simple example of how to style a ScrollViewer. Specifically, I would like to get rid of the border, or make it much more subtle, so that the scrollviewer fits into my page less loudly.  Try putting a ScrollViewer on a Grid with a black background:  Even when empty, the scrollviewer displays some obnoxious borders :)

    For example, this snippet below: Do you know how I can make the ScrollViewer display with a dark gray border instead of a white border?  I'm sure it must be easy, but I've looked into the docs for scrollviewer properties and it isn't obvious to me anyway.  

    Thanks for your contributions with the Style downloads - appreciated!

    <Grid x:Name="PageContent" Grid.Row="1" Background="Black">

    <Grid.ColumnDefinitions>

       <ColumnDefinition Width="*"/>

       <ColumnDefinition Width="180.072"/>

    </Grid.ColumnDefinitions>

    <Grid HorizontalAlignment="Stretch" Margin="8,8,8,8" VerticalAlignment="Stretch">

       <Image ... x:Name="image"/>

    </Grid>

    <ScrollViewer

       Grid.Column="1"

       Margin="8,8,8,8"

       HorizontalAlignment="Stretch"

       VerticalAlignment="Stretch"

       VerticalScrollBarVisibility="Auto"

       >

     </ScrollViewer>

    </Grid>

  • Now that I have recovered from the excitement of Las Vegas, I thought I'll sit down and give a run down

  • Now that I have recovered from the excitement of Las Vegas, I thought I&#39;ll sit down and give a run

  • Hi Corrnia;

    This is a great and positive step towards making SL better. But since this is a new product, it would be VERY helpful if you can follow it up with some docs (more of a step-by-step to gets us going) how to create new skins or modify the existing ones. This help/doc will go a long way for new people to get excited and begin to explore.

    Thank you!

    ..Ben

  • Hi Corrina,

    Happy to see you start a new blog. I hope to read more of Silverlight styling in the future :)

    Greetings,

    Laurent

  • Hi Corrina,

    This is awesome! Thanks for sharing with first class stuff with us. This is excellent!

    Just one side comment: Your blog deserves a better "look and feel" than this default MSDN style ;)

    Keep on good work!

    Regards

  • Hi Corrina,

    It's great stuff.  Is it possible to read or display live logs (eg. SMTP Logs) using Silverlight Streaming ???

    Thanks

    B. Mavi

    "If I have seen further it is by standing on the shoulders of giants." - Sir Isaac Newton

  • Hi Soultech,

    It sounds like you would prefer a property to change the border for scrollviewer and this is great feedback. This isn't possible right now though :( What you need to do is re-template (style) the control (add to application.resources, for expample, the following and then make a style reference to svStyle in your scrollviewer XAML instance)...

    <!--You can remove the border all together to make it invisible or play with the borderbrush - I have it as "#00A4A4A4", and the 00 at the beginning makes the color completely transparent, but if you wanted it 50% transparent you could do 7F at the beginning; just to give you an idea of what you can do :) -->

    <!--ScrollViewer-->

          <Style x:Key="svStyle" TargetType="ScrollViewer">

              <Setter Property="IsEnabled" Value="true" />

              <Setter Property="Foreground" Value="#FF000000" />

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

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

              <Setter Property="Cursor" Value="Arrow" />

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

              <Setter Property="TextWrapping" Value="NoWrap" />

              <Setter Property="FontSize" Value="11" />

              <Setter Property="FontFamily" Value="Trebuchet MS"/>

              <Setter Property="VerticalScrollBarVisibility" Value="Visible" />

              <Setter Property="Template">

                  <Setter.Value>

                      <ControlTemplate TargetType="ScrollViewer">

                          <Border CornerRadius="1" BorderBrush="#00A4A4A4" BorderThickness="1">

                              <Grid Background="{TemplateBinding Background}">

                                  <Grid.ColumnDefinitions>

                                      <ColumnDefinition Width="*"/>

                                      <ColumnDefinition Width="Auto"/>

                                  </Grid.ColumnDefinitions>

                                  <Grid.RowDefinitions>

                                      <RowDefinition Height="*"/>

                                      <RowDefinition Height="Auto"/>

                                  </Grid.RowDefinitions>

                                  <Rectangle Grid.Column="1" Grid.Row="1" />

                                  <ScrollContentPresenter

                                    x:Name="ScrollContentPresenterElement"

                                    Grid.Column="0"

                                    Grid.Row="0"

                                    Content="{TemplateBinding Content}"

                                    ContentTemplate="{TemplateBinding ContentTemplate}"

                                    Cursor="{TemplateBinding Cursor}"

                                    Background="{TemplateBinding Background}"

                                    FontFamily="{TemplateBinding FontFamily}"

                                    FontSize="{TemplateBinding FontSize}"

                                    FontStretch="{TemplateBinding FontStretch}"

                                    FontStyle='{TemplateBinding FontStyle}'

                                    FontWeight="{TemplateBinding FontWeight}"

                                    Foreground="{TemplateBinding Foreground}"

                                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"

                                    TextAlignment="{TemplateBinding TextAlignment}"

                                    TextDecorations="{TemplateBinding TextDecorations}"

                                    TextWrapping="{TemplateBinding TextWrapping}"

                                    VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"

                                    Margin="{TemplateBinding Padding}" />

                                  <ScrollBar

                                    x:Name="VerticalScrollBarElement"

                                    Grid.Column="1"

                                    Grid.Row="0"

                                    Orientation="Vertical"

                                    Cursor="Arrow"

                                    Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"

                                    ViewportSize="{TemplateBinding ViewportHeight}"

                                    Minimum="0"

                                    Maximum="{TemplateBinding ScrollableHeight}"

                                    Value="{TemplateBinding VerticalOffset}"

                                    Width="18"/>

                                  <ScrollBar

                                    x:Name="HorizontalScrollBarElement"

                                    Grid.Column="0"

                                    Grid.Row="1"

                                    Orientation="Horizontal"

                                    Cursor="Arrow"

                                    Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"

                                    ViewportSize="{TemplateBinding ViewportWidth}"

                                    Minimum="0"

                                    Maximum="{TemplateBinding ScrollableWidth}"

                                    Value="{TemplateBinding HorizontalOffset}"

                                    Height="18"/>

                              </Grid>

                          </Border>

                      </ControlTemplate>

                  </Setter.Value>

              </Setter>

          </Style>

    I hope this helps :)

    - Corrina

  • Hi Ben,

    I love the idea of a step by step walkthrough for creating/modifying skins. I actually have this described in a Word doc already and I'll try to provide a post by next week (I need to clean it up a bit :))

    - Corrina

  • Corrina, thanks for the answer. WOW.  I now see why I couldn't find it :>).  That is a lot of markup to change the scrollviewer border, so I suppose a property would be great. In the new Blend 2.5 I've been searching for GUI access to the styles and templates for Silverlight controls and elements, as per WPF components.  I imaging that's coming down the pipe for us.

    Thanks for sharing the XAML for this!

    Scott

  • Hi B. Mavi,

    I don't have a definitive answer for you. I checked with someone (David Anson) who knows way more about this sort of thing than me, and he doesn't think you'll be able to get to file-based SMTP logs from a live Silverlight app by default because of cross-domain restrictions (which apply even if you run the app on the SMTP box). He suggested that you might be able to get around that by making the logs available on the web (maybe via IIS with a cross-domain policy), but then anyone could get at the raw logs as well (maybe not a problem).

    I hope this helps a bit :)

    - Corrina

  • Hi again Ben,

    I just found a great presentation and demo that Karen Corby did at Mix  and it covers control styling and skinning (plus creating a usercontrol and a customcontrol). It's very good, so rather than me putting together a textual walkthrough on styling, I recommend that you check out her presentation. You'll find it on http://sessions.visitmix.com/ and just look for Karen Corby and the name of the presentation is Creating Rich Dynamic User Interfaces with Silverlight 2 (styling and skinning starts at around 15:45 into the presentation)

    - Corrina

Page 1 of 3 (36 items) 123