Voilà une compilation de divers trucs et astuces WPF récoltés aux quatre coins du web, ainsi que la présentation d’outils et de composant pouvant améliorer grandement le développement de vos applications.
Comportement
Comment se lier à une propriété définie dans les settings ?
Il est bien pratique d’utiliser les Settings disponibles depuis Visual Studio 2005 pour définir des paramètres qui seront accessibles directement depuis le code, après que leur valeur ait été instanciée au démarrage de l’application.
Seulement, on pourrait se demander comment accéder à ces paramètres dans le code XAML et il s’avère que cela n’est pas très compliqué. Après avoir définit vos paramètres:
Il suffit de mapper un namespace XML pointant vers le namespace CLR définissant vos propriétés:
xmlns:properties="clr-namespace:TestSettings.Properties"
Puis, dans votre code XAML, accéder à votre propriété en utilisant la syntaxe suivante:
x:Static properties:Settings.Default
Ce qui donne, au final, un code ressemblant à ceci:
<ListBox x:Name="lb"
ItemsSource="{Binding Source={x:Static properties:Settings.Default}, Path=Names}" />
Simple et efficace.
Auteur : Thomas Lebrun
Site : http://blogs.codes-sources.com/tom/
Héritage de la classe Window :
Imaginons que nous avons comme projet de faire une jolie application WPF, avec des fenêtres personnalisées. Problème : on supprime la barre de titre Windows, donc la possibilité de déplacer la fenêtre en la cliquant et la déplaçant. Il faut donc implémenter ce comportement à toutes nos fenêtres.
En windows form, on pouvait très facilement faire une fenêtre mère dont hériterait des fenêtres enfant afin d’avoir par exemple le même comportement.
Mais en WPF, on ne peut pas le faire aussi simplement.
En effet, si on fait hériter notre classe Window1 de notre fenêtre mère MotherWindow dans le fichier Window1.xaml.cs comme ceci :
public partial class Window1 : MotherWindow
Le compilateur va nous retourner une erreur, car l’élément racine du fichier xaml correspondant précise la classe mère dont doit hériter la classe Window1.
Il suffit donc de le changer lui aussi, en définissant aussi un espace de nom dans le fichier xaml :
<local:MotherWindow
x:Class="Heritage.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Heritage"
Title="Window1" Height="300" Width="300">
<Grid>
</Grid>
</local:CloseMove>
Sans oublier bien sûr de préciser parmi les espaces de noms que local correspond à notre assembly.
Auteur : Jérémie Bertrand
Site : http://blog.developpez.com/laedit/
Comment être notifié (et réagir) lorsqu’une DependencyProperty interne à WPF est modifiée
Lorsque l’on définit ses propres DependencyProperties, on a la possibilité de définir une Callback qui est appelée lorsque la propriété est modifiée.
Cependant, on peut vouloir faire la même chose, au niveau d’un CustomControl, sur une DependencyProperty définie sur l’une des classes disponibles dans le framework WPF (ActualWidthProperty, HeightProperty, etc…)
Pour cela, il est nécessaire d’utiliser la syntaxe suivante:
public MonControl()
{
DependencyPropertyDescriptor.FromProperty(WidthProperty,
typeof(MonControl)).AddValueChanged(this, delegate
{
MessageBox.Show("La valeur a été modifiée !");
});
}
Comme vous pouvez le voir, on fait appel à la méthode FromProperty de la classe DependencyPropertyDescriptor qui permet d’accéder au PropertyDescriptor (métadonnées) de la propriété spécifiée (WidthProperty dans notre cas). Ensuite, on appelle la méthode AddValueChanged en lui passant, tout simplement, un délégué vers la méthode qui sera invoquée lorsque la propriété sera modifiée.
Auteur : Thomas Lebrun
Site : http://blogs.codes-sources.com/tom/
Comment assigner une ressource dynamique depuis le code-behind ?
Dans le cadre d’un développement WPF, on est très souvent amené à assigner des ressources à des contrôles/composants de l’interface graphique. Lorsque l’on fait cet assignement en XAML, rien de plus simple: il suffit d’utiliser la MarkupExtension StaticResource (ou DynamicResource, si la ressource est amené à être modifiée).
<Button Content="Find Position" Click="Button_Click" Background="{DynamicResource brush}" />
Mais qu’en est-il des cas où l’on souhaite faire ce genre de chose depuis le code behind ? Dans ce cas, il convient d’utiliser la méthode SetResourceReference (http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.setresourcereference.aspx):
<Window.Resources>
<SolidColorBrush x:Key="brush" Color="Red" />
</Window.Resources>
<Button x:Name="btn"Content="Find Position" Click="Button_Click" />
this.btn.SetResourceReference(BackgroundProperty, "brush");
Comme vous pouvez le voir, c’est relativement simple à mettre en place: on définit la ressource, on définit le contrôle puis, dans le code behind, on appelle la méthode SetResourceReference en lui passant en paramètres:
- la Dependency Property sur laquelle on va appliquer la ressource
- le nom de la ressource
Auteur : Thomas Lebrun
Site : http://blogs.codes-sources.com/tom/
Découvrons la collection CompositeCollection
Je dois reconnaitre que j'ai découvert très récemment cette collection mais elle semble être bien pratique.
En effet, la CompositeCollection vous permet de mélanger plusieurs collections et éléments de façon à ce qu'ils soient affichés comme une seule et même liste.
Par exemple, il arrive souvent que l'on rencontre des gens se demandant comment rajouter un élément vide dans une ComboBox qui est bindée à une ObservableCollection. Pour cela, la première idée serait de travailler directement sur l'ObservableCollection utilisée comme source de données.
L'autre technique est de passer par cette fameuse CompositeCollection soit:
<ComboBox x:Name="TheCombo" DisplayMemberPath="Name">
<ComboBox.ItemsSource>
<CompositeCollection>
<CollectionContainer Collection="{Binding Source={StaticResource TheItems}}" />
<ComboBoxItem Content="" />
</CompositeCollection>
</ComboBox.ItemsSource>
</ComboBox>
C'est simple et efficace mais attention tout de même à ne pas en abuser, afin de conserver un code un tant soit peu correctement organisé.
Auteur : Thomas Lebrun
Site : http://blogs.codes-sources.com/tom/
Localiser un composant en C#
Imaginons la fenêtre XAML suivante :
<Windowx:Class="Exemple1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Exemple1"
Title="Exemple1" Height="Auto" Width="Auto">
<StackPanel>
<ListView x:Name="Liste">
<ListViewItem Content="Test 01" />
<ListViewItem Content="Test 02" />
<ListViewItem Content="Test 03" />
</ListView>
</StackPanel>
</Window>
Comment faire pour récupérer la position de Liste en C# ?
Dans notre code nous allons faire appel au composant primaire Canvas :
Double posX = Canvas.GetLeft(this.Liste) ;
Double posY = Canvas.GetTop(this.Liste) ;
Le tour est joué.
Bien évidement les fonctions setLeft et setTop permettront de repositionner le composant.
Auteur : UNi
Blog : http://blog.developpez.com/index.php?blog=167
Scroll + Drag&Drop avec une listbox
Voici une petite astuce pour pouvoir dans une même listbox utiliser la barre de scroll avec la souris et utiliser le drag&drop (je vous renvoi à l'excellent article de Thomas Lebrun pour la mise en place du drag&drop http://blogs.developpeur.org/tom/archive/2006/06/08/21434.aspx)
Le principe est simple
J'ai ma listbox dans laquelle j'ai implémenté le drag&drop
<ListBox MouseMove="MouseMoveMethode" AllowDrop="True"
SelectionMode="Extended" Width="440" Height="250"
x:Name="LBIVueFile" ItemsSource="{Binding}"
Background="#FFA9C8FF" />
Si je souhaite utiliser la barre de scroll avec la souris il va croire que je suis en train d'effectuer un drag&drop ce qui n'est pas du tout le cas. Pour éviter d'avoir ce problème il suffit d'entourer la listbox avec un scrollviewer, ce qui nous donne ceci :
<ScrollViewer CanContentScroll="True" Width="440" Height="230"
VerticalScrollBarVisibility="Auto">
<ListBox MouseMove="MouseMoveMethode" AllowDrop="False"
SelectionMode="Extended" Width="440" x:Name="LBIVueFile"
ItemsSource="{Binding}" Background="#FFA9C8FF" />
</ScrollViewer>
Auteur : UNi
Site : http://blog.developpez.com/index.php?blog=167
Animation
Storyboard :
Il arrive parfois que l’on veuille faire référence à une propriété d’un enfant d’une Window, d’une Page ou d’un UserControl dans un Storyboard situé dans les ressources de celui-ci.
Pour y arriver, il suffit de préciser l’attribut Storyboard.TargetName avec le nom x:Name de l’enfant et ensuite de préciser sa propriété comme on le ferait normalement dans l’attribut Storyboard.targetProperty d’une balise AnimationUsingKeyFrames :
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00"
Storyboard.TargetName="border" Storyboard.TargetProperty="Background">
En ayant bien sûr précisé le x:Name de la Border :
Et pour appeler un Storyboard défini dans un fichier XAML à partir du code, il suffit d’utiliser la méthode beginStoryboard avec le nom du Storyboard :
this.BeginStoryboard((Storyboard)this.FindResource("myStoryboard"));
Au final, rien de bien compliqué en soit, mais que l'on peut chercher durant un moment si on ne le sait pas.
Auteur : Jérémie Bertrand
Site : http://blog.developpez.com/laedit/
Interface graphique
Comment faire pour masquer un contrôle, plutôt que de le désactiver, si la commande qui lui est liée est désactivée ?
Pour cela, on va commencer par déclarer un petit converter, BooleanToVisibilityConverter. Attention, pas besoin de le redéfinir soi-même: celui-ci est disponible de base dans WPF.
<BooleanToVisibilityConverter x:Key="convVisibility" />
Ensuite, il ne reste plus qu’à faire un peu de binding sur la propriété Visibility du contrôle, par rapport à SA propriété IsEnabled:
<Button Content="Supprimer" Command="ApplicationCommands.Delete"
Visibility="{Binding IsEnabled, RelativeSource={x:Static RelativeSource.Self}, Converter={StaticResource convVisibility}}"/>
Simple mais terriblement efficace !
Auteur : Thomas Lebrun
Site : http://blogs.codes-sources.com/tom/
Afficher toutes les couleurs disponible avec WPF
Pour cela c’est très simple. On va d’abord déclarer une méthode qui va nous servir à récupérer les couleurs :
public PropertyInfo[] GetColors(Type type)
{
return type.GetProperties();
}
Et ensuite, on l’utilise en tant que ObjectDataProvider et on affiche les couleurs dans une combobox :
<Window.Resources>
<ObjectDataProvider x:Key="colors" MethodName="GetColors" ObjectType="{x:Type local:Tools}">
<ObjectDataProvider.MethodParameters>
<x:Type TypeName="Colors"/>
</ObjectDataProvider.MethodParameters>
</ObjectDataProvider>
<DataTemplate x:Key="dTemplate">
<StackPanel Orientation="Horizontal">
<Rectangle Width="16" Height="12" Fill="{Binding Name}" Stroke="#FF000000"/>
<TextBlock Margin="1" Text ="{Binding Name}" Foreground="{Binding Name}" />
</StackPanel>
</DataTemplate>
</Window.Resources>
<Grid>
<ComboBox ItemsSource="{Binding Mode=OneWay, Source={StaticResource colors}}"
ItemTemplate="{DynamicResource dTemplate}" Margin="50,50,50,0" VerticalAlignment="Top" />
</Grid>
N'oubliez pas de mettre le bon namespace.
Auteur : Nicolas Biedermann
Blog : http://blogs.developpeur.org/bidou/
Site : http://www.nicolasbiedermann.ch
Afficher toutes les fonts disponibles avec leurs représentations
Il vous suffit de placer ce code XAML dans votre fenêtre :
<Grid>
<ComboBox Width="120" Height="25" x:Name="FontSelector" ItemsSource="{x:Static Fonts.SystemFontFamilies}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" FontFamily="{Binding}"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
</Grid
Auteur : Nicolas Biedermann
Blog : http://blogs.developpeur.org/bidou/
Site : http://www.nicolasbiedermann.ch
Utilisez le ribbon dans vos applications WPF
Vous avez déjà surement remarqué le ruban dans les applications office :
Mais comment faire pour intégrer rapidement le même composant dans vos applications wpf ?
Microsoft vient de mettre à disposition une librairie à télécharger ici.
Comment l’utiliser ? Tout d’abord insérer le projet téléchargé ci-dessus et ajouter une référence à votre projet initial.
Ensuite il suffit d’utiliser la librairie:
- Déclaration de l’espace de nom
xmlns:c="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
- Charger l’un des nombreux thèmes graphiques présents dans la librairie:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary x:Name="rdTheme" Source="/RibbonControlsLibrary;component/Themes/Office2007Silver.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
- Puis utilisez les composants, par exemple:
<c:Ribbon x:Name="mainRibbon" />
Auteur : Julien Dollon
Site : http://blogs.dotnet-france.com/juliend
Créer un effet de transparence en WPF
A l’occasion de la création d’un simple menu, j’ai souhaité avoir un effet de transparence sur mes boutons:
Nous allons voir comment réaliser l’effet de transparence.
Tout d’abord voici à quoi ressemble le template, très basique, des boutons ci-dessus:
<StackPanel OpacityMask="{x:Null}" Cursor="Hand"
x:Name="stackPanel" RenderTransformOrigin="0.5,0.5">
<Grid x:Name="MaGrid" Height="50" Width="Auto">
<ContentPresenter />
</Grid>
</StackPanel>
Je vais ensuite rajouter un rectangle en dessous de ma grid, y insérer un virtualbrush qui copiera le contenu de ma grid. Puis j’appliquerai une transformation à mon rectangle afin de le retourner et lui donner un effet de transparence.
Voici le code à ajouter entre </Grid> et </StackPanel>
<Rectangle Height="50" RenderTransformOrigin="0.5,0.5">
<Rectangle.OpacityMask>
<LinearGradientBrush SpreadMethod="Reflect" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#00000000" Offset="0"/>
<GradientStop Color="#B3FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Rectangle.OpacityMask>
<Rectangle.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<VisualBrush Visual="{Binding ElementName=MaGrid}" Stretch="Uniform"/>
</Rectangle.Fill>
</Rectangle>
Bon rien de bien compliqué mais toujours bon de revoir ses classiques.
Auteur : Julien Dollon
Site : http://blogs.dotnet-france.com/juliend
Changer le curseur de vos applications
Il suffit de créer un Canvas contenant votre nouveau curseur (une image par exemple) intégré au canvas principal.
Mettre l’utilisation du curseur par défaut à None:
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Cursor.Page" Width="640" Height="480">
<Canvas x:Name="LayoutRoot" Background="#FFFFFFFF"
MouseEnter="LayoutRoot_MouseEnter"
MouseMove="LayoutRoot_MouseMove" Cursor="None">
<Canvas Height="20" Width="20" x:Name="NewCursor" Visibility="Visible"
Canvas.Left="310" Canvas.Top="230">
<Image Height="Auto" Width="20" Source="newcursor.png" Stretch="Fill"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Canvas>
</Canvas>
</UserControl>
Et s’abonner aux événements MouseEnter, MouseLeave:
private void LayoutRoot_MouseEnter(object sender, MouseEventArgs e)
{
PointMousePoint=e.GetPosition(this);
Canvas.SetLeft(NewCursor,MousePoint.X);
Canvas.SetTop(NewCursor,MousePoint.Y);
}
private void LayoutRoot_MouseMove(object sender, MouseEventArgs e)
{
PointMousePoint=e.GetPosition(this);
Canvas.SetLeft(NewCursor,MousePoint.X);
Canvas.SetTop(NewCursor,MousePoint.Y);
}
private void LayoutRoot_MouseEnter(object sender, MouseEventArgs e)
{
Point MousePoint = e.GetPosition(this);
Canvas.SetLeft(NewCursor, MousePoint.X);
Canvas.SetTop(NewCursor, MousePoint.Y);
}
Auteur : julien Dollon
Site : http://blogs.dotnet-france.com/juliend
Astuces sur les ListBoxItems
Par défaut, lorsque vous allez vous positionner sur un des ListBoxItem, sa couleur de fond passera en bleu de la même façon que si votre application perd le focus, les ListBoxItem sélectionnés auront un font gris pâle :
Pour éviter ce genre de comportement, vous allez devoir redéfinir deux Brush système qui sont utilisé automatiquement lorsque le ListBoxItem est sélectionné. Vous pouvez faire cette manipulation dans les ressources du style de vos ListBoxItem :
<Style.Resources>
<SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Transparent"/>
<SolidColorBrush x:Key="{x:Static SystemColors.ControlsBrushKey}" Color="Transparent"/>
</Style.Resources>
La couleur HighlightBrushKey est le bleu affiché lorsque l’item est sélectionné (ici passé à transparent) et ControlBrushKey est le gris pâle de l’image de droite si dessus (ici passé à transparent également). Dès lors, deuxième problème résolu !
Un autre problème qui survient lorsque vous naviguez dans vos ListBoxItem à l’aide du clavier, ceux-ci s’entourent d’une bordure noire en pointillés. Pour éviter l’apparition de celle-ci, il vous suffit tout simplement de modifier le style FocusVisualStyle de votre ListBoxItem ou de le mettre à null :
<ListBoxItem FocusVisualStyle="Null" />
Bien sûr, ces astuces peuvent être utilisées avec n’importe quel contrôle.
Auteur : Julien Corioland
Site : http://blogs.dotnet-france.com/julienc
Outils et composants
Word 2007 XAML Generator : permet de générer du XAML à partir de document Word. Très pratique pour inclure de longs textes dans une application.
Site : http://www.codeplex.com/Word2007ToXaml
Gratuit
FluidKit : c'est une bibliothèque de composants WPF assez variés, en passant d'une GlassWindow à un DragDropManager ou un ElementFlow (comme iTunes pour présenter les albums).
Site : http://www.codeplex.com/fluidkit/
Gratuit
XAML Templates : c'est un site qui propose à la vente des templates XAML, afin que les développeurs ne s'embêtent plus avec le design de leur application.
Il y a un sample gratuit qui est d'assez bonne qualité.
Site : http://www.xamltemplates.net/
Payant
IPod Controls : c’est une librairie de contrôle de style "IPod".
Site : http://www.codeplex.com/WpfIpodControls
Gratuit
BookControls : il permet de simuler un livre, en WPF et en silverlight. On peut mettre n'importe quel composant sur ses pages, il les gère.
Site : http://www.codeplex.com/wpfbookcontrol
Gratuit
Pixels Shaders Effect : Librairie d'effets sur des images (entres autres Magnify, Monochrome, Pixelate, Ripple, Swirl, Tone, Toon, and ZoomBlur ) et d'effets de transitions.
Site : http://wpffx.codeplex.com/
Gratuit
WPF Transition Framework (WTF) : une librairie de transition en cours de développement, seulement 4 transitions sont disponibles pour le moment (BlurIn/BlurOut et FadeIn/FadeOut). Mais elle propose le choix de la qualité de l'animation.
Site : http://wtf.nukeation.com/
Gratuit
XCeed Datagrid : XCeed propose une datagrid en version 'express' (gratuit).
Site : http://xceed.com/Grid_WPF_Intro.html
Gratuit
BlackLight : une librairie de contrôles WPF/Silverlight très bien fournis.
Site : http://www.codeplex.com/blacklight
Gratuit
Mole : c'est un visualiseur du debugger qui permet de parcourir le Visual Tree d'une fenêtre ou page WPF. On peut voir toutes les valeurs des propriétés, et même l'origine de la valeur (par défaut, style, binding...), changer les valeurs, voir un aperçu visuel de chaque contrôle.Très pratique pour déboguer des templates.
Site : http://karlshifflett.wordpress.com/mole-for-visual-studio/
Gratuit
AvalonDock : c’est un système de layout permettant d'avoir des onglets "déplaçables", des fenêtres flottantes et des panneaux ancrables/masquables automatiquement.
Site : http://avalondock.codeplex.com/
Gratuit
Visifire : c’est une librairie de contrôles open source WPF/Silverlight de visualisation de données. Elle propose toutes sortes de graphiques, animés ou non.
Site : http://www.visifire.com/
Gratuit
Odyssey : c’est une librairie de contrôles WPF proposant entre autres une OutlookBar, une BreadCrumBar (comme l’explorer de vista), une ExplorerBar ou encore un Ribbon.
Site : http://odyssey.codeplex.com/
Gratuit
Et pour ceux qui manqueraient encore de réponses, voici une excellente FAQ sur WPF et Silverlight sur le site CodeProject :
http://www.codeproject.com/KB/WPF/WPFSilverLight.aspx
9a265141-1113-4ddb-924b-2bbe249d9451|5|4.2
C#, WPF
wpf, c#, xaml, trucs, astuces, outils, composants