Input Library for WPF
RangeSlider クイックスタート
Input for WPF > RangeSlider > RangeSlider クイックスタート

このクイックスタートは、RangeSlider for WPF を初めて使用するユーザーのために用意されています。このクイックスタートでは、C1RangeSliderコントロールをアプリケーションに追加し、コントロールの外観と動作をカスタマイズします。

アプリケーションの設定

  1. Visual Studio で、［ファイル］→［新しいプロジェクト］を選択します。
  2. [新しいプロジェクト]ダイアログボックスで、[WPFアプリケーション]を選択します。
  3. プロジェクトの名前と場所を入力し、[OK]をクリックして新しいアプリケーションを作成します。
  4. デザインビューでは、グリッドにクリックします。
  5. ツールボックスに移動し、［Rectangle］アイコンをダブルクリックして、Grid に標準コントロールを追加します。
  6. ［デザイン］ペインで、Rectangle1 のサイズを変更してグリッド全体に拡大します。
  7. ［XAML］ビューに切り替えて、Fill を <Rectangle> タグに追加します。次のようになります。
XAML
コードのコピー 
<Rectangle Name="rectangle1" Stroke="Black">
    <Rectangle.Fill>
        <RadialGradientBrush x:Name="colors">
            <GradientStop x:Name="goldcol" Color="Gold" Offset="0" />
            <GradientStop x:Name="blackcol" Color="Black" Offset="1" />
        </RadialGradientBrush>
    </Rectangle.Fill>
</Rectangle>

これで、黒と金色の放射状グラデーションが四角形に追加されます。

  1. ここでアプリケーションを実行し、コントロールが次の図のように表示されていることを確認します。

これで、WPF アプリケーションとカスタマイズした Rectangle コントロールが作成されました。次の手順では、C1RangeSlider コントロールを追加してカスタマイズします。

コントロールの追加

前の手順では、新しい WPF プロジェクトを作成し、アプリケーションにグラデーション付きの Rectangle コントロールを１つ追加しました。この手順では、引き続き、Rectangle のグラデーションを制御する C1RangeSlider コントロールを追加します。

次の手順に従います。

  1. プロジェクトの XAML ウィンドウで、カーソルを </Rectangle> タグと </Grid> タグの間に置き、１回クリックします。
  2. ツールボックスに移動し、［C1RangeSlider］アイコンをダブルクリックして、アプリケーション内の Rectangle の上にコントロールを追加します。
  3. x:Name="c1rs1" を <c1:C1RangeSlider> タグに追加して、コントロールに名前を付けます。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1">

それに一意の識別子を付けると、コードでそのコントロールにアクセスできるようになります。

  1. <c1:C1RangeSlider> タグに Margin="50" を追加してマージンを追加します。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50">

これで、各辺がグリッドの境界から同じ距離に設定されます。

  1. <c1:C1RangeSlider> タグに Orientation="Vertical" を追加して、Orientation プロパティを Vertical に設定します。次のようになります。
Example Title
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical">

デフォルトでは、Orientation が Horizontal に設定されているため、コントロールが水平方向に表示されます。

  1. <c1:C1RangeSlider> タグに UpperValue="1" を追加して、UpperValue プロパティを１に設定します。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1">

これで、上のサムは１から始まります。

  1. <c1:C1RangeSlider> タグに Maximum="1" を追加して、Maximum プロパティを１に設定します。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1">

これで、ユーザーは１より大きい値を選択できなくなります。

  1. <c1:C1RangeSlider> タグに ValueChange="0.1" を追加して、ValueChange プロパティを 0.1 に設定します。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1">

これで、実行時にスライダをクリックすると、サムが 0.1 単位で移動します。

  1. <c1:C1RangeSlider> タグに Opacity="0.8" を追加して、Opacity プロパティを「0.8」に設定します。次のようになります。
Example Title
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8">

デフォルトで、このプロパティは１に設定されているため、コントロールは完全に不透明になります。これを小さい数値に変更すると、コントロールは少し透明になります。

  1. <c1:C1RangeSlider> タグに LowerValueChanged="c1rs1_LowerValueChangedb" UpperValueChanged="c1rs1_UpperValueChanged" を追加してイベントハンドラを指定します。次のようになります。
XAML
コードのコピー 
<c1:C1RangeSlider x:Name="c1rs1" Margin="380,50,399,50" Orientation="Vertical" UpperValue="1" Maximum="1" ValueChange="0.1" Opacity="0.8" LowerValueChanged="c1rs1_LowerValueChanged" UpperValueChanged="c1rs1_UpperValueChanged">

これらのイベントハンドラのコードは、この後の手順で追加します。

  1. ここでアプリケーションを実行し、コントロールが次の図のように表示されていることを確認します。

アプリケーションのユーザーインターフェイスを設定しましたが、今はスライダを移動しても何も行われません。次の手順では、機能を追加するコードをアプリケーションに追加します。

コードの追加

これまでの手順では、アプリケーションのユーザーインターフェイスを設定し、いくつかのコントロールをアプリケーションに追加しました。この手順では、アプリケーションにコードを追加して完成させます。

次の手順に従います。

  1. Window1 をダブルクリックして、コードビューに切り替え、Window1_Loaded イベントハンドラを作成します。
  2. コードビューで、次の import 文をページの先頭に追加します。
Visual Basic
コードのコピー 
Imports C1.WPF.Input

 

C#
コードのコピー 
using C1.WPF.Input;
  1. WPFアプリケーション, Window1_Loaded イベントハンドラにコードを追加します。次のようになります。
Visual Basic
コードのコピー 
Private Sub Window1_Loaded(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    UpdateGradient()
End Sub

 

C#
コードのコピー 
private void Window_Loaded(object sender, RoutedEventArgs e)
{
    UpdateGradient();
}
  1. Window1_Loaded イベントハンドラの直後に次のコードを追加して、グラデーションの値を更新します。
Visual Basic
コードのコピー 
Private Sub UpdateGradient()
    If IsLoaded Then
        Me.goldcol.Offset = Me.c1rs1.LowerValue
        Me.blackcol.Offset = Me.c1rs1.UpperValue
    End If
End Sub

 

C#
コードのコピー 
UpdateGradient()
{
    if (IsLoaded)
    {
        this.goldcol.Offset = this.c1rs1.LowerValue;
        this.blackcol.Offset = this.c1rs1.UpperValue;
    }
}
  1. ［デザイン］ビューに戻ります。
  2. C1RangeSlider コントロールをクリックして選択し、［プロパティ］ウィンドウに移動します。
  3. ［プロパティ］ウィンドウの上部にある稲妻の［イベント］アイコンをクリックして、イベントを表示します。
  4. LowerValueChanged イベントをダブルクリックして、［コード］ビューに切り替え、c1rs1_LowerValueChanged イベントハンドラを作成します。［デザイン］ビューに戻り、UpperValueChanged イベントでこの手順を繰り返して、c1rs1_UpperValueChanged イベントハンドラを作成します。
  5. c1rs1_LowerValueChanged イベントハンドラにコードを追加します。次のようになります。
Visual Basic
コードのコピー 
Private Sub c1rs1_LowerValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles c1rs1.LowerValueChanged
    UpdateGradient()
End Sub

 

C#
コードのコピー 
private void c1rs1_LowerValueChanged(object sender, EventArgs e)
{
    UpdateGradient();
}
  1. c1rs1_UpperValueChanged イベントハンドラにコードを追加します。次のようになります。
Visual Basic
コードのコピー 
Private Sub c1rs1_UpperValueChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles c1rs1.UpperValueChanged
    UpdateGradient()
End Sub

 

C#
コードのコピー 
c1rs1_UpperValueChanged(object sender, EventArgs e)
{
    UpdateGradient();
}

この手順では、アプリケーションにコードを追加しました。次の手順では、アプリケーションを実行し、実行時の操作を確認します。

アプリケーションの実行

これまでに WPF アプリケーションを作成し、外観と動作をカスタマイズしたので、次にアプリケーションを実行します。

アプリケーションを実行し、RangeSlider for WPF の実行時の動作を確認するには、次の手順に従います。

  1. ［プロジェクト］メニューから［ソリューションのテスト］を選択し、実行時にアプリケーションがどのように表示されるかを確認します。

    アプリケーションは次の図のように表示されます。 

  2. 上のサムを下に移動します。グラデーションの外観が変化します。

     

  3. 下のサムを上に移動すると、グラデーション効果の幅が小さくなります。

     

  4. 1つのサムの間をクリックし、スライダトラックに沿ってカーソルを下にドラッグします。両方のサムが一緒に移動します。

おめでとうございます!

これで、RangeSlider for WPF クイックスタートは完了です。RangeSlider for WPF アプリケーションを作成し、コントロールの外観と動作をカスタマイズし、アプリケーションの実行時機能をいくつか確認することができました。

 

 

Copyright © MESCIUS inc. All rights reserved.