Silverlight 2 Control Skins


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.

Comments (36)

  1. Brad Abrams says:

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

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

  3. soultech says:

    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>

  4. Kathy Kam says:

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

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

  6. BenHayat says:

    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

  7. lbugnion says:

    Hi Corrina,

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

    Greetings,

    Laurent

  8. CLaueR says:

    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

  9. BMavi says:

    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

  10. CorrinaB says:

    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
  11. CorrinaB says:

    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
  12. soultech says:

    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

  13. CorrinaB says:

    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
  14. CorrinaB says:

    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
  15. kamipatel says:

    Hello,

    I replaced page.xaml and App.xaml. I am getting following error when I compile.

    Error 1 The type or namespace name ‘DataGrid’ does not exist in the namespace ‘System.Windows.Controls’ (are you missing an assembly reference?) c:silverlightprojectsstyles_redstyles_redobjdebugpage.g.cs 36 42 Styles_Red

    Please help. Could you send me your complete Visual Studio project?

    thanks.

  16. CorrinaB says:

    Hi Kamipatel,

    I just created a new post on how to hook up data to ListBox and DataGrid that I think will help resolve this problem. Check it out here, http://blogs.msdn.com/corrinab/archive/2008/03/17/hooking-data-up-to-listbox-and-datagrid.aspx. The problem is that for DataGrid, you need to add a reference to System.Windows.Controls.Data in your project as well as the namespace for this in your Page.xaml file. I talk specifically about how to do this towards the bottom of the new post. I think this should help :)

    • Corrina
  17. kamipatel says:

    Hello Corrina,

    I did try to follow http://blogs.msdn.com/corrinab/archive/2008/03/17/hooking-data-up-to-listbox-and-datagrid.aspx but still can not get it to compile. I do not see <dSrc:CustomerList /> defined anywhere.

    Do you mind sending the look and feel solution to my email kam_patel@hotmail.com

    Thanks,Kam

  18. CorrinaB says:

      CorrinaB said:

    Hi Kam,

    Remove the dSrc:CustomerList part. This is another way to reference data and you don’t need it if you followed the last walkthrough I posted. If you did the data walkthrough, I would recommend using the solution you created there and then paste in the styles you’re interested in into App.xaml, and then create new control instances for the other controls in Page.xaml.

    I’m not comfortable sending you one of my complete projects at this time because I need to clean it up and I’m in Asia on vacation for the next three weeks and won’t have much time to do this. Can you try my recommendation here and if that doesn’t work I’ll send you a project when I’m back in town. I’m sorry I can’t be of more immediate help :(

    Also, I just was sent a pointer to one of our data experts blog and he just did a post on using datagrid that may also be interesting to check out :) http://blogs.msdn.com/scmorris/archive/2008/03/21/using-the-silverlight-datagrid.aspx

    • Corrina
  19. Via ce billet de Kathy Kam , on apprend que Corrina Barber – qui est le designer en charge de cr&#233;er

  20. If anyone still needed to see the Power of Skinning for Silverlight controls, well, Corrina just did

  21. Corrina Barber has publish four different Silverlight control skin sets that looks very nice and shows

  22. Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, Pete

  23. tntomek says:

    Is it possible to skin Silverlight controls to look as slick as Flex’s default?

    I was very impressed with the samples which leads me to believe that it can be done, but the effort seems considerable.

    Flex samples: http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

    Obviously Silverlight isn’t as mature as Flex and Adobe’s designers are probably pretty good, MS tends to leave the details to the developer/designer whereas adobe has beautiful defaults that don’t seem to need any tweaking.

    All I’m saying is that I’d pay money for these skins :) … is there anyone out there with the talent?

  24. Incontestablement, les contr&#244;les graphiques sont une des nouveaut&#233;s de Silverlight 2 qui &#233;taient

  25. …or what I have experienced in the last days with my personal Virtual Machine. And finally few pieces

  26. Ericko says:

    Here’s one for you… why not keep things simple and just make a zip file with an entire working solution!

  27. Brad Abrams says:

    I have been having some fun with an end to end Silverlight 2 demo recently and I thought I’d share it

  28. Last weekend, I decided to take time off from what I was supposed to be doing (shh… don&#39;t tell

  29. JohnPapa.net says:

    I’m working with the very talented Corrina Barber who has created several sets of skins for Silverlight controls. The skins are elegant, but not over the top, styles that can be applied to Silverlight controls. Corrina has been gracious enough to help

  30. Programming says:

    I have been having some fun with an end to end Silverlight 2 demo recently and I thought I&#39;d share

  31. Skinning Silverlight controls just got easier

  32. TerryLee says:

    CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式,这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时,由于引入了…

  33. cleverboy says:

    CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式,这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时,由于引入了…

  34. exotribe says:

    Say you are working on your new Silverlight 2.0 Beta 1 application. You know you are going to build some slick custom styles, but you do not have the styles ready yet. You want to proceed with your application development, but want to put in placeholder

  35. bradutz01 says:

    Hi, at http://www.xamltemplates.net/sl you can see a complete theme for all Silverlight 2.0 controls