WPF Glass Brush Markup Extension

• Download source - 19.87 KB

Introduction

This is a demo XAML markup project that creates a "glass" brush. And of course, here's a sample screen shot!

Background

I wanted a quick way to create "glassy" style buttons by picking a single color and here it is. 

Using the Code

Using the code is pretty straightforward.  You'll need the HSL.vb, ColorExtension.vb, and GlassBrushExtension.vb files in your project (or a library). First add the project (or library) namespace to your Window tag. The demo uses the following tag:

xmlns:a="clr-namespace:GlassButton" 

Next just use the markup extension on any brush property like the following:

<Border VerticalAlignment="Bottom" Width="30" Height="70" 
	Background="{a:GlassBrush #24292b, Horizontal=False, Glow=30}" />

or:

<Border VerticalAlignment="Bottom" Width="30" Height="70" 
	Background="{a:GlassBrush {StaticResource BaseColor}, 
	Horizontal=False, Glow=30}" />

There's apparently some issue with nested markup extensions from time to time. I found an article that talks about it here. If you have this issue, you can get around it with the following property element syntax:

<Border VerticalAlignment="Bottom" Width="30" Height="70">
  <Border.Background>
    <a:GlassBrush Color="{StaticResource BaseColor}" Horizontal="False" Glow="30"/>
  </Border.Background>
</Border>

Points of Interest

In addition to only needing to pick a single color to get the brush, you can also add a Glow or Reverse the button. I included a hacked up button template as an example of a button. 

A Bit About the Code

The extension is simply a class inheriting from MarkupExtension in the System.Windows.Markup namespace.  At its core, an extension requires you to define the ProvideValue function which in this case produces a normal or reversed brush. To add flexibility, I created some properties that can be defined in XAML: Color, Horizontal, Glow, IsReversed. There was a small issue with nested Markup extensions. To get around that, I provided a Sub New that takes a color. This allows you to use a named color. So while the following should work, it didn't for me in Visual Studio 2008: 

<Border VerticalAlignment="Bottom" Width="30" Height="70" 
	Background="{a:GlassBrush Color={StaticResource BaseColor}, 
	Horizontal=False, Glow=30}" /> 

Also to make the brush work from a single color, I convert values to HSL and adjust primarily the Saturation and Luminance of the base color. By removing saturation and increasing luminance, I create the top "lighted" effect which is lighter and sort of "washed" out. At the bottom, I slowly fade from the base color to one with increased saturation. If you choose to add glow, it does this by increasing the luminance of the stronger color. So it's sort of Bluer than Blue for instance. 

One thing I didn't have any luck with was getting a fixed size region in the brush. The brush just scales to whatever you paint with it. So while I would have preferred a fixed size "highlight" region, the result seems pretty good. As a horizontal brush gets taller or a vertical brush gets wider, you will see the "roundness" sort of taper off.

Hope you like it. 

History

• Initial release 2009-06-16