wpf 开发中的slider控件

最新推荐文章于 2025-10-07 10:30:00 发布

原创最新推荐文章于 2025-10-07 10:30:00 发布 · 9.8k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#wpf #setter #command #border

本文详细介绍了在WPF中使用Slider控件时如何设置阴影效果、确保value值为整数以及调整样式。通过设置TickFrequency、IsSnapToTickEnabled和TickPlacement属性，可以实现滑块值的整数化。同时，展示了如何在style.xml文件中定义Slider的样式，包括水平和垂直方向的模板，并通过Trigger控制不同TickPlacement的显示。

因为项目需要，在学习wpf,在这期间在用slider时遇到了一些问题，现整理如下，

slider控件模糊阴影

<Slider.Effect>
<DropShadowEffect BlurRadius="5" Color="White" Opacity="0.7" ShadowDepth="7"/>
</Slider.Effect>

slider控件value值默认为Double类型，让其为整数方式：

1：设置 TickFrequency属性

2：设置IsSnapToTickEnabled属性：以刻度线对齐

3：设置刻度线出线在滚动条的那边：TickPlacement

4：设置最大值，最小值： Maximum="100" Minimum="0"

例子如下：

在样式文件style.xml中设置采用那种样式：

<Style TargetType="{x:Type Slider}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsSnapToTickEnabled" Value="True"/>
        
        <Style.Triggers>
            <Trigger Property="Orientation" Value="Horizontal">
                <Setter Property="MinWidth" Value="104" />
                <Setter Property="MinHeight" Value="21" />
                <Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
            </Trigger>
            <Trigger Property="Orientation" Value="Vertical">
                <Setter Property="MinWidth" Value="21" />
                <Setter Property="MinHeight" Value="104" />
                <Setter Property="Template" Value="{StaticResource VerticalSlider}" />
            </Trigger>
        </Style.Triggers>
    </Style>

<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.RowDefinitions>
                
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto" MinHeight="{TemplateBinding Slider.MinHeight}" />
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
            
            <TickBar
      Name="TopTick"
      SnapsToDevicePixels="True"
      Placement="Top"
      Fill="{StaticResource GlyphBrushSlider}"
      Height="30"
      Visibility="Collapsed" />
            
            <Border
      Name="TrackBackground"
      Margin="0"
      CornerRadius="2"
      Height="10"
      Grid.Row="1"
      Background="{StaticResource LightBrush}"
      BorderBrush="{StaticResource NormalBorderBrushSlider}"
      BorderThickness="1" />
            <Track Grid.Row="1" Name="PART_Track">
                
                <Track.DecreaseRepeatButton>
                    <RepeatButton
         Style="{StaticResource SliderButtonStyle}"
          Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
                
                <Track.IncreaseRepeatButton>
                    <RepeatButton
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
            
            <TickBar
      Name="BottomTick"
      SnapsToDevicePixels="True"
      Grid.Row="2"
      Fill="{TemplateBinding Foreground}"
      Placement="Bottom"
      Height="30"
      Visibility="Collapsed" />
        </Grid>
        
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    
    <ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto" MinWidth="{TemplateBinding Slider.MinWidth}"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <TickBar
      Name="TopTick"
      SnapsToDevicePixels="True"
      Placement="Left"
      Fill="{StaticResource GlyphBrushSlider}"
      Width="30"
      Visibility="Collapsed" />
            <Border
      Name="TrackBackground"
      Margin="0"
      CornerRadius="2"
      Width="10"
      Grid.Column="1"
      Background="{StaticResource HorizontalLightBrush}"
      BorderBrush="{StaticResource HorizontalNormalBorderBrush}"
      BorderThickness="1" />
            <Track Grid.Column="1" Name="PART_Track">
                <Track.DecreaseRepeatButton>
                    <RepeatButton
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.DecreaseLarge" />
                </Track.DecreaseRepeatButton>
                <Track.Thumb>
                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                </Track.Thumb>
                <Track.IncreaseRepeatButton>
                    <RepeatButton
          Style="{StaticResource SliderButtonStyle}"
          Command="Slider.IncreaseLarge" />
                </Track.IncreaseRepeatButton>
            </Track>
            <TickBar
      Name="BottomTick"
      SnapsToDevicePixels="True"
      Grid.Column="2"
      Fill="{TemplateBinding Foreground}"
      Placement="Right"
      Width="30"
      Visibility="Collapsed" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="TickPlacement" Value="TopLeft">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="BottomRight">
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="TickPlacement" Value="Both">
                <Setter TargetName="TopTick" Property="Visibility" Value="Visible"/>
                <Setter TargetName="BottomTick" Property="Visibility" Value="Visible"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

<Style x:Key="SliderButtonStyle" TargetType="{x:Type RepeatButton}">
        <Setter Property="SnapsToDevicePixels" Value="true"/>
        <Setter Property="OverridesDefaultStyle" Value="true"/>
        <Setter Property="IsTabStop" Value="false"/>
        <Setter Property="Focusable" Value="false"/>
        <Setter Property="Height" Value="40"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type RepeatButton}">
                    <Border Background="Transparent" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <LinearGradientBrush x:Key="DarkBrushSlider" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#AAA" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
        <GradientBrush.GradientStops>
            <GradientStopCollection>
                <GradientStop Color="#FFF" Offset="0.0"/>
                <GradientStop Color="#CCC" Offset="1.0"/>
            </GradientStopCollection>
        </GradientBrush.GradientStops>
    </LinearGradientBrush>