Adding Glass Effect to WPF using Attached Properties

• Download source - 421 KB

Notes

A more detailed explanation of attached properties can be found here.

Introduction

After reviewing Blendables, I decided to investigate how difficult it would be to also allow a window to turn on its glass effect using attached properties. (The review of Blendables can be found here.)

Attached properties are used all over WPF (DockPanel.Dock, Canvas.Left, etc.) but they also have the potential of simplifying loads of other tasks (setting glass effects on Windows, adding drag & drop functionality to ListBoxes, enabling spell checking on controls).

I want to be able to turn on the Aero glass effect by just one line of code:

<Window x:Class="GlassEffectDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:src="clr-namespace: GlassEffectDemo"
    src:GlassEffect.IsEnabled="True"
    Title="GlassEffect demo" Height="300" Width="300">
    <Grid>
    </Grid>
</Window>  

Aero Glass Effect

I am not going into too much detail on how to enable the glass effect. (It has been covered in great detail on the Web already.) This article will focus more on how to use attached properties to turn the glass effect on!

Here is the definition of my attached property IsEnabled:

public static readonly DependencyProperty IsEnabledProperty =
    DependencyProperty.RegisterAttached("IsEnabled",
    typeof(Boolean), typeof(GlassEffect),
        new FrameworkPropertyMetadata(OnIsEnabledChanged));

public static void SetIsEnabled(DependencyObject element, Boolean value)
{
    element.SetValue(IsEnabledProperty, value);
}

public static Boolean GetIsEnabled(DependencyObject element)
{
    return (Boolean)element.GetValue(IsEnabledProperty);
}

public static void OnIsEnabledChanged
    (DependencyObject obj, DependencyPropertyChangedEventArgs args)
{
    if ((bool)args.NewValue == true)
    {
        try
        {
            Window wnd = (Window)obj;
            wnd.Loaded +=new RoutedEventHandler(wnd_Loaded);
        }
        catch (Exception)
        {
            //Attached property is not set for a Window, do nothing!!!
        }
    }
} 

It is important to notice here that all attached properties MUST be registered with the DependencyProperty.RegisterAttached and that they MUST also have a Get<PropertyName> and Set<PropertyName>!!!

The next step is to attach an event handler to alert me if the attached property changes. Inside this event handler, I can check if the attached property is changed to True or False (IsEnabled).

If IsEnabled is changed to true, then I add an event handler to the Windows Loaded event. Here is the Loaded event handler... All it does is add the glass effect:

 static void wnd_Loaded(object sender, RoutedEventArgs e)
{
    Window wnd = (Window)sender;
    Brush originalBackground = wnd.Background;
    wnd.Background = Brushes.Transparent;
    try {
        IntPtr mainWindowPtr = new WindowInteropHelper(wnd).Handle;
        HwndSource mainWindowSrc = HwndSource.FromHwnd(mainWindowPtr);
        mainWindowSrc.CompositionTarget.BackgroundColor = Color.FromArgb(0, 0, 0, 0);
        System.Drawing.Graphics desktop = 
            System.Drawing.Graphics.FromHwnd(mainWindowPtr);
        MARGINS margins = new MARGINS();
        margins.cxLeftWidth = -1;
        margins.cxRightWidth = -1;
        margins.cyTopHeight = -1;
        margins.cyBottomHeight = -1;
        DwmExtendFrameIntoClientArea(mainWindowSrc.Handle, ref margins);
    }
    catch (DllNotFoundException)
    {
        wnd.Background = originalBackground;
    }
}                

Now the glass effect can be turned on by just using one line of code!!!

As always, please comment on how I can improve my articles and also rate this article (even if you thought it was utterly useless!)

History

• 10 January 2008: Initial release

Links

• Rudi Grobler
• Adam Nathan's article about Glass