Boussole avec une flèche WPF

Question

Je dois montrer une boussole avec une flèche dans un cercle

je le code suivant:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 

<Page.Resources> 
     <Pen x:Key="BlackPen1" Thickness="1" Brush="Black"></Pen> 
    </Page.Resources> 
    <Grid> 
     <!-- Image for the Circle --> 
     <Image> 
      <Image.Source> 
       <DrawingImage> 
        <DrawingImage.Drawing> 
         <GeometryDrawing Pen="{StaticResource BlackPen1}" > 
          <GeometryDrawing.Geometry> 
           <GeometryGroup> 
            <EllipseGeometry RadiusX="50" RadiusY="50"></EllipseGeometry> 
           </GeometryGroup> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingImage.Drawing> 
       </DrawingImage> 
      </Image.Source> 
     </Image> 
     <Path Grid.Row="1" Data="M15,0 L30,40 L0,40Z" Stroke="Black" Fill="Black" StrokeThickness="1" HorizontalAlignment="Center" /> 
     <Line Grid.Row="0" Y1="40" Y2="400" X1="0" X2="0" Stroke="Black" StrokeThickness="5" HorizontalAlignment="Center" /> 

    </Grid> 
</Page> 

Maintenant, je dois transformer toute cette boussole en fonction de l'angle d'entrée . Une chose que je sais est Si je déplace ma forme de flèche dans le type d'image que je peux former cette tans en utilisant la

suivante

<Image.RenderTransform> 
       <RotateTransform Angle="{Binding ElementName=root, Path=Angle}"/> 
</Image.RenderTransform> 

Mais je ne suis pas en mesure de tirer cette géométrie dans la balise image. Comment y parvenir?

Answer 1

Pourquoi auriez-vous besoin de faire pivoter le Ellipse? Sûrement que la flèche se déplace dans une boussole. Afin de rendre ce travail plus facile, pourquoi ne créez-vous pas la flèche dans un seul Path, au lieu d'utiliser en plus un élément Line? Vous pouvez définir la même flèche avec une rotation comme celle-ci:

<Path Grid.Row="1" Data="M15,0 30,40 18,40 18,400 12,400 12,40 0,40Z" Stroke="Black" 
    Fill="Black" StrokeThickness="1" HorizontalAlignment="Center" 
    RenderTransformOrigin="0.5,0.5"> 
    <Path.RenderTransform> 
     <RotateTransform Angle="{Binding Angle, ElementName=root}" /> 
    </Path.RenderTransform> 
</Path> 

Answer 2

Vous pouvez appliquer la rotation à l'ensemble de la grille contenant toutes vos commandes. Ne pas oublier de mettre RenderTransformOrigin="0.5,0.5" sur l'élément que vous faites pivoter afin qu'il tourne autour du centre et non le coin supérieur gauche.

Ou vous pouvez ajouter une RotationTransform à chacun des éléments Path, Line et Ellipse. Cependant, dans ce cas, les centres de rotation seront probablement différents pour chacun et cela le rendra plus compliqué.