Silverlight 3 - 围绕椭圆旋转矩形

Question

我有一个看起来像指南针的 Silverlight 用户控件。我会发布图片，但我是新用户，还不能发布图片。 :(。

本质上是一个外椭圆，在里面是一个中心的内椭圆，一个矩形作为指南针的“手”。我在下面发布了 xaml。

我想在鼠标左键按下并移动鼠标时移动指南针“手”。我认为使用 RotateTransform 会相对容易，但我想不通。

我遇到的问题是

A.我不知道如何设置我的 RotationTransform 的 CenterX、CenterY 和 Angle 属性。我想让手（红色矩形）围绕中心椭圆（中间的棕色椭圆）旋转。

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>

0.5 的 X 偏移量移动旋转 X 位置也与矩形的中心对齐，而 2.8 的 Y 偏移量将旋转移动到大致在棕色椭圆上的中心。

我说粗略，因为根据您的布局计算并不容易！目前，您正在使用边距来调整所有内容的大小，这意味着矩形的实际宽度是网格容器的宽度，减去左右边距值。如果你明确设置宽度/高度会更好。

更好的是，使用网格列/单元格来创建您想要的布局。看看这篇博文：

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

您可以根据自己的需要调整该控件。

减慢鼠标移动速度，这可能很棘手！

我建议将您的指南针更改为用户控件并将指南针角度设为依赖属性。一旦有了依赖属性，就可以从代码隐藏中对其进行动画处理。

希望有帮助！

科林 E.