WPF 背景颜色渐变的滑动条实现

原文:WPF 背景颜色渐变的滑动条实现

版权声明：本文为博主原创文章，未经博主允许不得转载。https://blog.csdn.net/BYH371256/article/details/83507352

本章讲述：在WPF中，背景颜色渐变的滑动条功能实现，主要通过修改Slider的样式；

该示例就以：绿-红颜色渐变；

样式代码

<Geometry x:Key="SliderThumbOuterBorderGeometry">

	M9.5,5 C9.5,7.4852814 7.4852814,9.5 5,9.5 C2.5147186,9.5 0.5,7.4852814 0.5,5 C0.5,2.5147186 2.5147186,0.5 5,0.5 C7.4852814,0.5 9.5,2.5147186 9.5,5 z

</Geometry>

<Style x:Key="HorizontalSliderThumbStyle_Horiz" TargetType="{x:Type Thumb}">

	<Setter Property="Focusable" Value="false"/>

	<Setter Property="OverridesDefaultStyle" Value="true"/>

	<Setter Property="Height" Value="20"/>

	<Setter Property="Width" Value="11"/>

	<Setter Property="Foreground" Value="Transparent"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type Thumb}">

				<Canvas SnapsToDevicePixels="true">

					<Canvas.RenderTransform>

						<TranslateTransform X="0" Y="5.0"/>

					</Canvas.RenderTransform>

					<Path x:Name="Background"  Data="{StaticResource SliderThumbOuterBorderGeometry}" Fill="#FF1F9CF0" />

					<Path x:Name="InnerBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="White"  />

					<Path x:Name="OuterBorder" Data="{StaticResource SliderThumbOuterBorderGeometry}" Stroke="Transparent" />

				</Canvas>

				<ControlTemplate.Triggers>

					<Trigger Property="IsMouseOver" Value="true">

						<Setter Property="Fill" TargetName="Background" Value="#FF29AFF5"/>

						<Setter Property="Stroke" TargetName="OuterBorder" Value="White"/>

					</Trigger>

					<Trigger Property="IsDragging" Value="true">

					</Trigger>

				</ControlTemplate.Triggers>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<!--green red style-->

<Style x:Key="ColorSliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">

	<Setter Property="OverridesDefaultStyle" Value="true"/>

	<Setter Property="IsTabStop" Value="false"/>

	<Setter Property="Focusable" Value="false"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type RepeatButton}">

				<Rectangle Fill="Transparent"/>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

<Style x:Key="SliderStyle_GreenRed" TargetType="{x:Type Slider}">

	<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>

	<Setter Property="Background" Value="Transparent"/>

	<Setter Property="Foreground" Value="White"/>

	<Setter Property="Template">

		<Setter.Value>

			<ControlTemplate TargetType="{x:Type Slider}">

				<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"

			Background="{TemplateBinding Background}" SnapsToDevicePixels="true">

					<Grid Margin="0">

						<Grid.RowDefinitions>

							<RowDefinition Height="Auto"/>

							<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>

							<RowDefinition Height="Auto"/>

						</Grid.RowDefinitions>

						<TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Top" Grid.Row="0"

					 Minimum="0" Maximum="5" Visibility="Collapsed"/>

						<TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>

						<Border x:Name="TrackBackground" BorderBrush="Black" BorderThickness="0" Height="4.0" Margin="5,0"

					Grid.Row="1" VerticalAlignment="center" CornerRadius="3">

							<Border.Background>

								<LinearGradientBrush StartPoint="0,0" EndPoint="1,0"   >

									<GradientStop Offset="0.0" Color="#FF00FFFF"/>

									<GradientStop Offset="1.0" Color="#FF0000"/>

								</LinearGradientBrush>

							</Border.Background>

						</Border>

						<Track x:Name="PART_Track" Grid.Row="1">

							<Track.DecreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ColorSliderRepeatButtonStyle}"/>

							</Track.DecreaseRepeatButton>

							<Track.IncreaseRepeatButton>

								<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ColorSliderRepeatButtonStyle}"

								  HorizontalAlignment="Right" Width="153"/>

							</Track.IncreaseRepeatButton>

							<Track.Thumb>

								<Thumb x:Name="Thumb" Style="{StaticResource HorizontalSliderThumbStyle_Horiz}" Margin="0,1,0,0"/>

							</Track.Thumb>

						</Track>

					</Grid>

				</Border>

				<ControlTemplate.Triggers>

					<Trigger Property="TickPlacement" Value="TopLeft">

						<Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,0"/>

					</Trigger>

					<Trigger Property="TickPlacement" Value="BottomRight">

						<Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,0"/>

					</Trigger>

					<Trigger Property="TickPlacement" Value="Both">

					</Trigger>

					<Trigger Property="IsSelectionRangeEnabled" Value="true">

					</Trigger>

					<Trigger Property="IsKeyboardFocused" Value="true">

						<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>

					</Trigger>

				</ControlTemplate.Triggers>

			</ControlTemplate>

		</Setter.Value>

	</Setter>

</Style>

引用示例代码

<Slider Margin="10,5" x:Name="GreenRed" HorizontalAlignment="Left"  VerticalAlignment="Center" Height="20" Width="250"

                Value="{Binding RedColor, Mode=TwoWay}"  Style="{DynamicResource  SliderStyle_GreenRed}" IsSnapToTickEnabled="True" Minimum="-100"

                Maximum="100" Background="Transparent"/>

效果图