旋转滑块WPF
问题描述:
我想在WPF中旋转4个滑块来创建自定义控件。旋转滑块WPF
这里是我的代码:
<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>
我试过没有电网的定义,不同的中心(这没”没有改变任何东西)。
我已经遵循在线帮助进行布局转换,但是我无法完成工作。
谢谢你的帮助。
答
正确放置滑块并旋转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>
答
我真的不知道你想要达到的目标,但仍基于图像的你提供我张贴我的代码:
<Slider VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
<Slider.RenderTransform>
<TransformGroup>
<RotateTransform Angle="45"/>
</TransformGroup>
</Slider.RenderTransform>
</Slider>
的45使用的角度,-45,135,-135布局他们按你的贴的设计。
小提示:下次发现任何此类问题时,请转至该控件的属性并查找所有可用属性。
快乐编码!
答
这是我做的:
<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>
+0
Thx @ASh编辑! :d –
谢谢你,真的很好。但是,如果我添加一个自定义模板右上角的滑块和左下角不再工作? (我尝试创建滑块模板的本地副本,并将其放入我的滑块样式中) – user2088807
@ user2088807,左下角滑块是一个带* vertical *方向的标准滑块。网格的旋转根本不应该影响滑块模板。您的模板是否可以正确使用不在自定义控件中的垂直滑块? – ASh
哦......你说得对,如果滑块有一个垂直方向,默认模板是不同的。问题解决了:) – user2088807