バージョン

範囲スライダーをアプリケーションに追加

始める前に

Microsoft® WPF にあるコントロールと同じパターンを使用して、範囲スライダー（ xamNumericRangeSlider または xamDateTimeRangeSlider）をアプリケーションに追加できます。このパターンは、レイアウトコンテナーの使用およびレイアウト コンテナーの Children コレクションにコントロールを追加することに関わります。

達成すること

xamDateTimeRangeSlider コントロールをアプリケーションに追加します。アプリケーションを実行すると、ブラウザーに以下のスクリーンショットにのような xamDateTimeRangeSlider コントロールが表示されます。

xamSlider Adding a Range Slider to Your Application 01 XAML.png

次の手順を実行します

  1. WPF プロジェクトを作成します。

  2. ソリューション エクスプローラーで次の参照を追加します。

    • InfragisticsWPF4.v20.1.dll

    • InfragisticsWPF4.Controls.Editors.XamSlider.v20.1.dll

  1. コード ビハインドに using/Imports のディレクティブを配置するか、あるいは xamSlider コントロールの XML 名前空間定義を追加します。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

Visual Basic の場合:

Imports Infragistics.Controls.Editors

C# の場合:

using Infragistics.Controls.Editors;

  1. xamDateTimeRangeSlider コントロールのインスタンスを "LayoutRoot" という名前のデフォルトのグリッド レイアウト パネルに追加します。プロシージャ コードでこれを行う場合、UserControl の Loaded イベントを処理し、イベント ハンドラーにこのコードを配置することができます。

    • Name プロパティを xamDateTimeRangeSlider1 に設定します。

    • XAML で MinValue プロパティを 1/1/2009 に設定するか、コードでそれに相当する DateTime 構造に設定します。

    • MaxValue プロパティを 12/31/2009 に設定するか、コードでそれに相当する DateTime 構造に設定します。

XAML の場合:

<ig:XamDateTimeRangeSlider
    Name="xamDateTimeRangeSlider1"
    MinValue="1/1/2009"
    MaxValue="12/31/2009">
    <!--TODO: DateTimeSliderTickMark オブジェクトを TickMarks コレクションに追加します-->
    <!--TODO: xamSliderDateTimeThumb オブジェクトを Thumbs コレクションに追加します-->
</ig:XamDateTimeRangeSlider>

Visual Basic の場合:

Dim xamDateTimeRangeSlider1 As XamDateTimeRangeSlider
Private Sub UserControl_Loaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    xamDateTimeRangeSlider1 = New xamDateTimeRangeSlider With {.MinValue = New DateTime(2009, 1, 1), .MaxValue = New DateTime(2009, 12, 31)}
    Me.LayoutRoot.Children.Add(xamDateTimeRangeSlider1)
    'TODO: DateTimeSliderTickMark オブジェクトを TickMarks コレクションに追加します-->
    'TODO: xamSliderDateTimeThumb オブジェクトを Thumbs コレクションに追加します-->
End Sub

C# の場合:

XamDateTimeRangeSlider xamDateTimeRangeSlider1;
private void UserControl_Loaded(object sender, RoutedEventArgs e)
{
    xamDateTimeRangeSlider1 = new XamDateTimeRangeSlider
    {
        MinValue = new DateTime(2009, 1, 1),
        MaxValue = new DateTime(2009, 12, 31)
    };
    this.LayoutRoot.Children.Add(xamDateTimeRangeSlider1);
    //TODO: DateTimeSliderTickMark オブジェクトを TickMarks コレクションに追加します-->
    //TODO: xamSliderDateTimeThumb オブジェクトを Thumbs コレクションに追加します-->
}

  1. xamDateTimeRangeSlider コントロールの TickMarks コレクションに DateTimeSliderTickMarks オブジェクトを追加します。数値スライダー コントロール、すなわち xamNumericSlider または xamNumericRangeSlider については、DateTimeSliderTickMarks オブジェクトの代わりに TickMarks コレクションに SliderTickMarks オブジェクトを追加する必要があります。

    • NumberOfTickMarks プロパティを 10 に設定します。

    • UseFrequency プロパティを False に設定します。UseFrequency プロパティを False に設定しない場合、xamSlider コントロールは NumberOfTickMarks プロパティを無視します。

XAML の場合:

<ig:XamDateTimeRangeSlider.TickMarks>
    <ig:DateTimeSliderTickMarks NumberOfTickMarks="10" UseFrequency="/>
</ig:XamDateTimeRangeSlider.TickMarks>

Visual Basic の場合:

Dim majorTickMarks As New DateTimeSliderTickMarks With {.NumberOfTickMarks = 10, .UseFrequency = False}
Me.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks)

C# の場合:

DateTimeSliderTickMarks majorTickMarks = new DateTimeSliderTickMarks
{
    NumberOfTickMarks = 10,
    UseFrequency = false
};
this.xamDateTimeRangeSlider1.TickMarks.Add(majorTickMarks);

  1. xamDateTimeRangeSlider コントロールの Thumbs コレクションに 3 つの xamSliderDateTimeThumb オブジェクトを追加します。XAML で Thumbs コレクションのタグを宣言する必要はありません。xamNumericRangeSlider コントロールでは、xamSliderDateTimeThumb オブジェクトの代わりに、 xamSliderNumericThumb オブジェクトを Thumbs コレクションに追加する必要があります。

XAML の場合:

<ig:XamSliderDateTimeThumb Value="4/1/2009" />
<ig:XamSliderDateTimeThumb Value="8/1/2009" />
<ig:XamSliderDateTimeThumb Value="12/1/2009" />

Visual Basic の場合:

Dim thumb1 As New XamSliderDateTimeThumb With {.Value = New DateTime(2009, 4, 1)}
Dim thumb2 As New XamSliderDateTimeThumb With {.Value = New DateTime(2009, 8, 1)}
Dim thumb3 As New XamSliderDateTimeThumb With {.Value = New Datetime(2009, 12, 1)}
Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb1)
Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb2)
Me.xamDateTimeRangeSlider1.Thumbs.Add(thumb3)

C# の場合:

xamSliderDateTimeThumb thumb1 = new XamSliderDateTimeThumb
{
    Value = new DateTime(2009, 4, 1)
};
xamSliderDateTimeThumb thumb2 = new XamSliderDateTimeThumb
{
    Value = new DateTime(2009, 8, 1)
};
xamSliderDateTimeThumb thumb3 = new XamSliderDateTimeThumb
{
    Value = new DateTime(2009, 12, 1)
};
this.xamDateTimeRangeSlider1.Thumbs.Add(thumb1);
this.xamDateTimeRangeSlider1.Thumbs.Add(thumb2);
this.xamDateTimeRangeSlider1.Thumbs.Add(thumb3);

  1. プロジェクトを実行します。

関連トピック

単一値スライダーをアプリケーションに追加

xamSlider の使用