【问题标题】:Vertical slider with labels on the ticker带有标签的垂直滑块
【发布时间】:2013-03-13 16:33:24
【问题描述】:

我目前正在尝试获取带有代码的自定义垂直滑块以及这些代码中具有相应值的标签。我已经在网上找到了一些有趣的水平滑块代码,我现在在我的解决方案中使用这些代码,如下所示:

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));
        }
    }
}

这适用于水平滑块,但当我假装垂直滑块时,我尝试了 2 种不同的解决方案,但均未成功。首先,是为垂直滑块制作一个类似的 XAML,但由于我对 WPF 很陌生,我无法实现预期的解决方案(我基本上将行和高度属性更改为列和 with,但可能有点比这更复杂)。我的第二次尝试是使用

<Slider.LayoutTransform>
            <RotateTransform Angle="270"/>
        </Slider.LayoutTransform>

在假装的滑块上,得到一个标签位置不正确的滑块,如下图所示:http://s22.postimage.org/sophl10wh/Incorrect.jpg

我尝试对 MyTicker 的 DrawingContext 应用旋转,但这会旋转整个股票行情,而不是带有值的标签。所以,我的问题是如何获得假装解决方案?通过对自定义垂直滑块的新 XAML 进行必要的更改,或者只是在第二个解决方案中旋转标签。

【问题讨论】:

  • 我刚刚意识到我有点(实际上很多)愚蠢,因为我可能可以从 msdn 获得 Slider ControlTemplate Example 用于垂直滑块,所以我现在就试试 ;)

标签: wpf slider


【解决方案1】:

所以,我现在可以回答我自己的问题,也许可以帮助将来尝试完成同样问题的人。就像我在自己问题的评论中所说的那样,后来我意识到我可以去 msdn 并获得正确的垂直滑块模板,而不是尝试调整水平滑块。

我当前的 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>

我确实对我的班级做了一些小改动,因为现在我使用了一个合适的垂直滑块:

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)));
        }
    }
}

现在得到以下内容:http://s4.postimage.org/d0q6dpxvx/Correct.jpg

干杯!

【讨论】:

  • 我正在尝试实现类似的东西。您为滑块本身使用了什么 XAML?
  • 您应该使用msdn.microsoft.com/en-us/library/ms753256(v=vs.85).aspx 中的滑块控件模板,我将其中一个刻度条替换为: 定义一个类 MyTickBarVertical : TickBar 就像我在答案中的那个。跨度>
  • 然后呢:&lt;Slider Template={StaticResource VerticalSlider} /&gt; 还有什么?
  • 我用它作为一种风格。在 App.xaml 我定义了
猜你喜欢
  • 1970-01-01
  • 2016-07-02
  • 2014-03-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-30
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多