wpf 股票代码上带有标签的垂直滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15391127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical slider with labels on the ticker
提问by Santux
I'm currently trying to get a custom vertical slider with a ticker as well as labels in those tickers with the corresponding values. I already found online some interesting code for a horizontal slider that I'm now using in my solution and goes as follows:
我目前正在尝试获取带有代码的自定义垂直滑块以及这些代码中具有相应值的标签。我已经在网上找到了一些有趣的水平滑块代码，我现在在我的解决方案中使用了这些代码，如下所示：
XAML:
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>
With MyTickBar being a class defined as:
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));
}
}
}
This works fine with a horizontal slider, but as I pretend a vertical one I tried 2 different solutions with no success. First, was to make a similar XAML for a vertical slider, but as I'm quite new to WPF, I couldn't achieve the intended solution (I basically changed the row and height properties to column and with, but is probably a bit more complex than that). And my second attempt was using a
这适用于水平滑块，但当我假装垂直滑块时，我尝试了 2 种不同的解决方案，但没有成功。首先，是为垂直滑块制作一个类似的 XAML，但由于我对 WPF 很陌生，我无法实现预期的解决方案（我基本上将行和高度属性更改为列和列，但可能有点比这更复杂）。我的第二次尝试是使用
<Slider.LayoutTransform>
<RotateTransform Angle="270"/>
</Slider.LayoutTransform>
on the pretended slider, getting a slider with the labels in the incorrect position, like the following image illustrates: http://s22.postimage.org/sophl10wh/Incorrect.jpg
在假装的滑块上，得到一个标签位置不正确的滑块，如下图所示：http: //s22.postimage.org/sohl10wh/Incorrect.jpg
I tried to apply a rotation to the DrawingContext of MyTicker but that rotates the entire ticker, instead of the labels with the values. So, my question is how can I obtain the pretend solution? Either through the necessary changes to a new XAML for a custom vertical slider, or just rotating the labels in the second solution.
我尝试对 MyTicker 的 DrawingContext 应用旋转，但这会旋转整个代码，而不是带有值的标签。所以，我的问题是如何获得假装解决方案？通过对自定义垂直滑块的新 XAML 进行必要的更改，或者只是在第二个解决方案中旋转标签。
回答by Santux
So, I can now answer my own question and maybe help someone in the future who will try to acomplish the same. Like I said in the comment of my own question, just later I realized I could go to the msdn and get the proper vertical slider template instead of trying to adapt the horizontal one.
所以，我现在可以回答我自己的问题，也许可以帮助将来尝试完成相同问题的人。就像我在我自己的问题的评论中所说的那样，后来我意识到我可以去 msdn 并获得正确的垂直滑块模板，而不是尝试调整水平滑块。
My current XAML is now:
我当前的 XAML 现在是：
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<local:MyTickBarVertical Margin="0,0,0,10" x:Name="TopTick" SnapsToDevicePixels="True" Placement="Left" Fill="{StaticResource GlyphDarkBrush}" Width="4" />
<Track Grid.Column="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.Column="2"
Fill="Black"
Placement="Right"
Width="4"
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>
and I had do make some small changes to my class, since now I'm using a proper vertical slider:
我确实对我的班级做了一些小改动，因为现在我使用了一个合适的垂直滑块：
public class MyTickBarVertical : 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
//width to height
tickFrequencySize = (size.Height * 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.Maximum) - Convert.ToInt32(this.Minimum + this.TickFrequency * i), 10);
formattedText = new FormattedText(text, CultureInfo.GetCultureInfo("en-us"), FlowDirection.RightToLeft, new Typeface("Verdana"), 16, Brushes.Black);
dc.DrawText(formattedText, new Point(0, (tickFrequencySize * i)));
}
}
}
getting now the following: http://s4.postimage.org/d0q6dpxvx/Correct.jpg
现在得到以下内容：http: //s4.postimage.org/d0q6dpxvx/Correct.jpg
Cheers!
干杯!
