Microsoft® WPF にあるコントロールと同じパターンを使用して、範囲スライダー (xamNumericRangeSlider または xamDateTimeRangeSlider) をアプリケーションに追加できます。このパターンは、レイアウトコンテナーの使用およびレイアウト コンテナーの Children コレクションにコントロールを追加することに関わります。
xamDateTimeRangeSlider コントロールをアプリケーションに追加します。アプリケーションを実行すると、ブラウザーに以下のスクリーンショットにのような xamDateTimeRangeSlider コントロールが表示されます。
WPF プロジェクトを作成します。
以下の NuGet パッケージ参照をプロジェクトに追加します。
Infragistics.WPF.Slider
NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。
コード ビハインドに using/Imports のディレクティブを配置するか、あるいは xamSlider コントロールの XML 名前空間定義を追加します。
XAML の場合:
xmlns:ig="http://schemas.infragistics.com/xaml"Visual Basic の場合:
Imports Infragistics.Controls.EditorsC# の場合:
using Infragistics.Controls.Editors;xamDateTimeRangeSlider コントロールのインスタンスを "LayoutRoot" という名前のデフォルトのグリッド レイアウト パネルに追加します。プロシージャ コードでこれを行う場合、UserControl の Loaded イベントを処理し、イベント ハンドラーにこのコードを配置することができます。
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 SubC# の場合:
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 コレクションに追加します-->
}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);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);プロジェクトを実行します。