Silverlight 3 - Вращение прямоугольника вокруг эллипса

Question

У меня есть пользовательский элемент управления Silverlight, который выглядит как компас. Я бы опубликовал изображение, но я новый пользователь и не могу отправлять изображения. :(.

По существу думать о внешнем эллипсе и на внутренней стороне является внутренним эллипсом в центре ж/прямоугольник, выступающий в качестве «стороны» компаса. Я разместил XAML ниже.

I хотите переместить руку компаса », когда левая кнопка мыши опущена, и мышь перемещена. Я думал, что это будет относительно легко с помощью RotateTransform, но я не могу понять это.

Проблемы, с которыми я сталкиваюсь

A. Я не могу понять, как установить свойства CenterX, CenterY и Angle моего RotationTransform. Я хочу, чтобы рука (th красный прямоугольник), чтобы вращаться вокруг центрального эллипса (коричневый эллипс посередине).

B. Является ли это способом замедления вращения? Поэтому, если кто-то быстро вращает мышь, рука движется, но не так быстро, как пользователь перемещает мышь. С другой стороны, это способ уменьшить чувствительность движения мыши?

Я бы опубликовал свой код, но это довольно грустно. :-). Мне не нужно точное решение, просто подталкивание в правильном направлении.

Вот 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> 

Спасибо за вашу помощь

Answer 1

играя с XAML, следующие визуализации преобразования координат будет примерно производить то, что вы после:

<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> 

X смещение на 0,5 перемещение. Положение X также выравнивается с центром прямоугольника, а смещение Y 2,8 перемещает поворот в центр примерно на коричневый эллипс.

Я говорю грубо, потому что это непросто рассчитать на основе вашего макета! В настоящее время вы используете поля для увеличения размера, это означает, что фактическая ширина вашего прямоугольника равна ширине вашего контейнера сетки, за вычетом значений левого и правого полей. Это намного лучше, если вы установите ширину/высоту явно.

Лучше все еще использовать столбцы/ячейки сетки, чтобы создать желаемый макет. Взгляните на этом блоге:

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

Вы могли бы адаптировать этот контроль с вашими потребностями.

Замедление движения мыши, это может быть сложно!

Я бы рекомендовал изменить свой компас на пользовательский элемент управления и сделать угол компаса зависимым. Когда у вас есть свойство зависимостей, вы можете анимировать его из кода.

Надеюсь, что это поможет!

Colin E.