Xp aero glass
Description
Ceci est la VERSION 2.0 mise à jour le 18/12/2006 (voir détail à la fin)
Simulation de fenêtres AERO GLASS sous XP.
Le projet s'appuie exclusivement sur les possibilités offertes par VISUAL C# 2005 Express Edition.
Pour skinner la fenêtre, j'ai utilisé quelques unes des techniques utilisées dans WinLIFT et GDImage, plus une bonne pincée de code bas niveau Win32.
Les images du Skin sont réalisées avec zDraw et PhotoShop, dans l'esprit de Windows VISTA.
Ce que fait le code :
- Gestion d'un skin (gabarit) en mode 9-images.
- Gestion de zones transparentes et opaques au sein d'une même fenêtre.
- Gestion de l'ombre portée (drop shadow).
- Gestion de boutons de n'importe quel forme avec un bitmap a 5 états.
- Simulation complète du fonctionnement d'une fenêtre standard.
- Utilisation de code unsafe pour créer des régions à la volée.
- Utilisation de l'API bas niveau Win32.
Création d'un Skin en mode 9-images.
------------------------------------
Il y a une grande différence entre l'utilisation d'une forme détourée statique, et une fenêtre skinnée qui se comporte comme une fenêtre standard dont on peut modifier la taille à la volée.
Voici pas à pas la marche à suivre :
A - On commence par représenter la fenêtre skinnée dans un logiciel de dessin.
B - On utilise la couleur magenta (RGB 255,0,255) pour délimiter les zones transparentes du Skin (region).
C - On découpe le dessin en 9 parties distinctes, que l'on sauvegarde dans des fichiers individuels dans le répertoire "resources" de l'application, en respectant le schema ci-dessous :
+---+-----------------+---+
|.1.|........2........|.3.|
+---+-----------------+---+
|...|.................|...|
|.4.|........5........|.6.|
|...|.................|...|
+---+-----------------+---+
|.7.|........8........|.9.|
+---+-----------------+---+
1 - TopLeft.png (partie fixe)
2 - SideTop.png (partie étirée ou juxtaposée)
3 - TopRight.png (partie fixe)
4 - SideLeft.png (partie étirée ou juxtaposée)
5 - Center.png (partie étirée ou juxtaposée)
6 - SideRight.png (partie étirée ou juxtaposée)
7 - BottomLeft.png (partie fixe)
8 - SideBottom.png (partie étirée ou juxtaposée)
9 - BottomRight.png (partie fixe)
D - On créé les boutons system qui seront disposés dans la zone non-client, en utilisant un bitmap à 5-états qui représente les différents aspects (normal, enfoncé, inactif, focus, survol), on créé également le bouton par défaut.
E - On créé 2 petits bitmaps pour représenter le changement de focus sous forme de LED.C
On place chacun des 9 éléments du skin directement sur le fond de la fenêtre (form) en respectant le schéma ci-dessus et en utilisant le mode d'encrage approprié.
On ajoute les boutons système au bon endroit avec un encrage haut/drot.
On ajoute un control Panel qui servira de zone client et de conteneur pour tous les contrôles enfants de la fenêtre.
Region(s) dynamiques :
----------------------
C'est l'un des points les plus important, les régions qui délimitent les zones détourées de la fenêtre doivent pouvoir s'ajuster de façon dynamique au changement de taille de la fenêtre. Une bonne connaissance de l'API bas niveau est nécessaire pour y parvenir (voir BuildRegion et CombineRegion dans le code source).
Rendu de l'effet AERO-GLASS :
-----------------------------
Celui-ci est obtenu en combinant une fenêtre transparente (Layered) et une fenêtre fille de type popup que l'on maintent en dessous de la fenêtre principale pour délimiter une zone opaque comportant elle même des zones transparentes (regions).
Afin de maintenir la zone opaque en dessous de la zone transparente en TOUTES CIRSCONSTANCES on utilise l'API bas niveau SetWindowPos conjointement à MoveWindow.
J'ai passé beaucoup de temps sur cette partie du code, ainsi que sur la gestion dynamique des régions, je vous conseille de ne rien toucher si vous n'avez pas une parfaite connaissance de l'API Win32.
Ombre portée :
--------------
Le programme utilise l'API Win32 SetClassLong pour ajouter le style étendu CS_DROPSHADOW à la fenêtre principale.
J'espère que ces quelques explications vous aideront à mieux comprendre la marche à suivre pour créer de véritables fenêtres skinnées et non pas de simples splash screen basés sur une région statique.
NOUVEAUTES DE LA VERSION 2.00
-----------------------------
- SkinButton.cs
Cette classe prend en charge l'affichage et le gestion complète des boutons skinnés créés à partir d'un bitmap à 5 états.
Deux types de boutons sont supportés.
1 - Le mode "PushButton" (bouton dynamique)
Pour créer des boutons rectangulaire avec ou sans région, dont la taille peut être modifiée à volonté dans le "designer" de Visual Studio.
2 - Le mode "forme libre" (bouton statique)
Pour créer des boutons de n'importe quel forme, dont la taille correspond exactement à la dimension du resource bitmap à 5 états qui est utilisé.
- SkinCaption.cs
Cette classe est spécialement conçue pour skinner le caption d'une fenêtre.
Elle permet le déplacement par tirer déplacer, et détecte le double clic pour agrandir ou réduire la taille de la fenêtre.
- MsgBox_About.cs
Cette classe montre comment skinner une boîte de dialogue personnalisée avec ou sans ombre portée.
- SkinEngine.cs et Win32.cs
Ces deux classes ont été modifiées pour intégrer de nouvelles méthodes.
- Scintillement
Lors des redimensionnements, le programme gêle l'affichage de la zône client pour atténuer au maximum l'effet de clignotement (cf WM_SIZE).
- API Win32
Le programme est obligé de recourir massivement aux fonctions de L'API Win32 bas niveau,
car il n'est pas possible avec les seules fonctions DotNET de créer des fenêtres aussi personnalisées.
Vous trouverez sur http://www.zapsolution.com (lien "C# corner")
une liste actualisée de mes codes sources C# classés par thème.
Simulation de fenêtres AERO GLASS sous XP.
Le projet s'appuie exclusivement sur les possibilités offertes par VISUAL C# 2005 Express Edition.
Pour skinner la fenêtre, j'ai utilisé quelques unes des techniques utilisées dans WinLIFT et GDImage, plus une bonne pincée de code bas niveau Win32.
Les images du Skin sont réalisées avec zDraw et PhotoShop, dans l'esprit de Windows VISTA.
Ce que fait le code :
- Gestion d'un skin (gabarit) en mode 9-images.
- Gestion de zones transparentes et opaques au sein d'une même fenêtre.
- Gestion de l'ombre portée (drop shadow).
- Gestion de boutons de n'importe quel forme avec un bitmap a 5 états.
- Simulation complète du fonctionnement d'une fenêtre standard.
- Utilisation de code unsafe pour créer des régions à la volée.
- Utilisation de l'API bas niveau Win32.
Création d'un Skin en mode 9-images.
------------------------------------
Il y a une grande différence entre l'utilisation d'une forme détourée statique, et une fenêtre skinnée qui se comporte comme une fenêtre standard dont on peut modifier la taille à la volée.
Voici pas à pas la marche à suivre :
A - On commence par représenter la fenêtre skinnée dans un logiciel de dessin.
B - On utilise la couleur magenta (RGB 255,0,255) pour délimiter les zones transparentes du Skin (region).
C - On découpe le dessin en 9 parties distinctes, que l'on sauvegarde dans des fichiers individuels dans le répertoire "resources" de l'application, en respectant le schema ci-dessous :
+---+-----------------+---+
|.1.|........2........|.3.|
+---+-----------------+---+
|...|.................|...|
|.4.|........5........|.6.|
|...|.................|...|
+---+-----------------+---+
|.7.|........8........|.9.|
+---+-----------------+---+
1 - TopLeft.png (partie fixe)
2 - SideTop.png (partie étirée ou juxtaposée)
3 - TopRight.png (partie fixe)
4 - SideLeft.png (partie étirée ou juxtaposée)
5 - Center.png (partie étirée ou juxtaposée)
6 - SideRight.png (partie étirée ou juxtaposée)
7 - BottomLeft.png (partie fixe)
8 - SideBottom.png (partie étirée ou juxtaposée)
9 - BottomRight.png (partie fixe)
D - On créé les boutons system qui seront disposés dans la zone non-client, en utilisant un bitmap à 5-états qui représente les différents aspects (normal, enfoncé, inactif, focus, survol), on créé également le bouton par défaut.
E - On créé 2 petits bitmaps pour représenter le changement de focus sous forme de LED.C
On place chacun des 9 éléments du skin directement sur le fond de la fenêtre (form) en respectant le schéma ci-dessus et en utilisant le mode d'encrage approprié.
On ajoute les boutons système au bon endroit avec un encrage haut/drot.
On ajoute un control Panel qui servira de zone client et de conteneur pour tous les contrôles enfants de la fenêtre.
Region(s) dynamiques :
----------------------
C'est l'un des points les plus important, les régions qui délimitent les zones détourées de la fenêtre doivent pouvoir s'ajuster de façon dynamique au changement de taille de la fenêtre. Une bonne connaissance de l'API bas niveau est nécessaire pour y parvenir (voir BuildRegion et CombineRegion dans le code source).
Rendu de l'effet AERO-GLASS :
-----------------------------
Celui-ci est obtenu en combinant une fenêtre transparente (Layered) et une fenêtre fille de type popup que l'on maintent en dessous de la fenêtre principale pour délimiter une zone opaque comportant elle même des zones transparentes (regions).
Afin de maintenir la zone opaque en dessous de la zone transparente en TOUTES CIRSCONSTANCES on utilise l'API bas niveau SetWindowPos conjointement à MoveWindow.
J'ai passé beaucoup de temps sur cette partie du code, ainsi que sur la gestion dynamique des régions, je vous conseille de ne rien toucher si vous n'avez pas une parfaite connaissance de l'API Win32.
Ombre portée :
--------------
Le programme utilise l'API Win32 SetClassLong pour ajouter le style étendu CS_DROPSHADOW à la fenêtre principale.
J'espère que ces quelques explications vous aideront à mieux comprendre la marche à suivre pour créer de véritables fenêtres skinnées et non pas de simples splash screen basés sur une région statique.
NOUVEAUTES DE LA VERSION 2.00
-----------------------------
- SkinButton.cs
Cette classe prend en charge l'affichage et le gestion complète des boutons skinnés créés à partir d'un bitmap à 5 états.
Deux types de boutons sont supportés.
1 - Le mode "PushButton" (bouton dynamique)
Pour créer des boutons rectangulaire avec ou sans région, dont la taille peut être modifiée à volonté dans le "designer" de Visual Studio.
2 - Le mode "forme libre" (bouton statique)
Pour créer des boutons de n'importe quel forme, dont la taille correspond exactement à la dimension du resource bitmap à 5 états qui est utilisé.
- SkinCaption.cs
Cette classe est spécialement conçue pour skinner le caption d'une fenêtre.
Elle permet le déplacement par tirer déplacer, et détecte le double clic pour agrandir ou réduire la taille de la fenêtre.
- MsgBox_About.cs
Cette classe montre comment skinner une boîte de dialogue personnalisée avec ou sans ombre portée.
- SkinEngine.cs et Win32.cs
Ces deux classes ont été modifiées pour intégrer de nouvelles méthodes.
- Scintillement
Lors des redimensionnements, le programme gêle l'affichage de la zône client pour atténuer au maximum l'effet de clignotement (cf WM_SIZE).
- API Win32
Le programme est obligé de recourir massivement aux fonctions de L'API Win32 bas niveau,
car il n'est pas possible avec les seules fonctions DotNET de créer des fenêtres aussi personnalisées.
Conclusion :
Vous trouverez sur http://www.zapsolution.com (lien "C# corner")
une liste actualisée de mes codes sources C# classés par thème.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.