有没有一种类似滑动条的WPF控件可以选择范围？

Question

是否有一个 WPF 控件看起来像滑块（或者可能是 Slider 本身），它具有最小值和最大值，而不是单个值，以便让用户选择范围？

- Michel Keijzers

Answer 1

MahApps.Metro库提供了一个很棒的RangeSlider控件。下面是演示应用程序中的一个示例：

- Patrick Quirk

---

一张图片胜过千言万语。+1 - None

Answer 2

滑动条具有属性IsSelectionRangeEnabled。请查看以下示例： http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a9eb8697-3ae4-4045-9508-a75d6168a8af/

- urlreader

---

只允许您在滑块的选择处进行突出显示。 - MikeT

Answer 3

更新：Avalon控件是WPF扩展工具包的前身，现在已经包含了AvalonDock。

RangeSlider是WPF扩展工具包的一部分。

- Clint StLaurent

---

Extended.Wpf.Toolkit是商业软件（非商业项目免费）。 - ed22

Answer 4

如@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

命名空间：Library.WPF

• /WPF/RangeSlider/RangeSlider.xaml <-- xaml 样式
• /WPF/RangeSlider/RangeSlider.cs <-- 控件代码

- Ony

Answer 5

我的尝试是将两个滑块叠在一起，使其看起来像一个范围滑块。然后，你可以设置值，一个滑块用于最小值，另一个用于最大值���并添加大于和小于的逻辑。希望它能够正常工作，在这种情况下你不需要添加任何外部第三方库。

- user3608531

Answer 6

你可以使用RangeSlider来自AvalonControlsLibrary。

例子：

<avalon:RangeSlider RangeStart="0" RangeStop="100"
                    RangeSelectionChanged="RangeSlider_RangeSelectionChanged"/>

在哪里找到avalon：

xmlns:avalon="http://schemas.AvalonControls/AvalonControlsLibrary/Controls"

RangeSelectionChanged事件处理程序：

private void RangeSlider_RangeSelectionChanged(object sender, AC.AvalonControlsLibrary.Controls.RangeSelectionChangedEventArgs e)
{
    Console.WriteLine("e.NewRangeStart: " + e.NewRangeStart);
    Console.WriteLine("e.NewRangeStop: " + e.NewRangeStop); 
}

- kmatyaszek

Answer 7

我建议使用Xceed的RangeSlider。

https://github.com/xceedsoftware/wpftoolkit/wiki/RangeSlider

- Jawad Sabir

---

谢谢这个添加...我喜欢Xceed，所以它适合这个项目，但是我在几年前放弃了它，但是将来知道这一点很好。 - Michel Keijzers