3

私は現在、ティッカーと対応する値を持つそれらのティッカーのラベルを持つカスタム垂直スライダーを取得しようとしています。ソリューションで現在使用している水平スライダーの興味深いコードをオンラインで既に見つけました。次のようになります。

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 にまったく慣れていないため、意図した解決策を達成できませんでした (基本的に行と高さのプロパティを column と with に変更しましたが、おそらく少しそれよりも複雑です）。そして、私の2回目の試みは

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

次の画像が示すように、ふりをしたスライダーで、ラベルが間違った位置にあるスライダーを取得します: http://s22.postimage.org/sohl10w/Incorrect.jpg

MyTicker の DrawingContext に回転を適用しようとしましたが、値を持つラベルではなく、ティッカー全体を回転させます。それで、私の質問は、どうすればふりをした解決策を得ることができますか? カスタムの垂直スライダー用に新しい XAML に必要な変更を加えるか、2 番目のソリューションでラベルを回転させるだけです。

4

1 に答える 1

7

だから、私は自分の質問に答えることができ、将来同じことを達成しようとする誰かを助けることができます. 私自身の質問のコメントで述べたように、すぐ後に、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

乾杯！

于 2013-03-13T18:14:53.047 に答える