Click here to Skip to main content
Click here to Skip to main content

WPF Glass Brush Markup Extension

, 18 Jun 2009
Rate this:
Please Sign up or sign in to vote.
A WPF XAML markup extension with a "Glass" look

Introduction

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

GlassButton

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 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

LarryCharlton

United States United States
I enjoy my wife, living in the woods, my 7 dogs, and learning new things. I like to play with UI stuff and model based coding.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 18 Jun 2009
Article Copyright 2009 by LarryCharlton
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid