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; ForBrushLayout : Valid XAML text]
BorderBrush [Predefined values, listed in combobox]
BorderThickness [+ Integer : Ex: 2 or2,2 or 2,2,2,2]
CornerRadius [+ Integer : Ex: 2 or2,2 or 2,2,2,2]
Margin [+/- Integer : Ex: 2 or2,-2 or -2,2,-2,2]
Opacity [+ Decimal : Ex: 0.5]
Padding [+ Integer : Ex: 2 or2,2 or 2,2,2,2]

Screenshots

FullSS

Image Background (ImageLayout Control)

ImageBackground

Multi Stop Linear Gradient

MultiStopLinearGradient

Brush Xaml

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).

EmptyBackground

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.

RadialGradientwithOpacity

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.

SolidColorWithInnerImage

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.

ImageBrush

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 viaXamlReader.Load(). So use this extension with caution.
At least for version 1.0, you need to pass your Xaml as Single Line Text. MyBackground Value Converter looks for a “ “ (space) in the root element in order to insert a valid Namespace. So please make sure, you add ax: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 aGradient Editor).

Thanks

With all due & respect, I didn't try to recreate Yann Duran's awesome Group Layout control, but wanted a group layout control where I can set my own background rather than using theme. Hopefully when he finishes his book (withTim Leung), we can see this missing feature in his control itselft. Regardless, the original idea was his and I thankYann Duran, Michael Washington and LS community for all your support.

Source Code

Published : 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.