I want to rotate a border But the rotation is done from the middle of the border, I want the rotation to be done from the end of the border just like a clock that rotates around a circle
this is my codes:
<ed:Arc
StartAngle="0" EndAngle="360" Stretch="None"
Height="300" Width="300" StrokeThickness="20"
StrokeDashArray=".25" Stroke="Turquoise"/>
<Border HorizontalAlignment="Center" CornerRadius="100,100,0,0" RenderTransformOrigin="0,0.5" Height="140" Width="2" BorderBrush="Red" BorderThickness="2">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="40"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
When you are creating drawings, it is often useful to use a Canvas and position child elements by means of the Canvas.Left
and Canvas.Top
properties.
Thus you would not have to deal with any offsets when you want to transform the elements. The element transforms could be calculated in their "local" coordinate system, like the one of the "clock hand" Line element in the example below, which goes from (0,0)
to (0,-140)
in the 12 o'clock position.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Canvas Width="300" Height="300">
<Ellipse Width="300" Height="300" Stroke="Turquoise"
StrokeThickness="20" StrokeDashArray=".25"/>
<Line Canvas.Left="150" Canvas.Top="150"
Y2="-140" Stroke="Red" StrokeThickness="2" >
<Line.RenderTransform>
<RotateTransform Angle="{Binding Value,
ElementName=angleSlider}"/>
</Line.RenderTransform>
</Line>
</Canvas>
<Slider x:Name="angleSlider" Grid.Row="1" Width="200" Maximum="360"/>
</Grid>