旋转滑块WPF

Question

我想在WPF中旋转4个滑块来创建自定义控件.

这是我的代码:

<Grid Margin="20">
   <Grid.RowDefinitions>
      <RowDefinition Height="*"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*"/>
      <ColumnDefinition Width="*"/>
   </Grid.ColumnDefinitions>
   <Slider Name="Slider_Top_Left" Minimum="0" Maximum="100" Value="75"     RenderTransformOrigin="0,0">
      <Slider.LayoutTransform>
         <RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
      </Slider.LayoutTransform>
   </Slider>
   <Slider Name="Slider_Top_Right" Grid.Column="1" Minimum="0" Maximum="100" Value="75">
      <Slider.LayoutTransform>
         <RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
      </Slider.LayoutTransform>
   </Slider>
   <Slider Name="Slider_Bottom_Right" Grid.Column="1" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
      <Slider.LayoutTransform>
         <RotateTransform CenterX="0" CenterY="0" Angle="45"/>
      </Slider.LayoutTransform>
   </Slider>
   <Slider Name="Slider_Bottom_Left" Grid.Column="0" Grid.Row="1" Minimum="0" Maximum="100" Value="75">
      <Slider.LayoutTransform>
         <RotateTransform CenterX="-10" CenterY="-10" Angle="135"/>
      </Slider.LayoutTransform>
   </Slider>
</Grid>

结果 :

我想要的是 :

我试过没有网格定义,有不同的中心(它没有改变任何东西).

我已经按照在线帮助进行布局转换,但我无法使其正常工作.

谢谢您的帮助.

Answer 1

将滑块正确放入网格并旋转Grid.如果您稍后决定向自定义控件添加更多元素,则无需计算任何旋转角度/中心

<Grid Grid.Row="3">
    <Grid.LayoutTransform>
        <RotateTransform Angle="45"/>
    </Grid.LayoutTransform>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <!--top right-->
    <Slider Orientation="Vertical" Grid.ColumnSpan="2" HorizontalAlignment="Center">
        <Slider.LayoutTransform>
            <ScaleTransform ScaleY="-1"/>
        </Slider.LayoutTransform>
    </Slider>
    <!--bottom left-->
    <Slider Orientation="Vertical" Grid.Row="1" 
            Grid.ColumnSpan="2" 
            HorizontalAlignment="Center"/>
    <!--top left-->
    <Slider Grid.RowSpan="2" VerticalAlignment="Center"/>
    <!--bottom right-->
    <Slider Grid.Column="1" Grid.RowSpan="2" VerticalAlignment="Center">
        <Slider.LayoutTransform>
            <ScaleTransform ScaleX="-1"/>
        </Slider.LayoutTransform>
    </Slider>
</Grid>