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