Showing posts with label Expression Blend. Show all posts
Showing posts with label Expression Blend. 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.

New features in Expression Blend 3 Part 1

Blend 3 has got so many new features.But here I am going to tell some small easy to explain nice features.

  1. Importing from Adobe Illustrator to Blend(*.ai files)
  2. Importing from Adobe Photoshop to Blend (*.psd files)
  3. Pinning support for Toolbox Windows like VisualStudio
  4. FontManager
  5. Auto-naming of interactive elements.
  6. IntelliSense in XAML as well as in CS.
  7. Annotation support.

Importing Adode files : These are just facilities to import vector based .ai files from the Adobe illustrator and psd files from PhotoShop.

Pinning support for ToolBox Windows : Now the toolboxes are same as of Visual studio toolboxes.If we don’t want some toolboxes we can pin them to the respective sides of the window.Pin button is placed same like in the Visual studio(at top right).

Font Manager : Font manager allows us to import fonts and add to our solution.Later we can pack these fonts with our application.

Tools->FontManager

Auto naming interactive elements : This gives name to the interactive elements like Button,Textbox etc.Note that this won’t name the Grid,StackPanel etc..

Tools->Name Interactive Elements

IntelliSense in XAML as well as in CS : It has got IntelliSense support for both XAML and C-Sharp.

Annotation support : Now we can add annotations over the design area of Expression Blend.They are very much useful in describing nature and purpose of visual elements.From my first experiments it seems ,WPF only supports this feature.

Tools->Create Annotation

There are some more new features such as Sample data which help us to show sample data in design time.That will be discussed soon…