Dans un contrôle utilisateur WPF, comment puis-je spécifier les coordonnées relatives à la taille totale du contrôle, afin que le contrôle évolue correctement?

Question

J'ai créé ce simple bouton étendre le contrôle de l'utilisateur avec WPF:

                Expand button user control http://i31.tinypic.com/1zxqtyx.jpg

J'ai conçu la chose avec Width et Height les deux ensemble à 100 pour que je puisse voir ce que je Je suis en train de faire. Le XAML dépouillée de ce contrôle utilisateur est:

<UserControl x:Class="Foobar.ExpandButton" 
      ... 
      Width="100" Height="100"> 
    ... 
    <Border> 
     ... 
     <Canvas> 
      <Line ... X1="20" Y1="20" X2="50" Y2="50"/> 
      <Line ... X1="80" Y1="20" X2="50" Y2="50"/> 
      <Line ... X1="20" Y1="50" X2="50" Y2="80"/> 
      <Line ... X1="80" Y1="50" X2="50" Y2="80"/> 
     </Canvas> 
    </Border> 
</UserControl> 

Finalement, le bouton devrait pouvoir dispay correctement à différentes tailles, par exemple au 20 × 20 points. Cependant, en raison des coordonnées utilisées avec les Line éléments, je ne peux pas insérer ce contrôle utilisateur dans une autre fenêtre comme ceci:

<foobar:ExpandButton Width="20" Height="20" /> <!-- doesn't scale correctly! --> 

Je pourrait appliquer une LayoutTransform → ScaleTransform chaque fois que j'utilise l'élément à un autre taille de son 100 par défaut 100 × points, mais il doit y avoir une meilleure solution.

Comment puis-je définir les coordonnées des lignes de sorte qu'elles soient relatives à la taille totale du contrôle utilisateur?

Answer 1

Vous pouvez placer l'image dans une zone de visualisation ou à l'intérieur d'un VisualBrush et utiliser un rectangle pour le dessiner (définissez le pinceau sur la propriété Rectangle.Fill).

Encore mieux, convertissez votre image en un objet Dessin (remplacez Canvas par DrawingGroup et les formes à l'intérieur avec GeometryDrawing) et utilisez DrawingBrush pour le peindre.