WPF自制控件（三）滑块

滑块

效果图如下

<UserControl x:Class="Water_Leak_Detection_System.UserControl2"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:Water_Leak_Detection_System"
             mc:Ignorable="d" 
             d:DesignHeight="100" d:DesignWidth="630">
    <UserControl.Resources>
        <!--笔刷-->
        <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="1,0">
            <GradientStop Offset="0" Color="#0097DC"/>
            <GradientStop Offset="1" Color="#67D7E8"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="SliderText"  StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#7cce45"/>
            <GradientStop Offset="1" Color="#4ea017"/>
        </LinearGradientBrush>


        <!--Slider模板-->
        <Style x:Key="Slider_RepeatButton" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton" >
                        <Border Background="{StaticResource SliderBackground}" CornerRadius="5,0,0,5" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="Slider_RepeatButton1" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Background="#313131" CornerRadius="0,5,5,0" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>


        <Style x:Key="Slider_Thumb" TargetType="Thumb">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid Margin="-9.184,0,0,0">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Border Grid.ColumnSpan="2" CornerRadius="4" Width="45" Margin="0,0,0,-9">
                                <Border.Background>
                                    <ImageBrush ImageSource="Resources/silder_icon.png"/>
                                </Border.Background>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="Slider_CustomStyle" TargetType="Slider">
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <Grid.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="1" />
                            </Grid.Effect>
                            <Border Grid.Column="1" BorderBrush="White" BorderThickness="3" CornerRadius="7,7,7,7">
                                <Track Grid.Column="1" Name="PART_Track">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton}"  
                                Command="Slider.DecreaseLarge"/>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton Style="{StaticResource Slider_RepeatButton1}"  
                                Command="Slider.IncreaseLarge"/>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource Slider_Thumb}" Margin="0,-7.144,-3.06,-4.08" RenderTransformOrigin="0.398,0.979"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid Background="#FFB4B0B0">
        <Slider Height="15" Width="620" Style="{StaticResource Slider_CustomStyle}"  Maximum="10" Minimum="0" Value="5" Margin="5,50,5,35"/>

        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="15,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="75,30,0,0" Stretch="Fill" Stroke="Black" Width="1.23" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="135,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="195,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="255,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="315,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="365,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="425,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="485,30,0,0" Stretch="Fill" Stroke="Black" Width="1.23" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="545,30,0,0" Stretch="Fill" Stroke="Black" Width="1.23" HorizontalAlignment="Left" VerticalAlignment="Top"/>
        <Path Data="M96,202 L96,181.16327" Height="12.96" Margin="605,30,0,0" Stretch="Fill" Stroke="Black" Width="1.231" HorizontalAlignment="Left" VerticalAlignment="Top"/>


        <TextBlock HorizontalAlignment="Left" Height="13" Margin="11,13,0,0" TextWrapping="Wrap" Text="0" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="69,13,0,0" TextWrapping="Wrap" Text="10" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="131,13,0,0" TextWrapping="Wrap" Text="20" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="186,13,0,0" TextWrapping="Wrap" Text="30" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="248,13,0,0" TextWrapping="Wrap" Text="40" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="310,13,0,0" TextWrapping="Wrap" Text="50" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="357,13,0,0" TextWrapping="Wrap" Text="60" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="418,13,0,0" TextWrapping="Wrap" Text="70" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="480,13,0,0" TextWrapping="Wrap" Text="80" VerticalAlignment="Top" Width="18"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="534,13,0,0" TextWrapping="Wrap" Text="90" VerticalAlignment="Top" Width="19"/>
        <TextBlock HorizontalAlignment="Left" Height="13" Margin="593,13,0,0" TextWrapping="Wrap" Text="100" VerticalAlignment="Top" Width="27"/>
    </Grid>
</UserControl>