WPF introduit la notion de routed event. Un routed event peut invoquer un handler définit à n'importe quel niveau dans la hiérarchie des éléments graphiques (qui héritent de UIElement) d'une application et ceci dans n'importe quel sens (montant ou descendant). Il existe trois types de routed event :
- Direct : ce mode correspond à ce qui existe dans le Framework .Net 2.0 et inférieur
- Tunneling : dans ce cas il y a tout d'abord appel des handlers de la racine de la hiérarchie puis l'évènement descend vers la source. On le préfixe avec preview par convention.
- Bubbling : l'appel a d'abord lieu au niveau du handler de la source puis l'évènement remonte vers la racine de la hiérarchie.
Avec ces informations supplémentaires l'exemple devient :
public partial class Window5 : Window
{
Button button1 = new Button();
Button button2 = new Button();
string content = "Hello";
DockPanel dockPanel = new DockPanel();
SolidColorBrush scb = new SolidColorBrush(Color.FromArgb(255, 0, 255, 0));
public Window5()
{
InitializeComponent();
dockPanel.Background = Brushes.Red;
dockPanel.LastChildFill = false;
this.AddChild(dockPanel);
button1.Background = scb;
button1.Height = 50;
button1.Width = 100;
button1.Content = content;
DockPanel.SetDock(button1, Dock.Bottom);
button2.Background = scb;
button2.Height = 50;
button2.Width = 100;
button2.Content = content;
button2.Click += new RoutedEventHandler(button2_Click);
DockPanel.SetDock(button2, Dock.Top);
this.dockPanel.Children.Add(button1);
this.dockPanel.Children.Add(button2);
}
private void button2_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("coucou");
}
}
Soit en XAML :
<Window x:Class="WpfApplication1.Window6"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window6" Height="300" Width="300">
<Window.Resources>
<Color A="255" R="0" G="255" B="0" x:Key="scb"/>
</Window.Resources>
<DockPanel Name="dockPanel" LastChildFill="False">
<DockPanel.Children>
<Button Name="button1" DockPanel.Dock="Bottom">
<Button.Background >
<SolidColorBrush Color="{StaticResource scb}" />
</Button.Background>
<Button.Width>100</Button.Width>
<Button.Height>50</Button.Height>
<Button.Content>Hello</Button.Content>
</Button>
<Button Name="button2" DockPanel.Dock="Top" Click="button2_Click">
<Button.Background>
<SolidColorBrush Color="{StaticResource scb}"/>
</Button.Background>
<Button.Width>100</Button.Width>
<Button.Height>50</Button.Height>
<Button.Content>Hello</Button.Content>
</Button>
</DockPanel.Children>
</DockPanel>
</Window>
L'exemple précédent représente le cas le plus simple et est fidèle à ce que nous connaissons depuis les premières versions du framework .Net.
Nous allons enrichir cet exemple afin de trapper l'évènement click sur n'importe quel bouton et animer la taille du bouton du bas à cette occasion. Pour cela nous allons ajouter un handler sur l'évènement click au niveau du
dockPanel :
dockPanel.AddHandler(Button.ClickEvent, new RoutedEventHandler(button_Click));
Vous noterez que:
- L'abonnement se fait avec la méthode AddHandler et non += car cela reviendrait à utiliser la mécanique spécifique à .Net 2.0 et inférieur.
- Qu'un évènement est qualifié par un nom du type NOM_TYPE.EVENEMENT (par exemple Button.Click) lorsqu'il est utilisé dans un élément graphique qui en n'est pas la source.
Pour l'animation nous allons nous appuyer sur les classes natives de .Net 3.5 :
this.RegisterName("button1", button1);
DoubleAnimation widthAnimation = new DoubleAnimation();
widthAnimation.To = 150;
widthAnimation.Duration = TimeSpan.FromSeconds(0.5);
widthAnimation.AutoReverse = true;
Storyboard.SetTargetName(widthAnimation, "button1");
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Button.WidthProperty));
clickStoryboard.Children.Add(widthAnimation);
Enfin il ne reste plus qu'à démarrer l'animation lors de l'évènement :
private void button_Click(object sender, RoutedEventArgs e)
{
clickStoryboard.Begin(this);
}
En XAML une version équivalente serait :
<Window x:Class="WpfApplication1.Window6"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window6" Height="300" Width="300">
<Window.Resources>
<Color A="255" R="0" G="255" B="0" x:Key="scb"/>
</Window.Resources>
<DockPanel Name="dockPanel" LastChildFill="False">
<DockPanel.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="button1"
Storyboard.TargetProperty="Width"
To="150"
Duration="0:0:0.5"
AutoReverse="True" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</DockPanel.Triggers>
<DockPanel.Children>
<Button Name="button1" DockPanel.Dock="Bottom">
<Button.Background >
<SolidColorBrush Color="{StaticResource scb}" />
</Button.Background>
<Button.Width>100</Button.Width>
<Button.Height>50</Button.Height>
<Button.Content>Hello</Button.Content>
</Button>
<Button x:Name="button2" DockPanel.Dock="Top" Click="button2_Click">
<Button.Background>
<SolidColorBrush Color="{StaticResource scb}"/>
</Button.Background>
<Button.Width>100</Button.Width>
<Button.Height>50</Button.Height>
<Button.Content>Hello</Button.Content>
</Button>
</DockPanel.Children>
</DockPanel>
</Window>
Dans cette version on voit apparaitre la notion de
trigger. Avec WPF il existe plusieurs types de triggers (EventTrigger, DataTrigger, MultiTrigger...) qui se déclenchent quand une ou plusieurs conditions deviennent vraies (
dans notre cas la levée de l'évènement Button.Click) afin d'exécuter une action (
dans notre cas animer la taille du bouton).
Si vous souhaitez suivre en direct les changements de propriétés et les levées d'évènements dans votre application je vous conseille le logiciel
Snoop. Ce dernier espionne toutes les variations qui peuvent apparaitre et vous permet même de modifier les paramètres de vos fenêtres :
Cet outil peut être très utile non seulement pour vous aider à comprendre le fonctionnement de XAML mais aussi pour débugger votre application.
Enfin avec WPF vous entendrez aussi parler de
WeakEvent . Ce genre d'évènement est utilisé quand on souhaite découpler la durée de vie de l'évènement et de la source (par exemple dans certains cas il est préférable de lier la durée de vie de l'évènement à celle du contrôle graphique qui l'utilise).