Click here to Skip to main content
15,867,756 members
Articles / Desktop Programming / WPF

WPF GlassEffect For Non Vista OS

Rate me:
Please Sign up or sign in to vote.
4.00/5 (3 votes)
17 Jun 2009CPOL1 min read 26K   92   7   3
WPF GlassEffect For Non Vista OS

For those of us fortunate enough to own Windows Vista, we can now see transparent windows that show the content behind our window through a glass window. This is down to the Desktop Windows Manager ability to extend the glass effect into the client area. This is however only possible on Windows Vista.

I had a little play around with WPF today and came up with a very crude (no resize window support) example for non Vista Windows versions that can run WPF. As I say, it's very crude but gives you the basic idea.

The idea is that you set the Window mode to AllowTransparency and set the WindowStyle to None, and then within any Glass enabled window, you use some boiler plate code which mimics the Vista glass effect.

This is done via the use of a Canvas layout control. As Canvas allows objects to be placed using different ZIndex, you can create an overall semi-transparent area (the Glass) and then lay your controls on top of that. The only down side is that as canvas is an X/Y layout manager, you will probably have to do at least 1 piece of code that makes sure the actual content is given the correct size you want.

Let's see the code, first the XAML:

XML
 1:  <Window x:Class="GlassWindowForXP.Window1"
 2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 4:      Background="Transparent"
 5:      Title="Window1" Height="600" Width="800"
 6:      x:Name="Window">
 7:      <Canvas x:Name="canvmain">
 8:
 9:          <Canvas.Resources>
10:
11:              <ControlTemplate x:Key="imageButton"
12:                               TargetType="{x:Type Button}">
13:                  <Image Source="{Binding
14:                      RelativeSource={RelativeSource TemplatedParent},
15:                   Path=Tag}" Width="{TemplateBinding Width}"
16:                         Height="{TemplateBinding Height}"
17:                         Stretch="Fill"/>
18:              </ControlTemplate>
19:
20:          </Canvas.Resources>
21:
22:          <Rectangle Opacity="0.800000" x:Name="back"
23:                     Width="{Binding ElementName=canvmain,
24:                      Path=ActualWidth}"
25:                     Height="{Binding ElementName=canvmain,
26:                      Path=ActualHeight}"
27:                     StrokeThickness="2.000000" Stroke="#55505050"
28:                     StrokeMiterLimit="1.000000">
29:              <Rectangle.Fill>
30:                  <LinearGradientBrush StartPoint="0.499999,0.019669"
31:                                       EndPoint="0.499999,0.957376">
32:                      <LinearGradientBrush.GradientStops>
33:                          <GradientStop Offset="0.000000"
34:                                        Color="#ffe8e8e8"/>
35:                          <GradientStop Offset="1.000000"
36:                                        Color="#ffbababa"/>
37:                      </LinearGradientBrush.GradientStops>
38:                  </LinearGradientBrush>
39:              </Rectangle.Fill>
40:          </Rectangle>
41:
42:          <DockPanel Margin="0" Background="Transparent" LastChildFill="True">
43:              <DockPanel DockPanel.Dock="Top" Background="RoyalBlue"
44:                         Width="{Binding ElementName=canvmain, Path=ActualWidth}" >
45:                  <Label x:Name="lblTitle" DockPanel.Dock="Left"
46:                         Content="{Binding Path=Title, ElementName=Window,
47:                          Mode=Default}"
48:                         VerticalAlignment="Center" FontFamily="Arial Rounded MT"
49:                         FontSize="12" FontWeight="Bold" Foreground="#FFFFFFFF" />
50:                  <StackPanel DockPanel.Dock="Right" Height="30" Width="75"
51:                              Orientation="Horizontal" HorizontalAlignment="Right"  >
52:                      <Button x:Name="btnMin" Width="21" Height="21" Margin="2"
53:                              Template="{StaticResource imageButton}" Tag="images/minimise.png"
54:                              HorizontalAlignment="Right" Click="btnMin_Click"
55:                              VerticalAlignment="Center"/>
56:                      <Button x:Name="btnMax" Width="21" Height="21" Margin="2"
57:                              Template="{StaticResource imageButton}" Tag="images/maximise.png"
58:                              HorizontalAlignment="Right" Click="btnMax_Click"
59:                              VerticalAlignment="Center"/>
60:                      <Button x:Name="btnClose" Width="21" Height="21" Margin="2quot;
61:                              Template="{StaticResource imageButton}" Tag="images/close.png"
62:                              HorizontalAlignment="Right" Click="btnClose_Click"
63:                              VerticalAlignment="Center"/>
64:                  </StackPanel>
65:              </DockPanel>
66:
67:              <TabControl Margin="20" Height="400">
68:                  <TabItem Header="TabItem">
69:                      <Grid/>
70:                  </TabItem>
71:                  <TabItem Header="TabItem">
72:                      <Grid/>
73:                  </TabItem>
74:              </TabControl>
75:          </DockPanel>
76:      </Canvas>
77:  </Window>

And here is the C# code for it:

C#
 1:  using System;
 2:  using System.Collections.Generic;
 3:  using System.Linq;
 4:  using System.Text;
 5:  using System.Windows;
 6:  using System.Windows.Controls;
 7:  using System.Windows.Data;
 8:  using System.Windows.Documents;
 9:  using System.Windows.Input;
10:  using System.Windows.Media;
11:  using System.Windows.Media.Imaging;
12:  using System.Windows.Navigation;
13:  using System.Windows.Shapes;
14:
15:  namespace GlassWindowForXP
16:  {
17:      /// <summary>
18:      /// Interaction logic for Window1.xaml
19:      /// </summary>
20:      public partial class Window1 : Window
21:      {
22:          public Window1()
23:          {
24:
25:              this.WindowStyle = WindowStyle.None;
26:              this.AllowsTransparency = true;
27:              this.Background = new
28:                  SolidColorBrush(Color.FromArgb(0, 34, 34, 34));
29:              InitializeComponent();
30:          }
31:
32:          protected override void
33:              OnMouseLeftButtonDown(MouseButtonEventArgs e)
34:          {
35:              base.OnMouseLeftButtonDown(e);
36:              this.DragMove();
37:          }
38:
39:          private void btnClose_Click(object sender, RoutedEventArgs e)
40:          {
41:              this.Close();
42:          }
43:
44:          private void btnMin_Click(object sender, RoutedEventArgs e)
45:          {
46:              this.WindowState = WindowState.Minimized;
47:          }
48:
49:          private void btnMax_Click(object sender, RoutedEventArgs e)
50:          {
51:              this.WindowState = WindowState.Maximized;
52:          }
53:      }
54:  }

Here is what it looks like running:

37340/image-thumb9.png

Here is a link to the source code glass. As I say, this is very crude, and wouldn’t be suitable for production code the way it is, but it gives you a starting point.

License

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


Written By
Software Developer (Senior)
United Kingdom United Kingdom
I currently hold the following qualifications (amongst others, I also studied Music Technology and Electronics, for my sins)

- MSc (Passed with distinctions), in Information Technology for E-Commerce
- BSc Hons (1st class) in Computer Science & Artificial Intelligence

Both of these at Sussex University UK.

Award(s)

I am lucky enough to have won a few awards for Zany Crazy code articles over the years

  • Microsoft C# MVP 2016
  • Codeproject MVP 2016
  • Microsoft C# MVP 2015
  • Codeproject MVP 2015
  • Microsoft C# MVP 2014
  • Codeproject MVP 2014
  • Microsoft C# MVP 2013
  • Codeproject MVP 2013
  • Microsoft C# MVP 2012
  • Codeproject MVP 2012
  • Microsoft C# MVP 2011
  • Codeproject MVP 2011
  • Microsoft C# MVP 2010
  • Codeproject MVP 2010
  • Microsoft C# MVP 2009
  • Codeproject MVP 2009
  • Microsoft C# MVP 2008
  • Codeproject MVP 2008
  • And numerous codeproject awards which you can see over at my blog

Comments and Discussions

 
Questiontrans but not blur~ Pin
lanmuy24-Mar-12 2:00
lanmuy24-Mar-12 2:00 
QuestionWindow Template Pin
WillemToerien18-Jun-09 3:27
WillemToerien18-Jun-09 3:27 
AnswerRe: Window Template Pin
Sacha Barber18-Jun-09 4:02
Sacha Barber18-Jun-09 4:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.