旋轉滑塊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>