Silverlight 3 - Rotation d'un rectangle autour d'une ellipse

Question

J'ai un contrôle utilisateur Silverlight qui ressemble à une boussole. Je posterais l'image mais je suis un nouvel utilisateur et je ne peux pas poster d'images pour le moment. :(.

pense essentiellement d'une ellipse extérieure et à l'intérieur est une ellipse intérieure dans le centre w/un rectangle servant de « main » de la boussole. Je posté le xaml ci-dessous.

I Je veux déplacer la main de la boussole lorsque le bouton gauche de la souris est enfoncé et que la souris est déplacée.J'ai pensé que cela serait relativement facile en utilisant un RotateTransform mais je ne peux pas le comprendre.

A. Je ne peux pas comprendre comment définir les propriétés CenterX, CenterY et Angle de mon RotationTransform. e rectangle rouge) pour tourner autour de l'ellipse centrale (l'ellipse brune au milieu). B. Est-ce que c'est un moyen de ralentir le cycle de rotation? Donc, si quelqu'un tourne rapidement la souris, la main bouge mais pas aussi vite que l'utilisateur bouge la souris. Dit d'une autre façon est-ce un moyen de diminuer la sensibilité du mouvement de la souris?

Je posterais mon code mais c'est assez triste. :-). Je n'ai pas besoin d'une solution exacte juste un coup de pouce dans la bonne direction.

Voici le XAML

<Grid Margin="20,20,0,18" HorizontalAlignment="Left" Width="180"> 
     <Ellipse x:Name="outerEllipse" Stroke="Black"> 
      <Ellipse.Fill> 
       <LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0"> 
        <GradientStop Color="#3FF7F5F5" Offset="0.449"/> 
        <GradientStop Color="#FFF7F1F1" Offset="0.938"/> 
       </LinearGradientBrush> 
      </Ellipse.Fill> 
     </Ellipse> 
     <Ellipse x:Name="innerEllipse" Margin="16,14,16,13" Stroke="Black"> 
      <Ellipse.Fill> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FFD8BABA" Offset="0"/> 
        <GradientStop Color="#FFF7F1F1" Offset="1"/> 
       </LinearGradientBrush> 
      </Ellipse.Fill> 
     </Ellipse> 
     <Ellipse x:Name="knobEllipse" Margin="83,75,82,74" Stroke="Black" Fill="#FFCFB53B"/> 
     <TextBlock x:Name="textNorth" Height="17" Margin="83,14,83,0" TextWrapping="Wrap" Text="N" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/> 
     <TextBlock x:Name="textNorthEast" Height="21" Margin="0,34,25.666,0" TextWrapping="Wrap" Text="NE" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Width="30"> 
      <TextBlock.RenderTransform> 
       <CompositeTransform Rotation="45"/> 
      </TextBlock.RenderTransform> 
     </TextBlock> 
     <TextBlock x:Name="textSouth" Height="17" Margin="86,0,85,13" TextWrapping="Wrap" Text="S" VerticalAlignment="Bottom" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/> 
     <TextBlock x:Name="textNorthWest" Height="21" Margin="29,31,0,0" TextWrapping="Wrap" Text="NW" VerticalAlignment="Top" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left" Width="30"> 
      <TextBlock.RenderTransform> 
       <CompositeTransform Rotation="315"/> 
      </TextBlock.RenderTransform> 
     </TextBlock> 
     <TextBlock x:Name="textEast" HorizontalAlignment="Right" Margin="0,75,16,74" TextWrapping="Wrap" Text="E" Width="11" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/> 
     <TextBlock x:Name="textWest" HorizontalAlignment="Left" Margin="16,73,0,72" TextWrapping="Wrap" Text="W" Width="20" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua"/> 
     <TextBlock x:Name="textSouthEast" Margin="0,0,33.834,25.333" TextWrapping="Wrap" Text="SE" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Right" Height="21" VerticalAlignment="Bottom" Width="30"> 
      <TextBlock.RenderTransform> 
       <CompositeTransform Rotation="140"/> 
      </TextBlock.RenderTransform> 
     </TextBlock> 
     <TextBlock x:Name="textSouthWest" Margin="31.5,0,0,29.5" TextWrapping="Wrap" Text="SW" Foreground="#FFCC3131" FontSize="16" FontFamily="Book Antiqua" RenderTransformOrigin="0.5,0.5" UseLayoutRounding="False" d:LayoutRounding="Auto" HorizontalAlignment="Left" Width="30" Height="21" VerticalAlignment="Bottom"> 
      <TextBlock.RenderTransform> 
       <CompositeTransform Rotation="220"/> 
      </TextBlock.RenderTransform> 
     </TextBlock> 
     <Rectangle x:Name="rectanglePointer" Height="32" Margin="87,43,86,0" Stroke="Black" VerticalAlignment="Top"> 
      <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
        <GradientStop Color="#FFF38989" Offset="0"/> 
        <GradientStop Color="#FF914949" Offset="1"/> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

    </Grid> 

Merci pour votre aide

Answer 1

En jouant avec votre XAML, les éléments suivants rendent transformer l'origine sera à peu près produire ce que vous recherchez:

<Rectangle x:Name="rectanglePointer" Height="32" Margin="87,43,86,0" Stroke="Black" VerticalAlignment="Top" 
      RenderTransformOrigin="0.5,2.8">  
    <Rectangle.RenderTransform> 
     <RotateTransform Angle="180"/> 
    </Rectangle.RenderTransform> 
    <Rectangle.Fill> 
    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 
     <GradientStop Color="#FFF38989" Offset="0"/> 
     <GradientStop Color="#FF914949" Offset="1"/> 
    </LinearGradientBrush> 
    </Rectangle.Fill> 
</Rectangle> 

Le X décalage de 0,5 déplace la position X de rotation trop être aligné avec le centre du rectangle, et le décalage Y de 2,8 déplace la rotation pour centrer à peu près sur l'ellipse brune.

Je dis à peu près, car il n'est pas facile à calculer en fonction de votre disposition! Actuellement, vous utilisez des marges pour tout dimensionner, cela signifie que la largeur réelle de votre rectangle est la largeur de votre conteneur de la grille, moins les valeurs de marge gauche et droite. C'est beaucoup mieux si vous définissez la largeur/hauteur explicitement.

Mieux encore, utilisez des colonnes/cellules de grille pour créer la disposition souhaitée. Jetez un oeil à ce blog:

http://www.scottlogic.co.uk/blog/colin/2010/08/developing-a-very-lookless-silverlight-radial-gauge-control/

Vous pourriez probablement adapter ce contrôle à vos besoins.

Ralentir le mouvement de la souris, cela pourrait être difficile!

Je vous recommande de changer votre boussole en un contrôle utilisateur et de faire de l'angle de la boussole une propriété de dépendance. Une fois que vous avez une propriété de dépendance, vous pouvez l'animer à partir de code-behind.

Espérons que ça aide! Colin E.