Blackspike Design Ltd

Silverlight 4 theme brush packs

Back in March we released our award winning free Silverlight 4 theme, which provides control styles & templates, and a set of brushes to customise the look. We’re not sure that we made it clear how simple it is to change the brushes to make the theme fit your style.

Therefore, we’re going to create a bunch of brush resources so you can quickly change the app. The first and most obvious choice is a light coloured theme, as the original is very dark, and probably unsuitable for commercial applications!

Rather than having a mess of downloads, we’re going to place the brushes here. To use, simply download the original theme project, open up Resources/BS_ResourceDictionary_Brushes.xaml and replace the brushes with the following XAML.

<!– LIGHT GREY BRUSHES –>

<SolidColorBrush x:Key="Brush_WindowBackground" Color="#FFF1F0F0"/>

<SolidColorBrush x:Key="Brush_Foreground" Color="#FF101010"/>

<SolidColorBrush x:Key="Brush_Highlight" Color="#FF00C1DA"/>

<SolidColorBrush x:Key="Brush_Error" Color="#FFCE4E00"/>

<LinearGradientBrush x:Key="Brush_BackgroundGrad" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="WhiteSmoke" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Over" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEFEFEF" Offset="0"/>
<GradientStop Color="Gainsboro" Offset="0.3"/>
</LinearGradientBrush>

<LinearGradientBrush x:Key="Brush_BackgroundGrad_Down" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE5E5E5" Offset="0.008"/>
<GradientStop Color="#FFAFAFAF" Offset="0.3"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="Brush_BorderInner" Color="#FFEFEFEF"/>

<SolidColorBrush x:Key="Brush_BorderOuter" Color="#FFB6B6B6"/>

<LinearGradientBrush x:Key="Brush_DarkGradInset" MappingMode="RelativeToBoundingBox" EndPoint="1,0">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFEDEDED" Offset="0.9"/>
<GradientStop Color="#FFEDEDED" Offset="1"/>
<GradientStop Color="#FFEDEDED"/>
<GradientStop Color="#FFEDEDED" Offset="0.112"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="Brush_DarkGradInset_Vert" EndPoint="1,0" StartPoint="1,1" MappingMode="RelativeToBoundingBox">
<LinearGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" Rotation="-90"/>
</LinearGradientBrush.RelativeTransform>
<GradientStop Color="#FFEDEDED" Offset="0.9"/>
<GradientStop Color="#FFEDEDED" Offset="1"/>
<GradientStop Color="#FFEDEDED"/>
<GradientStop Color="#FFEDEDED" Offset="0.1"/>
</LinearGradientBrush>

<SolidColorBrush x:Key="Brush_DarkTextBG" Color="#FFE4E4E4"/>

<SolidColorBrush x:Key="Brush_RowBackground" Color="#FFEBEBEB"/>

<SolidColorBrush x:Key="DisabledBrush" Color="#8CFFFFFF"/>

It’s simple to adjust the colours yourself in Blend, open the MainPage.xaml, and expand the BS_ResourceDictionary_Brushes.xaml resource dictionary in the Resources panel, and click on the colours to edit and update them, and see the changes reflected in the app in realtime! Let us know if you have any particular requests!

Editing brushes in Blend

One Response

Open/Close menu