现在的位置: 首页 > 综合 > 正文

继续聊WPF——Slider控件

2013年05月14日 ⁄ 综合 ⁄ 共 4488字 ⁄ 字号 评论关闭

 

Slider控件,讲行通俗一点就是我们很常见的滑块,控件的外观上显示一系例刻度值,并存在一个可以被拖动的滑块,用户可以通过拖动滑块来控制控件的值。
如下图所示,是Windows系统的音量调节滑块。
 
 

下图所示为QQ音频聊天设置窗口中的音量调节滑块。

 

 

这样,我们就以很直观的方式认识了Slider控件。

接下来看看该控件的构成:

 

然后,查看Slider类的定义,从中找出主体部分。

 
[LocalizabilityAttribute(LocalizationCategory.Ignore)]
[TemplatePartAttribute(Name = "PART_SelectionRange", Type = typeof(FrameworkElement))]
[TemplatePartAttribute(Name = "PART_Track", Type = typeof(Track))]
public class Slider : RangeBase

其中,我们看到有一个部件很重要,那就是命名为PART_Track的部件,它是一个Track控件,在前面自定义滚动条的时候我们用到它,它由两个RepeatButton和一个Thumb组成,RepeatButton与普通的Button没太大区别,只不过它可以记录单击次数和设置响应延迟时间罢了,这里完全只把它当作按钮来用。

整个Track控件就是通过改变Thumb的位置和两RepeatButton的大小来动态显示该控件的外观的。

为了显示刻度线,一个TickBar控件是必须,这个控件很简单,它没有模板也不需要设置样式,只需用好几个属性就行了。

Maximum——最大值,与进度条类似;

Minimum——对应的,表示最小值;

Ticks——设置刻度线的位置,可以设置多个值,如果刻度需要不均匀显示的情况下可以使用该属性;

TickFrequency——刻度间隔,就是刻度线之间的间距,如果最小值是0,最大值是100,TickFrequency设置为5,那么,该刻度条将均匀地显示20处刻度线。

注意:TickFrequency与Ticks不能同时使用,因为它们一个是均匀分布,一个是不均匀分布,同时设置会发生冲突。

Placement——Tick在Slider控件中的位置,如果Slider是水平的,那么就是上或下,如果Slider控件是垂直的,那么就是左或右。

下面看一个Tick控件的例子,这只是演示,Tick单独使用没有意义。

 

        <TickBar Height="15" Width="180" Ticks="10,35,50,70" Maximum="100"
                 Minimum="0" Fill="DarkMagenta" Placement="Top" />

 

好了,现在我们可以自定义一个Slider,这个例子是水平的,它用一个Grid来布局,共三行,最上和最下行分别放一个TickBar用于显示刻度,中间放一个Track为主体部分。

为了能动态显示刻度值,我们把Slider的Value属性绑定到TextBlock的Text属性,这样,只要Slider控件的值发生改变,TextBlock中就能动态显示,前面我们说过了,WPF的属性系统都是依赖项属性,因此可以动态关联。

 

 

 

 

<Window x:Class="Sample_TickBar.Win2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Win2" Height="300" Width="550">
    <Window.Resources>
        <Style x:Key="StyleForRepeatButton" TargetType="{x:Type RepeatButton}">
            <Style.Setters>
                <Setter Property="Background">
                    <Setter.Value>
                        <LinearGradientBrush
                            StartPoint="0.5,0"
                            EndPoint="0.5,1">
                            <GradientStop Color="LightGreen" Offset="0"/>
                            <GradientStop Color="Yellow" Offset="1"/>
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="Height" Value="10"/>
                <Setter Property="BorderBrush" Value="Transparent"/>
                <Setter Property="Focusable" Value="False"/>
            </Style.Setters>
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="Background">
                        <Setter.Value>
                            <LinearGradientBrush StartPoint="0.5,0"
                                                 EndPoint="0.5,1">
                                <GradientStop Color="LightBlue" Offset="0"/>
                                <GradientStop Color="SkyBlue" Offset="1"/>
                            </LinearGradientBrush>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>
        <ControlTemplate x:Key="tmpThumb" TargetType="{x:Type Thumb}">
            <Ellipse Name="e" Width="13" MinHeight="20" Fill="Blue"/>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="e" Property="Fill" Value="Red"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
        <ControlTemplate x:Key="tmp" TargetType="{x:Type Slider}">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"/>
                    <RowDefinition Height="auto" MinHeight="25"/>
                    <RowDefinition Height="auto"/>
                </Grid.RowDefinitions>
                <TickBar x:Name="top" Fill="Magenta" Grid.Row="0" HorizontalAlignment="Stretch"
                         Placement="Top" Height="8"
                         Visibility="Collapsed"/>
                <Track x:Name="PART_Track" Grid.Row="1" HorizontalAlignment="Stretch">
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource StyleForRepeatButton}"
                                      Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource StyleForRepeatButton}"
                                      Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Height="20" Template="{StaticResource tmpThumb}"/>
                    </Track.Thumb>
                </Track>
                <TickBar x:Name="Bottom" Grid.Row="2" Fill="Magenta" HorizontalAlignment="Stretch"
                         Visibility="Collapsed" Placement="Bottom" Height="8"/>
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="TickPlacement" Value="TopLeft">
                    <Setter TargetName="top" Property="Visibility" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="BottomRight">
                    <Setter Property="Visibility" TargetName="Bottom" Value="Visible"/>
                </Trigger>
                <Trigger Property="TickPlacement" Value="Both">
                    <Setter TargetName="top" Property="Visibility" Value="Visible"/>
                    <Setter TargetName="Bottom" Property="Visibility" Value="Visible"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </Window.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <Slider x:Name="SliderTest" Grid.Row="0"  Margin="10,5,10,5" Maximum="100" Minimum="0" TickFrequency="1"
                Template="{StaticResource tmp}"
                Value="20" TickPlacement="BottomRight"/>
        <TextBlock Grid.Row="1" Text="{Binding Path=Value,ElementName=SliderTest}"
                   FontFamily="宋体" FontSize="24" FontWeight="Bold"
                   Margin="150,0,150,0" HorizontalAlignment="Center"/>
    </Grid>
</Window>

 

 

抱歉!评论已关闭.