Question

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

基本上考虑一个外部椭圆，内部是一个内部椭圆，中心是一个矩形，用作指南针的“手”。我在下面发布了xaml。

我想在鼠标左键移动并移动鼠标时移动指南针'手'。我认为使用RotateTransform会相对容易，但我无法弄明白。

我遇到的问题是

一个。我无法弄清楚如何设置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>

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。

Silverlight 3 - 围绕椭圆旋转矩形

1 个答案: