WPF 背景顏色漸變的滑動條實現
阿新 • • 發佈:2018-11-01
本章講述:在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"/>
效果圖