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
- Anonymous
March 10, 2008
PingBack from http://msdnrss.thecoderblogs.com/2008/03/10/silverlight-2-control-skins/ - Anonymous
March 12, 2008
One of the great things about Silverlight is that the controls are very skinable.. that is you can make - Anonymous
March 12, 2008
One of the great things about Silverlight is that the controls are very skinable.. that is you can make - Anonymous
March 12, 2008
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> - Anonymous
March 12, 2008
Now that I have recovered from the excitement of Las Vegas, I thought I'll sit down and give a run down - Anonymous
March 12, 2008
Now that I have recovered from the excitement of Las Vegas, I thought I'll sit down and give a run - Anonymous
March 12, 2008
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 - Anonymous
March 12, 2008
Hi Corrina,Happy to see you start a new blog. I hope to read more of Silverlight styling in the future :)Greetings,Laurent - Anonymous
March 12, 2008
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 - Anonymous
March 13, 2008
Hi Corrina,It's great stuff. Is it possible to read or display live logs (eg. SMTP Logs) using Silverlight Streaming ???ThanksB. Mavi"If I have seen further it is by standing on the shoulders of giants." - Sir Isaac Newton - Anonymous
March 13, 2008
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 - Anonymous
March 13, 2008
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 - Anonymous
March 13, 2008
The comment has been removed - Anonymous
March 13, 2008
The comment has been removed - Anonymous
March 13, 2008
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 - Anonymous
March 14, 2008
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_RedPlease help. Could you send me your complete Visual Studio project?thanks. - Anonymous
March 16, 2008
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 - Anonymous
March 19, 2008
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.comThanks,Kam - Anonymous
March 21, 2008
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.aspxCorrina - Anonymous
March 23, 2008
Via ce billet de Kathy Kam , on apprend que Corrina Barber - qui est le designer en charge de créer - Anonymous
March 24, 2008
If anyone still needed to see the Power of Skinning for Silverlight controls, well, Corrina just did - Anonymous
March 24, 2008
Corrina Barber has publish four different Silverlight control skin sets that looks very nice and shows - Anonymous
March 24, 2008
Michael Sync on User Control Inheritance, Expression Team provides DeepZoom collection example, Pete - Anonymous
March 25, 2008
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.htmlObviously 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? - Anonymous
March 29, 2008
Incontestablement, les contrôles graphiques sont une des nouveautés de Silverlight 2 qui étaient - Anonymous
March 29, 2008
...or what I have experienced in the last days with my personal Virtual Machine. And finally few pieces - Anonymous
April 09, 2008
Here's one for you... why not keep things simple and just make a zip file with an entire working solution! - Anonymous
April 19, 2008
I have been having some fun with an end to end Silverlight 2 demo recently and I thought I'd share it - Anonymous
April 30, 2008
Last weekend, I decided to take time off from what I was supposed to be doing (shh... don't tell - Anonymous
May 28, 2008
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 - Anonymous
June 03, 2008
I have been having some fun with an end to end Silverlight 2 demo recently and I thought I'd share - Anonymous
June 04, 2008
Skinning Silverlight controls just got easier - Anonymous
July 20, 2008
CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式，这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时，由于引入了... - Anonymous
August 01, 2008
CorrinaBarber在Silverlight2Beta1的时候就完成了四套非常酷的控件样式，这些样式我曾经在个人博客中推荐过。当Silverlight2升级到Beta2时，由于引入了... - Anonymous
August 07, 2008
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 - Anonymous
April 02, 2009
Hi, at http://www.xamltemplates.net/sl you can see a complete theme for all Silverlight 2.0 controls