当前位置: 代码迷 >> 综合 >> wpf slider 进度条模板
  详细解决方案

wpf slider 进度条模板

热度:79   发布时间:2023-12-16 22:10:59.0

效果图


<UserControl x:Class="UserControl1"

             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" 
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
        <!--笔刷-->
        <LinearGradientBrush x:Key="SliderBackground"  StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#59ccfc"/>
            <GradientStop Offset="0.5" Color="#00b3fe"/>
            <GradientStop Offset="1" Color="#59ccfc"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="SliderThumb"  StartPoint="0,0" EndPoint="0,1">
            <GradientStop Offset="0" Color="#FFD9D3E8"/>
        </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}" />
                    </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="Transparent" />
                    </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>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <Border Background="{StaticResource SliderBackground}"/>
                            <Border Grid.ColumnSpan="2" CornerRadius="4"  Background="{StaticResource SliderThumb}" Width="15">
                            </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="Gray" BorderThickness="1" CornerRadius="8,0,0,8">
                                <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}"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Slider Height="10" Width="300"  Style="{StaticResource Slider_CustomStyle}"  />
    </Grid>
</UserControl>