我目前正在尝试制作一个自定义垂直滑块,其中包括一个滚动文本和相应值的标签。我已经在网上找到了一些有趣的水平滑块代码,并将其用于我的解决方案中,如下所示:
XAML:
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<local:MyTickBar Margin="5,0,10,0" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Top" Fill="{StaticResource GlyphDarkBrush}" Height="5" />
<Border Name="TrackBackground" Margin="0" CornerRadius="2" Height="4" Grid.Row="1" Background="{StaticResource GlyphLightBrush}" BorderBrush="{StaticResource ButtonNormal}" BorderThickness="1" />
<Track Grid.Row="1" Name="PART_Track">
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderButtonStyle}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
<TickBar Name="BottomTick" SnapsToDevicePixels="True" Grid.Row="2" Fill="Black" Placement="Bottom" Height="10" Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
假设MyTickBar是一个被定义为以下类:
public class MyTickBar : TickBar
{
protected override void OnRender(DrawingContext dc)
{
Size size = new Size(base.ActualWidth, base.ActualHeight);
int tickCount = (int)((this.Maximum - this.Minimum) / this.TickFrequency) + 1;
if ((this.Maximum - this.Minimum) % this.TickFrequency == 0)
tickCount -= 1;
Double tickFrequencySize;
// Calculate tick's setting
tickFrequencySize = (size.Width * this.TickFrequency / (this.Maximum - this.Minimum));
string text = "";
FormattedText formattedText = null;
double num = this.Maximum - this.Minimum;
int i = 0;
// Draw each tick text
for (i = 0; i <= tickCount; i++)
{
text = Convert.ToString(Convert.ToInt32(this.Minimum + this.TickFrequency * i), 10);
formattedText = new FormattedText(text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.LeftToRight, new Typeface("Verdana"), 16, Brushes.Black);
dc.DrawText(formattedText, new Point((tickFrequencySize * i), 30));
}
}
}
这在水平滑块上很好用,但当我尝试使用垂直滑块时,我尝试了两种不同的解决方案都没有成功。第一种是为垂直滑块编写类似的XAML代码,但由于我对WPF比较陌生,无法达到预期的效果(基本上只是将行和高度属性更改为列和宽度,但可能要更加复杂)。我的第二次尝试是使用
<Slider.LayoutTransform>
<RotateTransform Angle="270"/>
</Slider.LayoutTransform>
在假装的滑块上,标签位置不正确,如下图所示:http://s22.postimage.org/sophl10wh/Incorrect.jpg 我尝试对MyTicker的DrawingContext应用旋转,但这会旋转整个滑块,而不是标签和值。所以,我的问题是如何获得假装的解决方案?可以通过对自定义垂直滑块的新XAML进行必要的更改,或者在第二种解决方案中仅旋转标签来实现。