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

WPF GlassEffect For Non Vista OS

, 17 Jun 2009
Rate this:
Please Sign up or sign in to vote.
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

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 its 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.

Lets see the code, first the XAML

   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

   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:      /// <span class="code-SummaryComment"><summary></span>
  18:      /// Interaction logic for Window1.xaml
  19:      /// <span class="code-SummaryComment"></summary></span>
  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:  }

And here is what it looks like running

image-thumb9.png

And here is a link to the source code glasswindowforxp.zip 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)

About the Author

Sacha Barber
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 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~ Pinmemberlanmuy24-Mar-12 2:00 
QuestionWindow Template PinmemberWillemToerien18-Jun-09 3:27 
AnswerRe: Window Template PinmvpSacha Barber18-Jun-09 4:02 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140718.1 | Last Updated 17 Jun 2009
Article Copyright 2009 by Sacha Barber
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid