[WPF] Interagir avec la nouvelle barre des tâches de Windows 7 avec .NET 4.0

Le 1 juillet 2010 à 16:04

Au niveau de l’interface utilisateur, Windows 7 a introduit plusieurs nouveautés. L’une d’entre elle c’est la nouvelle barre des tâches qui permet de communiquer l’état de l’application à l’utilisateur (par exemple Windows Media Player et les boutons “précédent”, “lire/suspendre” et “suivant”) et aussi d’exposer les tâches courantes (les fichiers récemment utilisés… etc).

 

image  image  image  image

Avec WPF 4.0, nous pouvons modifier le comportement de la barre des tâches pour y ajouter des tâches ou des actions.

Le type Jumplist permet d’ajouter des tâches associés au bouton de l’application. Par exemple, nous voulons ajouter une tâche dans la Jumplist :

JumpTask task = new JumpTask
                    {
                        Title = "Exemple",
                        Arguments = "exemple.txt",
                        Description = "La description de l'exemple",
                        CustomCategory = "La catégorie de mon exemple !",
                        IconResourcePath = "notepad.exe",
                        ApplicationPath = "notepad.exe"
                    };

JumpList jumpList = new JumpList();
jumpList.JumpItems.Add(task);
jumpList.ShowRecentCategory = true;
jumpList.ShowFrequentCategory = true;
JumpList.SetJumpList(Application.Current, jumpList);

On peut aussi très bien le faire en XAML (dans App.xaml, enfin dans le point de départ de votre application) :

<JumpList.JumpList>
    <JumpList ShowFrequentCategory="True" ShowRecentCategory="True">
        <JumpTask Title="Exemple"
                  Description="La description de l'exemple"
                  Arguments="exemple.txt"
                  CustomCategory="La catégorie de mon exemple !"
                  ApplicationPath="notepad.exe"
                  IconResourcePath="notepad.exe"/>
    </JumpList>
</JumpList.JumpList>

Voici le résultat de notre exemple :

image

Vous avez certainement remarqué que dans Media Player (comme l’indique l’image plus haut) contient trois boutons et que vous pouvez directement interagir avec l’application depuis la barre des tâches pour effectuer des tâches “primaires” (suivant, précédent, arrêter) sur le lecteur. La mise en place de ce type de boutons n’est pas très compliqué, nous allons voir comment le faire en XAML.

Pour commencer, il faut ajouter le code suivant dans la fenêtre où l’on veut ajouter le bouton :

<Window.TaskbarItemInfo>
   <TaskbarItemInfo>
   </TaskbarItemInfo>
</Window.TaskbarItemInfo>

Ensuite, il faut ajouter à l’intérieur de la balise TaskBarItemInfo une collection de TumbButtonInfoCollection qui regrouperont nos ThumbButtonInfo (qui représentent les boutons) :

<Window.TaskbarItemInfo>
    <TaskbarItemInfo>
        <TaskbarItemInfo.ThumbButtonInfos>
            <ThumbButtonInfo Description="Hello" ImageSource="/about.png" />
        </TaskbarItemInfo.ThumbButtonInfos>
    </TaskbarItemInfo>
</Window.TaskbarItemInfo>

Maintenant, nous allons tout simplement ouvrir un MessageBox lors du click sur le bouton. Pour cela, nous avons l’évènement Click sur ThumbButtonInfo :

image

<ThumbButtonInfo Description="Hello" ImageSource="/about.png" 
  Click="ThumbButtonInfo_Click" />

Voici le résultat lors du click sur le bouton :

image

Nous allons maintenant voir comment indiquer l’avancement d’un traitement long. Quand vous copier un fichier, quand vous installez un logiciel… etc, l’état d’avancement du traitement peut être indiqué dans la barre des tâches.

image

Pour notre exemple, j’utilise un simple ProgressBar avec un Slider pour changer sa valeur facilement. Quand la valeur de la ProgressBar change, celle de la barre des tâches est mis à jour. Il va falloir utiliser les propriétés ProgressState et ProgressValue.

private void progressBar1_ValueChanged(object sender, 
             RoutedPropertyChangedEventArgs<double> e)
{
    double value =  e.NewValue;
    if (value != 0)
    {
        TaskbarItemInfo.ProgressValue = value / 100;
        TaskbarItemInfo.ProgressState = TaskbarItemProgressState.Normal;
    }
    else
    {
        TaskbarItemInfo.ProgressState = TaskbarItemProgressState.None;
    }
}

J’ai utilisé l’évènement ValueChanged pour pouvoir changer automatiquement la valeur de la barre des tâches quand la ProgressBar est mis à jour.

Cet article est un aperçu des différentes possibilités que nous offre la nouvelle barre des tâches de Windows Seven. Je vous invite à consulter MSDN pour avoir plus d’informations :).

Vous trouverez ici le projet exemple.

A bientôt !

[WPF 4.0] Changer le style de la sélection et le curseur d’insertion

Le 22 mai 2010 à 11:01

WPF 4.0 introduit plusieurs nouveautés. L’une d’elle permet de changer le style de la sélection des zones de textes et le style du curseur d’insertion.

Avant WPF 4.0, nos zones de textes ressemblaient à ceci :

image

Sélection de texte

image

Curseur d’insertion 

 

Maintenant il nous est possible de faire (ça me rappelle la sélection texte de Blend :)):

image

image

Pour la sélection de texte, la propriété SelectionBrush permet de changer la couleur de sélection, l’opacité… etc, cette propriété “DependancyProperty” est disponible dans chaque contrôle héritant de TextBoxBase.

Pour reproduire la sélection visible dans l’image ci-dessus :

<TextBox.SelectionBrush>
    <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
        <GradientStop Color="#00314f" Offset="0"/>
        <GradientStop Color="#9eb2c4" Offset="0.375"/>
        <GradientStop Color="#9eb2c4" Offset="0.375"/>
        <GradientStop Color="#00314f" Offset="1"/>
    </LinearGradientBrush>
</TextBox.SelectionBrush>

Ici j’utilise un LinearGradientBrush, mais vous pouvez aussi très bien passer par d’autres pinceaux, avec les propriétés BitmapCacheBrush, DrawingBrush, ImageBrush, RadialGradientBrush, un SolidColorBrush ou bien un VisualBrush.

image


CaretBrush est à peu de chose près la même propriété que SelectionBrush, la différence est que celui ci est prévu pour le curseur d’insertion.

<TextBox.CaretBrush>
    <SolidColorBrush Color="DarkGray"></SolidColorBrush>
</TextBox.CaretBrush>
Comme nous pouvons le constater, c’est très simple à mettre en place. Par contre, il faut faire attention à l’accessibilité de notre application.

A bientôt :)

Développez avec le Ribbon d’Office 2010 !

Le 15 avril 2010 à 10:42

En parcourant Codeplex, j’ai trouvé un control sympathique reproduisant l’interface utilisateur d’Office 2010. Bien sûr, il existe aussi le control de Microsoft mais il reproduit que l’interface d’Office 2007 et qu’en version CTP.
Ce control est vraiment simple et rapide, et en licence MS-PL ! :-)


Pour télécharger le control, rendez-vous sur sa page codeplex.

A bientôt,
Mathieu

WPF : traduisez vos applications en plusieurs langues avec LocBaml

Le 26 septembre 2009 à 18:30

Avec WPF, pour localiser une application, il faut passer par un outil externe : LocBaml (à télécharger ici). Cet outil, en ligne de commande, se révèle très simple d’utilisation. Sa fonction est de nous permettre d’extraire les ressources nécessaires à la traduction et de générer des assemblys satellites en plusieurs langues.

Pour cela, il va falloir procéder en plusieurs étapes.

1) Indiquer la langue par défaut du projet

Pour cela, il faut dans le fichier .csproj, définir une balise supplémentaire : UICulture. Avec cette balise, et après régénération du projet, il va nous créer l’assembly satellite par défaut.

Note : liste des cultures possibles (NLS) : http://www.microsoft.com/resources/msdn/goglobal/default.mspx

image_3

Ci-dessous, on peut remarquer qu’un nouveau dossier a été crée qui contient la ressource de la langue.

image_4

Jusque là, rien de bien compliqué (comme ce qui va suivre d’ailleurs), maintenant on va s’intéressé à l’outil LocBaml.

2) Extraire les ressources pour la traduction

Prenons le code XAML suivant :

<Grid>
    <Button x:Name="ButtonHello" Height="100" Width="100">Bouton (FR)</Button>
</Grid>

Dans l’état des choses, LocBaml ne peut pas extraire les ressource parce qu’il n’y a aucun ID au bouton (Name ne suffit pas). Pour cela, il faut implémenter la balise x:Uid. Pour cela, nous avons deux choix : l’implémenter manuellement, ou bien utiliser MSBuild. Par “sécurité”, je préfère MSBuild, ça me permet de ne rien oublié.

Utilisation de la commande MSbuild :

msbuild /t:updateuid LocBamlSample.csproj

A présent le projet est à jour avec les Uid.
Note : nous pouvons faire aussi un check avant de mettre à jour les Uid :

msbuild /t:checkuid LocBamlSample.csproj

Maintenant, voici le code XAML modifié avec les x:Uid, nous constatons qu’il a ajouté un Uid à Grid et à ButtonHello :

<Grid x:Uid="Grid_1">
    <Button x:Uid="ButtonHello" x:Name="ButtonHello" Height="100" Width="100">
        Bouton (FR)
    </Button>
</Grid>

Une fois cette étape de franchi, il nous reste qu’à utiliser LocBaml afin d’extraire les ressources (les Uid avec leur contenu) afin de les traduire dans une langue différente.

Pour cela, nous utilisons la commande suivante (note : nous pouvons exporter aussi en CVS, comme il le fait par défaut, mais avec Excel, nous pouvons avoir quelques soucis de double quote) :

LocBaml /parse LocBamlSample.exe /out:en.txt

Voici le fichier généré par l’outil :

image_5


A présent, nous avons notre fichier de ressource prêt à l’emploi pour une traduction. Pour notre exemple, je vais modifier le Content du bouton en “Button (EN)”.

Maintenant, on va générer notre assembly satellite qui nous permettra d’avoir notre application disponible en français et en anglais. Pour cela, il faut créer un dossier “en-US” qui accueillera la ressource en anglais dans le répertoire de l’application (ici Debug). Maintenant on va générer l’assembly, toujours avec LocBaml :

locbaml /generate fr-Fr\LocBamlSample.resources.dll /trans:en.txt /out:en-US /cul:en-US

Voilà, notre assembly satellite est crée et prêt à l’emploi.


3) Changer la langue de l’application

En principe, l’application change de langue selon la culture de l’utilisateur, mais voici la procédure à suivre pour changer de langue de l’application par code.
Dans le fichier App.cs, il suffit de changer la culture du thread en cours :

public partial class App : Application
{
    public App()
    {
        CultureInfo culture = new CultureInfo("en-US");
        Thread.CurrentThread.CurrentCulture = culture;
        Thread.CurrentThread.CurrentUICulture = culture;
    }
}

Voici le résultat à l’exécution :
image_6

 

Il a bien changé la langue de l’application.

Maintenant la question qui peut se poser, c’est comment faire pour les chaîne de caractères utiliser dans son code C# ?

4) Dictionnaire de ressources

Pour cela, il faut créer un dictionnaire de ressources dans le projet, qui nous permettra ensuite d’extraire les ressources (bien entendu, il faut ré-exécuter l’outil MSBuild et LocBaml pour avoir les modifications dans le fichier de ressource anglais) :

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:system="clr-namespace:System;assembly=mscorlib">

    <system:String x:Uid="Bonjour" x:Key="MessageBox">Bonjour tout le monde</system:String>
</ResourceDictionary>

Note : ne pas oublier de l’ajouter dans le fichier App.xaml (voir code source du projet).
J’ajoute en même temps, pour notre exemple, un MessageBox affichant le message “Bonjour tout le monde” au click sur le bouton :

private void ButtonHello_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show((string)Application.Current.Resources["Bonjour"]);
}

Maintenant, il faut à nouveau suivre les procédures évoquées plus haut concernant l’extraction et la génération de l’assembly satellite anglais afin de le mettre à jour.

image_7 

A présent, nous avons une application multilingue. Note : s’il manque une ressource (en-US par exemple), l’application sera exécuter dans la langue par défaut et dans notre cas le français.

A bientôt :)

Télécharger le code source ici.

A propos de l'auteur

Mathieu Perrein est Software Solutions Architect, Microsoft Student Partner de 2010 à 2012.

 

MSP

 

MSP

MSP

 MSPD

MCT

 

Facebook

 

Ce blog est strictement personnel et les opinions exprimées ici n'engagent donc que moi, et pas mon employeur.

Tags

Vous avez désactivé JavaScript ou bien vous possédez une ancienne version d'Adobe Flash Player. Téléchargez la dernière version de Flash Player.