La meilleure façon d'écrire un contrôle de jauge personnalisé dans WPF?

Question

Je dois écrire un contrôle de jauge dans WPF pour un projet au travail. Par contrôle de jauge, je veux dire quelque chose qui s'apparente à un compteur de vitesse de voiture traditionnelle: une face circulaire avec des numéros et des tiques autour de la circonférence, et une aiguille pointant vers la valeur actuelle. Bien que je puisse obtenir que mon employeur achète un contrôle tiers, ou même en trouver un gratuitement, j'aimerais toujours l'écrire moi-même, par curiosité plus que toute autre chose. Ma première pensée a été de «skinner» un contrôle existant en utilisant un modèle, quelque chose comme un ProgressBar par exemple, car il a des propriétés Minimum, Maximum et Value. Cependant, je ne pense pas que cela m'offre la flexibilité dont j'ai besoin. Je souhaite animer l'aiguille qui pointe vers la valeur actuelle, de sorte que lorsque la valeur de la jauge change, l'aiguille passe de l'ancienne valeur à la nouvelle valeur. Je me suis dit que la manière la plus simple de le faire serait d'avoir une sorte de forme ou de géométrie représentant l'aiguille, puis d'appliquer un RotateTransform du nombre de degrés approprié pour que l'aiguille pointe vers la valeur correcte. La propriété To de l'animation est définie sur la propriété 'degrees degrees' via la liaison.

Il me semble qu'il ya trois approches de base que je pouvais prendre:

Utilisez un FrameworkElement personnalisé pour représenter la jauge toute
je pouvais tirer de FrameworkElement, remplacer la méthode OnRender, puis utilisez le DrawingContext dessiner à la fois la face de la jauge et l'aiguille. Cela signifierait que je ne pourrais plus animer directement l'aiguille en utilisant un RotateTransform, mais que je devrais redessiner la jauge entière chaque fois que la valeur change. Cela me semble inefficace, car la face de la jauge représente la plus grande partie du code de dessin, mais elle changerait très rarement. Cependant, cette approche est la plus légère en termes de nombre d'éléments utilisés.

Utilisez deux FrameworkElements personnalisés, un pour le visage et un pour l'aiguille
Je penche actuellement à cette approche. Un élément représenterait le visage, l'autre l'aiguille. Cela me permettrait de cibler l'élément d'aiguille avec le RotateTransform. Le contrôle de la jauge se composerait alors de trois éléments: le visage, l'aiguille et un conteneur de panneau pour les contenir tous les deux (c'est-à-dire la toile, la grille, peu importe). Donc, trois éléments au lieu d'un, donc pas aussi léger que la première approche.

Utilisez DrawingVisuals pour dessiner le visage et l'aiguille
J'ai aussi lu la classe DrawingVisual, mais je suis un peu confus quant à pourquoi quelqu'un utiliserait ce par opposition à tirer de FrameworkElement et OnRender primordial, étant donné que DrawingVisual doit être hébergé dans un FrameworkElement personnalisé de toute façon. Il semblerait que cette approche n'offre aucun avantage par rapport à la seconde approche, et nécessiterait plus de code, mais peut-être qu'il me manque quelque chose.

Toute idée ou conseil concernant l'approche que les gens pensent la meilleure et pourquoi serait la bienvenue!

Answer 1

Personnellement, je recommande de faire un CustomControl en utilisant la deuxième approche. À moins que vous ne montriez en même temps plus de 1000 jauges, vous ne remarquerez pas l'élément supplémentaire dans votre arbre visuel et je pense que vous trouverez qu'il est beaucoup plus facile à faire et à maintenir.

Answer 2

Vous pouvez simplement définir un contrôle de curseur et y introduire des valeurs. Vous devriez être capable de faire ressembler un curseur à n'importe quel type de jauge dont vous avez besoin.