wpf - スライダーのように見える範囲を選択する WPF コントロールはありますか?

Question

ユーザーが範囲を選択できるようにするための単一の値ではなく、最小値と最大値の両方を持つスライダー (またはスライダー自体) のように見える WPF コントロールはありますか?

Answer 1

更新: Avalon コントロールは、WPF Extended Toolkit の古い前身であり、現在は AvalonDock が含まれています。

RangeSlider は、WPF 拡張ツールキットの一部です。

Answer 2

@kmatyaszekが既に述べたように、 AvalonControlsLibraryは優れた無料 ( Microsoft Public License (Ms-PL) ) コントロールのライブラリです。

ただし、RangeSliderの基本的なスタイルがあまり満足できないことがわかりました。

これは、より現代的なバージョンのスタイルです(RangeSlider.xaml):

        <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
            xmlns:drawing="clr-namespace:System.Drawing;assembly=System.Drawing" >

    <SolidColorBrush x:Key="BrushSliderEdge" Color="LightGray" />
    <SolidColorBrush x:Key="BrushSliderActiveArea" Color="DeepSkyBlue" />
    <SolidColorBrush x:Key="BrushSliderThumb" Color="LightSkyBlue" />
    <SolidColorBrush x:Key="BrushSliderThumbBorder" Color="DeepSkyBlue" />

    <Style x:Key="SliderEdge" TargetType="RepeatButton">
    <Setter Property="Focusable" Value="false" />
    <Setter Property="IsTabStop" Value="false" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="RepeatButton">
            <Border Height="3" Background="{StaticResource BrushSliderEdge}" BorderBrush="{StaticResource BrushSliderEdge}" BorderThickness="1" />
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>
    <Style x:Key="SliderInner" TargetType="Thumb">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="Thumb">
            <Border Height="3" Background="{StaticResource BrushSliderActiveArea}" BorderBrush="{StaticResource BrushSliderThumbBorder}" BorderThickness="1" />
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>


    <Style x:Key="SliderThumb" TargetType="Thumb">
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="Thumb">
            <Ellipse Width="10" Height="10" Fill="{StaticResource BrushSliderThumb}" />
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>

    <Style TargetType="{x:Type local:RangeSlider}">
    <Setter Property="Template">
        <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:RangeSlider}">
            <StackPanel Name="PART_RangeSliderContainer" Orientation="Horizontal">
            <RepeatButton Name="PART_LeftEdge" Style="{StaticResource SliderEdge}" />
            <Thumb Name="PART_LeftThumb" Cursor="SizeWE" Style="{StaticResource SliderThumb}" />
            <Thumb Name="PART_MiddleThumb" MinWidth="10" Cursor="ScrollAll" Style="{StaticResource SliderInner}" />
            <Thumb Name="PART_RightThumb" Cursor="SizeWE" Style="{StaticResource SliderThumb}" />
            <RepeatButton Name="PART_RightEdge" Style="{StaticResource SliderEdge}" />
            </StackPanel>
        </ControlTemplate>
        </Setter.Value>
    </Setter>
    </Style>
</ResourceDictionary>

これがどのように見えるかの例です（ブラシの色の値を変更することで色を変更できます）：

• 次の基本スタイルに置き換えます: http://avaloncontrolslib.codeplex.com/SourceControl/latest#trunk/AvalonControlsLibrary/Themes/RangeSlider.xaml

• コントロールに使用: http://avaloncontrolslib.codeplex.com/SourceControl/latest#trunk/AvalonControlsLibrary/Controls/RangeSlider.cs

.NET 4.5 でのコントロールの使用例

<UserControl x:Class="MyProject.MyUserControl"
         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:wpf="clr-namespace:Library.WPF;assembly=Library"
         MinWidth="700"
         HorizontalAlignment="Left"
         DataContext="{Binding RelativeSource={RelativeSource Self}}"
         mc:Ignorable="d">
<UserControl.Resources>
    <ResourceDictionary Source="/Library;component/WPF/RangeSlider/RangeSlider.xaml" />
</UserControl.Resources>

<StackPanel>
                <wpf:RangeSlider Width="400"
                                 MinRange="0"
                                 RangeStart="10"
                                 RangeStartSelected="{Binding MyValue_Min}"
                                 RangeStop="100"
                                 RangeStopSelected="{Binding MyValue_Max}" />
 </StackPanel>

上記の例では:

制御データが配置されているアセンブリ:ライブラリ

名前空間: Library.WPF

• /WPF/RangeSlider/RangeSlider.xaml <-- xaml スタイル
• /WPF/RangeSlider/RangeSlider.cs <-- 制御コード