How to create fully transprent windows in C# 2008??

[Krazy_About_Technology]

Hi Guys & Gals,

I've been working wit Visual Studio 2008 since a long time. Yesterday, i installed and added some gadgets to my Windows Vista Sidebar. For adding gadgets, one has to open the "Add Gadgets" dialog. So i did that and suddenly this question came to my mind.

Is there anyway to create a windows with the fully transparent, AERO style background in both client and non client areas? I guess it must be possible using WPF but i dunno how to do that.

Please somebody help me do that. the language i want to do this in is C#.

Thanks in advance.

Here is a pic of what i want....

*img357.imageshack.us/img357/8519/twinop9.th.jpg

 

[RCuber]

The opacity property of the form already does that... didnt you try that before?

 

[Krazy_About_Technology]

@charan: Yes i have tried that but that only gives transparency to the window, not the Aero kind of look. I guess you didn't looked at the pic i provided. It has a window with AERO borders as well as client area. I want to know how to create that.

 

[gxsaurav]

This will help U. It's written by Fellow MVP & my Ex-Boss Dax Pandhi

*www.nukeation.net/PermaLink,guid,518bdb56-12e9-4115-9829-ed842537781c.aspx

This is how it will look like

*www.nukeation.net/content/binary/nAE1.jpg

However, follow some of the UI Guidelines for Vista. Such Window should be made only in case U R making a non-maximize Window.

You can change the thickness value in Window1.xaml file to something else to create a thickness area which will not be transparent. Then you can add another bitmap effect to this new area to make 2 distinct transparent areas

 

[Garbage]

Thanks gx_saurav...

Chalo, kuchh toh acchha kaam kiya B'day par..

 

[Krazy_About_Technology]

Thanks GX_Saurav, you made my day Happy birthday, once again.

 

[gxsaurav]

it's only a matter of 4 clicks in Microsoft Blend though

 

[Krazy_About_Technology]

Hey GX, i tried all this. I am getting a full glass window in WPF and i also modified the code a little bit to work with Windows Forms too. But there is only one problem that i am having. As you can see the Sidebar's window shows an area in the middle that is less transparent then the outer area. How can this be done??

Currently, if i am supplying margins to the function, i am getting a black rectangle at the specified area. This is the code i am using:

GlassHelper.cs

using System;
using System.IO;
using System.Net;
using System.Windows;
using System.Runtime.InteropServices;
using System.Collections.Generic;

namespace WindowsFormsApplication1
{       public struct MARGINS
        {
            public MARGINS(int l, int r, int t, int b)
            {
                Left = l;
                Right = r;
                Top = t;
                Bottom = b;
        
            }
            public MARGINS(ref MARGINS m)
            {
                Left = m.Left;
                Right = m.Right;
                Top = m.Top;
                Bottom = m.Bottom;
            }
            public int Left;
            public int Right;
            public int Top;
            public int Bottom;
        }
    public class GlassHelper
    {
        [DllImport("dwmapi.dll", PreserveSig = false)]
        static extern void DwmExtendFrameIntoClientArea(IntPtr hwnd, ref MARGINS margins);

        [DllImport("dwmapi.dll", PreserveSig = false)]
        static extern bool DwmIsCompositionEnabled();


        public static bool ExtendGlassFrame(System.Windows.Forms.Form window, MARGINS margin)
        {
            if (!DwmIsCompositionEnabled())
                return false;

            IntPtr hwnd = window.Handle;
            if (hwnd == IntPtr.Zero)
                throw new InvalidOperationException("The Window must be shown before extending glass.");

            // Set the background to transparent from both the WPF and Win32 perspectives
            // SolidColorBrush background = new SolidColorBrush(Colors.Red);
            //background.Opacity = 0.5;
            window.BackColor = System.Drawing.Color.Black ;
              MARGINS margins = new MARGINS(ref margin);
            DwmExtendFrameIntoClientArea(hwnd, ref margins);
            return true;
        }
    }
}

form1.cs

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1()
        {

            GlassHelper.ExtendGlassFrame(this,new MARGINS(50,50,60,60));
            InitializeComponent();
            
        }

    }
}

And this is what i am getting:

*img518.imageshack.us/img518/4433/glassextendertc6.th.jpg

I want to turn the black area into a little less transparent area, just like how sidebar's window has done where it displays icons of the gadgets. Please tell me code based approach only since i dont have Blend with me.

 

[gxsaurav]

There are 2 areas in the sidebar gadget gallery window, one is the client area where those gadgets are shown & 2nd is the window area. The code I provided hides the client area using thickness(-1) & all U get is the window area extended.

I don't know how u do it in code, but in Blend....we just give another brush to the client area. An opacity brush value on which we can apply some bitmap effect. Try goggling it, as I never needed to make such windows.

 

[Krazy_About_Technology]

OK, i got it somewhat. Will try something on my own and then google it if not possible. Waise actually i want to do it on WinForms so using Blend is not really an option, isn't it?

And for the enthusiasts, who may want more of it, there is a project going on Codeplex.com on this issue. The developers have created a library for using new Vista Look-n-Feel + New Vista Dialogs effortlessly in both Windows Forms and WPF. Currently the library doesn't supports fallback to old type of UI in case AERO is off or your app is running in some other OS than Vista, but they plan to add it soon. Its open source so source code is also provided to dig in deep. I am studying it to further enhance the look of my applications and give them the "Vista" look and feel.

The project is here Windows Forms AERO

 

[gxsaurav]

That Project is Code Plex is good, if you are professional developer U can also have a look at "Nukeation Reuxables" to give your application a different look all together.

I personally find this Windows Forms AERO really good. Nice enough to make native UI look & feel

 

[pavilion]

phew , great to see you guys , I have met a really headache problem about what you were talking about
I followed the tutorial , want to extend the glassy frame into client area in WPF But one thing happened strangely , the client area became black (see the attached image) while according to the book I'm reading , it should be transparent . (the book is Pro WPF in 2008 of Matthew Donald)
I have tried the tutorial on my friend's PC , and the client area became transparent as I expected . So what happened to my system , I cannot follow the tutorial correctly

 

[Krazy_About_Technology]

^^ Buddy i can't see your snapshot. Please upload it to *www.imageshack.us and then paste the link here. Is Aero running on your system? Check the return value of DwmIsCompositionEnabled() as the background is actually black and will show up if extending of frame into client area doesn't works.

 

[pavilion]

*img213.imageshack.us/img213/876/70784937wv7.th.jpg

Ok , my image from imageshack ^^ , you can see a frame-extended window with black client area , I think it's supposed to transparent

 

[pavilion]

*img87.imageshack.us/img87/8013/11238676tr4.th.jpg*img87.imageshack.us/images/thpix.gif
you can see the frame-extended window with fully transparent client area , this 's what I want and what it should be. But it's the result when I ran the tutorial on my friend's PC , on my own PC , it became black ??

 

[Krazy_About_Technology]

Use -1 as the margin values. You are using some other margin values thats causing it to display only partial area transparent.

@gx_savrav: Hey saurav, can you post a small, screenshot-filled, tutorial to show how it can be done with Expression Blend 2, both the full glass slab as well as the sidebar dialog look-a-like with less transparent area at the center.
Thanks in advance

 

[pavilion]

using margin as -1 wil make the window fully glassy , I knew it , but I just want to extend the glassy frame , keep a portion of client area as transparent inside . I saw the tutorial can do it on my friend's PC , why cannot I do it on my own PC

 

[Krazy_About_Technology]

NO idea man! Same code cant run differently on two PCs i guess. I think you should write the program on your friend's computer and copy the project files on your system. Then see if there is any difference