• ホーム
• C#のコントロール
• C#のスライダコントロールを試してみた

C#のスライダコントロールを試してみた

C#のアプリで、ある範囲内の数値を選択してもらうときにスライダーを使います。というわけで、スライダーコントロールを試してみました。

目次

1. Sliderクラスの使い方
2. 試してみた
1. 単純な例
2. スライダーの目盛り間隔を広げるには
3. 目盛りの間隔を不均一にするには

Sliderクラスの使い方

Sliderクラスのプロパティでよく使いそうなものをメモっておきます。

プロパティ	型	内容
Value	double	ツマミの位置。規定値は0。
Orientation	Orientation列挙体	スライダーの向き。規定値はOrientation.Horizontal。
Maximum	double	スライダーの最大値。規定値は10。
Minimum	double	スライダーの最小値。規定値は0。
LargeChange	double	スライダーコントロールをクリックしたときに、ツマミが移動する間隔。規定値は1。
SmallChange	double	スライダーコントロールをアクティブにして、カーソルを押したときにツマミが移動する間隔。規定値は0.1。
Interval	Int32	ツマミが移動するスピード。ミリ秒単位。規定値はシステムのキーリピート間隔。
TickPlacement	TickPlacement列挙体	目盛りの位置。規定値はTickPlacement.None。
TickFrequency	double	目盛りの間隔。規定値は1.0。
Ticks	DoubleCollection	目盛りのセット。規定値はnull。
IsMoveToPointEnabled	bool	ツマミをクリックした位置に直接移動するようにする。規定値はfalse。
IsSnapToRickEnabled	bool	ツマミを移動したときに、一番近くの目盛りに位置を合わせる。規定値はfalse。

試してみた

単純な例

Sliderのツマミの位置をTextBlockに表示してみます。さらに、Buttonをクリックしたら1ずつ値を増減するようにしてみます。

XAMLの方はこんな感じです。Gridの中に、SliderとTextBlockと２つのButtonを配置します。

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="200" Width="300" >
    <Grid>
        <Slider Name="slider" Margin="20,20,20,100" />
        <TextBlock Text="{Binding Value, ElementName=slider}" Margin="20,70,10,60" />
        <Button Name="buttonDown" Click="buttonDown_Click" Content="下げる" Margin="20,120,180,20" />
        <Button Name="buttonUp" Click="buttonUp_Click" Content="上げる" Margin="180,120,20,20" />
    </Grid>
</Window>

TextBlock要素のText属性にスライダーのValueプロパティをバインディングしてます。そして、ButtonのClick属性にイベントを設定してます。

コードの方はこんな感じです。

using System.Windows;

   namespace WpfApp1
   {
       public partial class MainWindow : Window
       {
           public MainWindow()
           {
               InitializeComponent();

           }
           private void buttonDown_Click(object sender, RoutedEventArgs e)
           {
               slider.Value = slider.Value - 1;
           }

           private void buttonUp_Click(object sender, RoutedEventArgs e)
           {
               slider.Value = slider.Value + 1;
           }
       }
   }

ボタンを押したらSliderのValueプロパティを増減するだけのプログラムです。

ビルドして実行すると下図のようになります。

ツマミの位置に合わせてTextBoxの表示が変化します。

ツマミを最大値にして、「上げる」ボタンをクリックするとどんなエラーが出るでしょうか。

上図はツマミを10の位置にして「上げる」ボタンを押した状態です。実は何も起きません。SliderのValueプロパティは、SliderコントロールのMaximumとMinimumプロパティの範囲外の値には設定できず、範囲外の値にしようとすると無視されるのです。便利ですね。

スライダーの目盛り間隔を広げるには

例えば、選択する数値を1にしたい場合があります。選択肢を自然数にしたい場合などですね。

SliderのTickFrequencyプロパティ（今回は1にしました）とIsSnapToTickEnabledプロパティで設定してみました。

using System.Windows;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            slider.TickFrequency = 1;
            slider.IsSnapToTickEnabled = true;
        }
        private void buttonDown_Click(object sender, RoutedEventArgs e)
        {
            slider.Value = slider.Value - 1;
        }

        private void buttonUp_Click(object sender, RoutedEventArgs e)
        {
            slider.Value = slider.Value + 1;
        }
    }
}

これで実行すると、0から10の間の自然数だけが選択できます。ツマミを端数の位置にしようとすると、自動的に自然数の位置にツマミが合わされます。

目盛りの間隔を不均一にするには

目盛りの間隔を等間隔ではなく、間隔を変えてみます。

using System.Windows;
using System.Windows.Media;

namespace WpfApp1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            DoubleCollection tick = new DoubleCollection();
            tick.Add(1.25);
            tick.Add(2.5);
            tick.Add(5);
            slider.Ticks = tick;
            slider.TickPlacement = System.Windows.Controls.Primitives.TickPlacement.Both;
            slider.IsSnapToTickEnabled = true;
        }
        private void buttonDown_Click(object sender, RoutedEventArgs e)
        {
            slider.Value = slider.Value - 1;
        }

        private void buttonUp_Click(object sender, RoutedEventArgs e)
        {
            slider.Value = slider.Value + 1;
        }
    }
}

DoubleCollectionクラスはSystem.Windows.Media名前空間ですので、usingで追加しました。

実行するとこうなります。1.25、2.5、5の位置に目盛りがあります。端の0と10も選択できます。

Previous: C#で画像のHSBを抽出して描くツールを作ってみた   Next: C#のアプリの情報を表示してみた

更新日 2020-12-12
公開日 2016-03-08

広告

C#のコントロールカテゴリの投稿

• C#でコレクションの要素の変更をバインド先のコントロールに反映する方法
• C#のComboBoxを使ってみた
• C#のDataGridで右クリックメニューを作ってみた
• C#のDataGridの罫線と背景色を変えてみた
• C#のListBoxでCheckBoxを並べてみた
• C#のListBoxを使ってみた
• C#のListViewで列のタイトルを変える
• C#のListViewで選択したアイテムを取得する方法
• C#のListViewに文字を入力する方法
• C#のListViewのヘッダーをクリックして列をソートする方法
• C#のListViewを使ってみた
• C#のRadioButtonで選択された項目を調べる（foreach編）
• C#のRadioButtonを試してみた
• C#のTextBoxで最下行に自動でスクロールする方法
• C#のWPFのコントロール一覧
• C#のスライダコントロールを試してみた
• C#のタブをコードから切り替える
• C#のメニューのイベントを１つにまとめてみた