Showing posts with label Styling. Show all posts
Showing posts with label Styling. Show all posts

Wednesday, March 25, 2009

Silverlight 3 Beta Merged Resource Dictionaries

This helps us to link resource dictionaries.That means we can split up our resource dictionaries into small files and link them together to act like a single resource dictionary.

Earlier when we develop a Silverlight custom control library we have to keep all the control styles and templates in a single resource dictionary file called generic.xaml.That is very much confusing and makes the generic.xaml very huge and complex.We can’t maintain that resource dictionary easily.The main advantage of Merged resource dictionary comes here.We can split up the styles and templates of each individual Silverlight control into separate resource dictionary files and maintain easily.

Also when we are in styling or templating controls in a complex user control we can split up similar styles into different resource dictionaries.Normally its very useful to separate Brushes and colors from the styles.

Creating Resource Dictionary

If you are using Visual studio there is no direct support to add a ResourceDictionary.So add a new UserControl and do the following.

  1. Delete the xaml.cs file
  2. Remove the x:Class attribute from UserControl’s xaml declaration.
  3. Remove the Width and Height properties
  4. Remove the default Grid control.
  5. Change Build action to Resource.
  6. Rename the UserControl XAML tag to ResourceDictionary.

Now the XAMl will look as follows

<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
</ResourceDictionary>





To create a new ResourceDictionary using Blend 3 ,go to resources tab.Click on the ‘+’ located at top right to show the creation dialog.Give the name and press ‘OK’.I will be writing another post in detail which describes creation and manipulation of ResourceDictionaries using blend.





Adding resources



Adding xaml elements into ResourceDictionary is same as before.We can add any xaml element including Button,Grid,Brush,Color,Templates,Styles etc…A typical Colors.xaml resource dictionary is shown below




<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Color x:Key="bgcolor">Red</Color>
</ResourceDictionary>





Merging resource dictionaries



ResourceDictionary now got a new property called MergedDictionaries.This is a collection of ResourceDictionaries.We can add any number of ResourceDictionaries into this.Also we can merge a ResourceDictionary into another ResourceDictionary.Below is a Brushes.xaml which uses the Colors.xaml as a merged resource dictionary.




<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Colors.xaml" />
</ResourceDictionary.MergedDictionaries>
<SolidColorBrush x:Key="background" Color="{StaticResource bgcolor}"/>
</ResourceDictionary>




Now we got brushes.xaml.This can be merged again with UserControl.xaml in order to use the brushes.




<UserControl x:Class="CustomEffects.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<UserControl.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Brushes.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Button Grid.Row="1"
Background="{StaticResource background}"
Content="Click to change"></Button>
</Grid>
</UserControl>





Sample can be downloaded from here.

Friday, April 11, 2008

Styling and Templating in Silverlight 2.0

There is no easy method to edit Styles or Templates of Silverlight 2.0 controls eventhough there is Style and Templating support.The actual problem is we can't find out the default Style or Template in ordre to edit.In WPF applications it's possible by opeing Application in Expression Blend.But we should alter the templates in order to get full strength Silverlight .ie the GREAT next generation look and FEEL.

Here you can found one tool which displays default style and template of Silverlight controls.just copy the style from the tool then alter and apply to your controls and have the power of Templating and Styling.
Hope in future versions of Blend there would be support to edit templates as we are doing for WPF application.Anyway thanks to Delay for providing such a tool.

The default styles are available in MSDN also.