Introduction

This simple group layout extension consists of two controls: ImageLayout & BrushLayout; helps users to set its background.

Detail

As of I’ve tested, below background types are supported.

Image Layout Control

• Image

Brush Layout Control

• Image Brush
• Linear Gradient Brush
• Radial Gradient Brush
• Solid Color Brush

Both controls supports the following properties for extra customization.

• Background [For ImageLayout : Valid Image; For BrushLayout : Valid XAML text]
• BorderBrush [Predefined values, listed in combobox]
• BorderThickness [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]
• CornerRadius [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]
• Margin [+/- Integer : Ex: 2 or 2,-2 or -2,2,-2,2]
• Opacity [+ Decimal : Ex: 0.5]
• Padding [+ Integer : Ex: 2 or 2,2 or 2,2,2,2]

Screenshots

Image Background (ImageLayout Control)

Multi Stop Linear Gradient

Example:

<LinearGradientBrush x:Key=”linear” StartPoint=”0,0″ EndPoint=”1,1″ SpreadMethod=”Pad” ColorInterpolationMode=”SRgbLinearInterpolation” ><GradientStop Color=”#FF02A509″ Offset=”0″ /><GradientStop Color=”#FF258931″ Offset=”1″ /><GradientStop Color=”#FFE2FFB6″ Offset=”0.61″ /><GradientStop Color=”#FF7AF35F” Offset=”0.29″ /></LinearGradientBrush>

Empty Background

If you don’t supply a Xaml text, then control creates a empty Linear Brush. Shadow effect is created by providing different border properties (Ex: 1,1,5,5).

Radial Gradient with Opacity

Same as LinearGradient, you can supply a valid RadialGradientBrush Xaml.  For this screenshot, I also applied Opacity (0.5) for dull effect.

Example

<RadialGradientBrush x:Key=”radial” Center=”0.5,0.5″ GradientOrigin=”0.5,0.5″ RadiusX=”0.5″ RadiusY=”0.5″ SpreadMethod=”Pad” ColorInterpolationMode=”SRgbLinearInterpolation” ><GradientStop Color=”#FFD700FF” Offset=”0″ /><GradientStop Color=”#FF642568″ Offset=”1″ /><GradientStop Color=”#FFF9F9F9″ Offset=”0.5″ /></RadialGradientBrush>

Solid Color with ImageLayout

Remember to pass a HEX value as your color.  Passing Numeric (RGB) values will not work in Silverlight and extension will throw an exception.

For this screenshot, I added ImageLayout control inside a BrushLayout Control.

Example

<SolidColorBrush Color=”#ef115f”/>

Image Brush

Along with ImageLayout control, you can also use BrushLayout control to set your background image; this time by passing a ImageBrush Xaml.

Example

<ImageBrush x:Key=”ImgBrush” ImageSource=”/TestProject.Client;Component/Resources/avatar.jpg”/>

Points of Interest

• MSDN explains potential dangerous about passing Xaml as a parameter and load via XamlReader.Load().  So use this extension with caution.
• At least for version 1.0, you need to pass your Xaml as Single Line Text. My Background Value Converter looks for a “ “ (space) in the root element in order to insert a valid Namespace. So please make sure, you add a x:Key or some kind of attribute or just a “space” in your supplied Xaml text.
• Passing Xaml as text is not ideal for the users. But till the last minute, I tried to create a Gradient Editor, but I’m not any sort of expert at all.  I dropped that idea and tried to create a Multiline textbox.  I partially succeed but, somehow it keep loosing its “line returns” & alignments.  So I decided to leave it as default single-line textbox.

I would really appreciate, if someone can make this extension in more user friendly way (ie: creating a Gradient Editor).

Source Code

Published Here : http://code.msdn.microsoft.com/Background-Group-Layout-c272f8fb

Disclaimer

My controls, samples and articles are created during my off/free time. The opinions expressed here are MY OWN and are not necessarily those of my employer, partners, customers, friends, or family. ALL content presented AS-IS, for entertainment/educational purposes only with ABSOLUTELY NO WARRANTY expressed or implied.