有沒有一個WPF控件來選擇一個看起來像滑塊的範圍？

Question

是否有一個WPF控件看起來像一個滑塊（或者滑塊本身），同時具有最低和最高值，而不是單個值，讓用戶選擇一個範圍？

Answer 1

您可以使用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); 
} 

Answer 2

滑動條有一個屬性IsSelectionRangeEnabled。檢查樣品： http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/a9eb8697-3ae4-4045-9508-a75d6168a8af/

Answer 3

是我的嘗試是將兩個滑塊一個超過他其他的，所以它看起來像範圍滑塊 然後，可以設置的值，一個滑塊分鐘，肛對於最大值，併爲更大和更小的值添加邏輯。希望它的工作原理，在這種情況下，你需要不添加任何外部第三方庫

Answer 4

UPDATE：阿瓦隆控制是老前身WPF擴展工具包，它現在包括AvalonDock。

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

Answer 5

的MahApps.Metro庫提供了一個巨大的RangeSlider控制。這是從演示應用其中的一個例子：

Answer 6

由於@kmatyaszek已經說過AvalonControlsLibrary是控制偉大的自由（微軟公共許可（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

• 並用於控制：在.NET 4控制的使用 http://avaloncontrolslib.codeplex.com/SourceControl/latest#trunk/AvalonControlsLibrary/Controls/RangeSlider.cs

實施例。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 < - 控制代碼