Slider control in wpf Development

Due to project requirements, I encountered some problems when using slider when I was learning wpf,

Slider control blur shadow

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

The default value of the slider control is Double, which is an integer:

1: Set the TickFrequency attribute

2: Set the IsSnapToTickEnabled attribute to align with the dial.

3: Set the dial line to the scroll bar: TickPlacement

4: set the Maximum value. Minimum value: Maximum = "100" Minimum = "0"

Example:

<Slider x: name = "sld_question" verticalignment = "Center" Maximum = "100" Minimum = "0" Interval = "5" LargeChange = "10" TickPlacement = "TopLeft" TickFrequency = "2.5">
<Slider. Effect>
<DropShadowEffect BlurRadius = "5" Color = "White" Opacity = "0.7" ShadowDepth = "7"/>
</Slider. Effect>
</Slider>

Set the style in style. xml in the style file:

<! -- Overall control of slider styles -->
<Style TargetType = "{x: Type Slider}">
<Setter Property = "SnapsToDevicePixels" Value = "true"/>
<Setter Property = "OverridesDefaultStyle" Value = "true"/>
<Setter Property = "paiaptotickenabled" Value = "True"/>
<! -- Use different styles based on the value of the Orientation attribute -->
<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" type = "MinHeight" text = "MinHeight"/>
<Setter Property = "Template" Value = "{StaticResource VerticalSlider}"/>
</Trigger>
</Style. Triggers>
</Style>

<! -- Horizontal slider style -->
<ControlTemplate x: Key = "HorizontalSlider" TargetType = "{x: Type Slider}">
<Grid>
<Grid. RowDefinitions>
<! -- Adjust layout -->
<RowDefinition Height = "Auto"/>
<RowDefinition Height = "Auto" MinHeight = "{TemplateBinding Slider. MinHeight}"/>
<RowDefinition Height = "Auto"/>
</Grid. RowDefinitions>
<! -- Width of the vertical line -->
<TickBar
Name = "TopTick"
SnapsToDevicePixels = "True"
Placement = "Top"
Fill = "{StaticResource GlyphBrushSlider }"
Height = "30"
Visibility = "Collapsed"/>
<! -- The width of the scroll bar in the middle of the slider -->
<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">
<! -- Style of the scroll bar on the left of the button -->
<Track. DecreaseRepeatButton>
<RepeatButton
Style = "{StaticResource SliderButtonStyle }"
Command = "Slider. DecreaseLarge"/>
</Track. DecreaseRepeatButton>
<! -- Button style -->
<Track. Thumb>
<Thumb Style = "{StaticResource SliderThumbStyle}"/>
</Track. Thumb>
<! -- Style of the scroll bar on the right of the button -->
<Track. IncreaseRepeatButton>
<RepeatButton
Style = "{StaticResource SliderButtonStyle }"
Command = "Slider. IncreaseLarge"/>
</Track. IncreaseRepeatButton>
</Track>
<! -- Width of the vertical line -->
<TickBar
Name = "BottomTick"
SnapsToDevicePixels = "True"
Grid. Row = "2"
Fill = "{TemplateBinding Foreground }"
Placement = "Bottom"
Height = "30"
Visibility = "Collapsed"/>
</Grid>
<! -- Event-driven, set different solid-line display styles based on different TickPlacement values -->
<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>
<! -- Vertical slider style -->
<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>

<! -- Other styles used -->

<Style x: Key = "SliderThumbStyle" TargetType = "{x: Type Thumb}">
<Setter Property = "SnapsToDevicePixels" Value = "true"/>
<Setter Property = "OverridesDefaultStyle" Value = "true"/>
<Setter Property = "Height" Value = "40"/>
<Setter Property = "Width" Value = "40"/>
<Setter Property = "Template">
<Setter. Value>
<! -- Circle button style -->
<ControlTemplate TargetType = "{x: Type Thumb}">
<Ellipse
Name = "Ellipse"
Fill = "{StaticResource NormalBrush }"
Stroke = "{StaticResource NormalBorderBrushSlider }"
StrokeThickness = "1"/>
<ControlTemplate. Triggers>
<Trigger Property = "IsMouseOver" Value = "True">
<Setter TargetName = "Ellipse" Property = "Fill" Value = "{StaticResource DarkBrushSlider}"/>
</Trigger>
<Trigger Property = "IsEnabled" Value = "false">
<Setter TargetName = "Ellipse" Property = "Fill" Value = "{StaticResource DisabledBackgroundBrush}"/>
</Trigger>
</ControlTemplate. Triggers>
</ControlTemplate>
</Setter. Value>
</Setter>
</Style>

<! -- Other styles -->

<! -- Add a slider style -->
<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 = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# FFF" Offset = "0.0"/>
<GradientStop Color = "# AAA" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x: Key = "NormalBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# FFF" Offset = "0.0"/>
<GradientStop Color = "# CCC" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x: Key = "LightBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# FFF" Offset = "0.0"/>
<GradientStop Color = "# EEE" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x: Key = "HorizontalLightBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# FFF" Offset = "0.0"/>
<GradientStop Color = "# EEE" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>
<LinearGradientBrush x: Key = "HorizontalNormalBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# FFF" Offset = "0.0"/>
<GradientStop Color = "# CCC" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>
<! -- Border Brushes -->
<LinearGradientBrush x: Key = "NormalBorderBrushSlider" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# CCC" Offset = "0.0"/>
<GradientStop Color = "#444" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x: Key = "HorizontalNormalBorderBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "# CCC" Offset = "0.0"/>
<GradientStop Color = "#444" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x: Key = "DefaultedBorderBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "#777" Offset = "0.0"/>
<GradientStop Color = "#000" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x: Key = "PressedBorderBrush" StartPoint = "" EndPoint = "">
<GradientBrush. GradientStops>
<GradientStopCollection>
<GradientStop Color = "#444" Offset = "0.0"/>
<GradientStop Color = "#888" Offset = "1.0"/>
</GradientStopCollection>
</GradientBrush. GradientStops>
</LinearGradientBrush>

<SolidColorBrush x: Key = "LightBorderBrush" Color = "# AAA"/>

<! -- Miscellaneous Brushes -->
<SolidColorBrush x: Key = "GlyphBrushSlider" Color = "#444"/>