旋转滑块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>

Answer 2

我不确定你想要实现什么，但仍然基于您提供的图像我发布了我的代码：

<Slider VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Slider.RenderTransform>
                <TransformGroup>                    
                    <RotateTransform Angle="45"/>                    
                </TransformGroup>
            </Slider.RenderTransform>
</Slider>

使用角度45°，-45,135°，-135根据您发布的设计进行布局。

小提示：下次发现任何此类问题时，请转到该控件的属性并查找所有可用属性。

快乐的编码!!

Answer 3

我就这样做了：

<Grid>
    <Slider x:Name="slider" HorizontalAlignment="Center" Margin="-50,50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="-45"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider1" HorizontalAlignment="Center" Margin="50,50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="-135"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider5" HorizontalAlignment="Center" Margin="50,-50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="135"/>
        </Slider.LayoutTransform>
    </Slider>
    <Slider x:Name="slider3" HorizontalAlignment="Center" Margin="-50,-50,0,0" VerticalAlignment="Center" Width="75">
        <Slider.LayoutTransform>
            <RotateTransform CenterX="0" CenterY="0" Angle="45"/>
        </Slider.LayoutTransform>
    </Slider>
</Grid>