Labo Dotnet Archive 2009 - 2010

Préambule

Bonjour,

Au cours de cet article, vous allez apprendre à réaliser une jolie petite fenêtre de notification qui apparaitra en bas à droite de votre écran, un peu comme celle de MSN lorsque quelqu'un se connecte.

Pour la rédaction de cet article, j'ai simplement ajouté un bouton dans ma fenêtre Window1 pour faire apparaitre notre notification.

Les utilités d'une telle fenêtre sont, par exemple, signaler une erreur à l'utilisateur ( champs de formulaire mal remplis, problème quelconque ...), afficher une confirmation à l'utilisateur (login réussi, opération effectuée etc ... ). Le but est d'afficher quelque chose sans que l'utilisateur ne soit géné et n'ai à cliquer dessus.

Voici une vidéo du rendu final :

Ajout d'une fenêtre

Pour commencer, on va créer une nouvelle fenêtre :

Clic droit sur votre projet, puis Add et New Item

Puis choississez "Window (WPF)

Ainsi pour faire apparaitre cette nouvelle fenêtre, il vous suffira de mettre cette ligne :

new Window_Notif().Show();

Note :  ShowDialog() nous ferais apparaître une fenêtre modale

Au clic d'un bouton, par exemple, ou lors d'un evènement précis.

Mise en forme de la fenêtre

Voici le code XAML de la fenêtre lors de sa création. Donc un simple carré blanc, avec un GRID à l'interieur pour pouvoir placer ses contrôles.

Nous allons donc réaliser un design rapide. J'ai tout d'abord redimensionné la fenêtre avec pour dimensions :

Height="160" et Width="300"

Bords arrondis et couleur

Pour commencer, nous allons réaliser des bords arrondis. Pour cela, il faut insérer une bordure à l'intérieur de la fenêtre (toujours) et autour du grid, car celui ci n'accepte pas les attribut que nous allons assigner à la bordure.

Et ensuite, il faut donc faire quelques ajouts :

Concernant la fênetre en elle même :

On permet la transparence ( et par ce fait, il n'y aura pas de bordure ) , on enlève la barre en haut ( agrandir, fermer et rétrécir) et nous choississons un fond transparent ( qui est blanc par défaut)

 AllowsTransparency="True" WindowStyle="None" Background="Transparent"

Concernant la bordure :

On veux des angles arrondis ( le coefficient arrondi plus ou moins, une valeur de type 10,10,0,0 aurait juste arrondi les bords supérieurs ), on veux une bordure de 1 pixel, de couleur noire. Puis une opacité de 0.9.

 CornerRadius="10" BorderThickness="1" BorderBrush="Black" Opacity="0.9"

Pour le fond, j'ai choisi un dégradé sur ton bleus, je l'ai réalisé sous Expression Blend, mais ce n'est pas compliqué à comprendre le principe, juste un peu plus fastidieux.

        <Border.Background>
            <LinearGradientBrush MappingMode="RelativeToBoundingBox" EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FFD1D5FF"/>
                <GradientStop Color="#FF919BE4" Offset="1"/>
                <GradientStop Color="#FDF9F9F9" Offset="0.368"/>
            </LinearGradientBrush>
        </Border.Background>

Ce qui nous donne ceci en codage et en apparence.

C'est un design assez simple et peu recherché mais le principal y est.

J'ai également un TextBlock pour voir à quoi cela ressembler :

L'utilisation d'un TextBlock au lieu d'un label est due au fait que l'argument TextWrapping n'existe pas pour ce dernier.

<TextBlock Margin="2,43,6,14" Name="textBlock1" TextWrapping="Wrap" TextAlignment="Center" Text="Ceci est une notification."/>

TextWrapping pour le retour à la ligne automatique, et TextAlignment pour le centrer.

Apparition et fermeture

A l'heure actuelle, notre notification s'ouvre un peu n'importe où et ne disparais pas, nous allons régler cela simplement en modifiant le code behind de celle ci.

Emplacement :

On veux la fenêtre en bas à droite de l'écran :

this.Top = SystemParameters.PrimaryScreenHeight - this.Height;
this.Left = SystemParameters.PrimaryScreenWidth - this.Width - 10;

J'ai légèrement décalé vers la gauche pour une meilleure lisibilité.

On la veux toujours au premier plan :

this.Topmost = true;

Texte de notification :

Il nous suffit d'ajouter un argument dans le constructeur puis d'assigner la valeur au text du TextBlock

        public Window_Notif(string message)
        {

...

textBlock1.Text = message;

      }

Ce qui nous donne cela :

Fermeture

Etant donné que la fenêtre n'a plus de bouton "Fermer" il faut donc régler ce détail. Pour ne pas gêner l'utilisateur lors de l'apparition du cadre, nous allons faire en sorte quelle se ferme toute seule au bout de quelques secondes, qu'elle reste ouverte quand on met le curseur dessus, et qu'elle se ferme quand on clic dessus.

Mise en place du timer

Le timer en question sera de type "DispatcherTimer"

Nous l'initialisons en dehors du constructeur :

DispatcherTimer messageTimer = new DispatcherTimer();

puis, à la fin de notre constructeur, nous choisissons le temps avant l'action et nous lançons le timer. J'ai choisi 3 secondes pour pouvoir lire le message.

messageTimer.Tick += new EventHandler(messageTimer_Tick);
messageTimer.Interval = new TimeSpan(0, 0, 0, 0, 3000);
messageTimer.Start();

Il nous reste donc à determiner l'action à faire lors du "tick" du timer. Donc, en l'occurence, toutes les 3 secondes.

void messageTimer_Tick(object sender, EventArgs e)
{
//Il faut stopper le timer sinon il continue toujours.
messageTimer.Stop();
this.Close();
}

Voila, le timer se ferme tout seul au bout de 3 secondes.

Votre code devrais donc ressembler à cela :

Actions avec la souris

Il nous faut alors récuperer les évènements de la souris pour fermer ou, au contraire laisser la fenêtre ouverte.

Dans la partie design :

On ajoute des paramètres à la suite des caractériques de notre fenêtre ( dans notre <Window > )

MouseEnter="MouseIn" MouseLeave="MouseOut" MouseLeftButtonDown="WindowClicked"

Retour dans le code behind :

On code les méthodes que nous avons nommées juste avant.

private void MouseIn(object sender, MouseEventArgs e)
{
    messageTimer.Stop();
}

private void MouseOut(object sender, MouseEventArgs e)
{
    messageTimer.Start();
}

private void WindowClicked(object sender, MouseButtonEventArgs e)
{
    this.Close();

}

Utilisation

Maintenant que tout est paramétré, un simple appel du constructeur avec .Show() fera apparaître la fenêtre.

new Window_Notif("Voici un exemple de notification ! ").Show();

Aller plus loin

On peux bien sûr beaucoup améliorer cette fenêtre en ajoutant des animations à l'ouverture ET à la fermeture ( plus compliqué ) faites à l'aide de Expression Blend. Et également modifier le constructeur pour prendre en argument un booléan qui determinera si le message est une erreur ou un simple message.

Voici une petite vidéo pour vous montrer ce qu'on peux faire.

Vous pouvez télécharger le projet fini : Window_Notif.zip (83,36 kb)

Je vous remercie pour votre interêt et vous souhaite un bon codage !

ADO.NET, C#, Visual Studio 2010, WPF notification, fenetre, msn, window, signal, design.net, ado.net, wpf, xaml, c#, outils, notification, trucs, tutoriel