WPF comment avoir un comportement flex pour mes boutons mes control ?

Concevoir une application WPF Responsive Design, ça parait facile, avec WPF. Et pourtant, il existe des choix de composants qui peuvent tout changer.

Pouvoir adapter la disposition d’un controle suivant la taille de la fenêtre

Ici, nous souhaitons mettre en place le comportement suivant :

Nous avons une suite de composants, et lorsque la taille de l’écran ne permet plus aux composants de tenir sur la même largeur, chaque composant passe un à un à la ligne au dessous.

C’est un comportement que l’on trouve souvent dans la mise en place de Responsive Design, du côté web, avec le div et le flex.

StackPanel, DockPanel ?

La première idée c’est d’utiliser un Stack Panel ou bien un Dock Panel.

Ils ont une disposition des enfants qui permet à priori cette idée :

Chaque composant s’ajoute après l’autre.

OK, mais si l’on réduit la largeur de la fenêtre, nous n’avons pas le comportement souhaité.

Découverte du WrapPanel

Et c’est là qu’intervient le WrapPanel.

C’est son but de gérer la disposition, et l’emplacement sur une ou plusieurs lignes.

Une fois mis en place, avec le code suivant par exemple :

Bingo ça fonctionne !