WPF slider progress bar style template with progress color display

Effect Diagram:

Just add this code to the front desk:

<UserControl.Resources> <!--brushes--<lineargradientbrush x:key= "Sliderbackground" startpoint= "0,0" E ndpoint= "0,1" > <gradientstop offset= "0" color= "#59ccfc"/> <gradientstop offset= "0.5" C
        Olor= "#00b3fe"/> <gradientstop offset= "1" color= "#59ccfc"/> </LinearGradientBrush> <lineargradientbrush x:key= "Sliderthumb" startpoint= "0,0" endpoint= "0,1" > <gradientstop Offset= " 0 "color=" #FFD9D3E8 "/> <!--<gradientstop offset=" 1 "color=" #dfdfdf "/>--> </lineargra dientbrush> <lineargradientbrush x:key= "Slidertext" startpoint= "0,0" endpoint= "0,1" > <Gra Dientstop offset= "0" color= "#7cce45"/> <gradientstop offset= "1" color= "#4ea017"/> </linear gradientbrush> <!--Slider template--<style x:key= "Slider_repeatbutton" targettype= "RepeatButton" &G
            T <setteR property= "Focusable" value= "false"/> <setter property= "Template" > <setter.value > <controltemplate targettype= "RepeatButton" > <border background= " {StaticResource Sliderbackground} "/> </ControlTemplate> </setter.value&gt
            ;
            </Setter> </Style> <style x:key= "Slider_repeatbutton1" targettype= "RepeatButton" >
                <setter property= "Focusable" value= "false"/> <setter property= "Template" > <Setter.Value> <controltemplate targettype= "RepeatButton" > <bor
            Der background= "Transparent"/> </ControlTemplate> </Setter.Value>
            </Setter> </Style> <style x:key= "Slider_thumb" targettype= "Thumb" > <setter Property= "Focusable" value= "false"/> <setter property= "Template" > <setter.value&
                    Gt <controltemplate targettype= "Thumb" > <Grid> <grid.colum Ndefinitions> <ColumnDefinition/> <columndefin ition/> </Grid.ColumnDefinitions> <border background= " {StaticResource Sliderbackground} "/> <border grid.columnspan=" 2 "cornerradius=" 4 "backg Round= "{StaticResource sliderthumb}" width= "> <!--<textblock text=" | | "
                        Horizontalalignment= "Center" verticalalignment= "center"/>--> </Border>
            </Grid> </ControlTemplate> </Setter.Value> </setter> </Style> <style x:key= "Slider_customstyle" targettype= "Slider" > <sett Er property= "Focusable" value= "false"/> <setter property= "Template" > <setter.valu
                            e> <controltemplate targettype= "Slider" > <Grid>
                                <!--<Grid.ColumnDefinitions> <columndefinition width= "/>" <ColumnDefinition/> <columndefinition width= "/&G"
                            T </Grid.ColumnDefinitions>--> <Grid.Effect> <
                            Dropshadoweffect blurradius= "shadowdepth=" 1 "/> </Grid.Effect> <!--<border horizontalalignment= "right" borderbrush= "Gray" borderthickness= "1,1,0,1" background= "{STaticresource Slidertext} "width=" cornerradius= "8,0,0,8"/>--> <!--<border Grid . Column= "2" horizontalalignment= "right" borderbrush= "Gray" borderthickness= "0,1,1,1" background= "{StaticResource Slidertext} "width=" "cornerradius=" 0,8,8,0 "/>--> <!--<textblock text=" {Binding Relativesource={relativesource Templatedparent},path=tag} "foreground=" White "verticalalignment=" Center " Horizontalalignment= "Center" fontsize= "/>-->" <!--<textblock grid.column= "2" Tex t= "{Binding elementname=part_track,path=value,stringformat=\{0:n0\}}" foreground= "White" verticalalignment= " Center "horizontalalignment=" center "fontsize=" "datacontext=" {Binding} "/>--> <bor Der Grid.column= "1" borderbrush= "Gray" borderthickness= "1" cornerradius= "8,0,0,8" > <
                    Track grid.column= "1" name= "Part_track" >                <Track.DecreaseRepeatButton> <repeatbutton style= "{Static
                                    Resource Slider_repeatbutton} "command=" Slider.decreaselarge "/>
                                        </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton>
                                <repeatbutton style= "{StaticResource slider_repeatbutton1}"
                                    command= "Slider.increaselarge"/> </Track.IncreaseRepeatButton> <Track.Thumb> <thumb style= "{Staticresou Rce slider_thumb} "/> </Track.Thumb> </trac k> </Border> </Grid> </controlte
             Mplate>   </Setter.Value> </Setter> </Style> </UserControl.Resources> 

Add the style of the progress bar here:

<Grid>
<slider style= "{StaticResource slider_customstyle}"/>

</Grid>