3

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

4

7 回答 7

12

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

演示应用程序中的范围滑块示例

于 2015-03-02T15:02:54.457 回答
4

滑块栏有一个属性 IsSelectionRangeEnabled。检查示例： http ://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a9eb8697-3ae4-4045-9508-a75d6168a8af/

于 2013-04-04T15:10:25.560 回答
4

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

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

于 2015-02-18T19:47:51.597 回答
2

我尝试将两个滑块放在另一个上面，所以它看起来像一个范围滑块然后，您可以设置值，一个滑块用于最小值，另一个滑块用于最大值，并添加更大和更小的值的逻辑。希望它有效，在这种情况下，您无需添加任何外部第三方库

于 2014-05-09T07:35:31.170 回答
2

正如@kmatyaszek已经说过的， AvalonControlsLibrary是很棒的免费（Microsoft 公共许可证（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>

这是它的外观示例（您可以通过更改画笔颜色值来更改颜色）：

在此处输入图像描述

.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 <--控制代码
于 2016-08-20T19:26:23.570 回答
1

您可以使用AvalonControlsLibrary中的RangeSlider。

例子：

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

阿瓦隆在哪里：

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); 
}
于 2013-04-04T16:12:50.417 回答
1

我会推荐 Xceed 的 RangeSlider。

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

于 2020-03-06T16:47:58.490 回答