wpf silder进度条的样式模板,带有进度颜色显示

效果图:

只需在前台加上这段代码即可:

<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"/>
            <!--<GradientStop Offset="1" Color="#dfdfdf"/>-->
        </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">
                                <!--<TextBlock Text="||" HorizontalAlignment="Center" VerticalAlignment="Center"/>-->
                            </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.ColumnDefinitions>
                                <ColumnDefinition Width="80"/>
                                <ColumnDefinition/>
                                <ColumnDefinition Width="40"/>
                            </Grid.ColumnDefinitions>-->
                            <Grid.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="1" />
                            </Grid.Effect>
                            <!--<Border HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="1,1,0,1" Background="{StaticResource SliderText}" Width="80" CornerRadius="8,0,0,8"/>-->
                            <!--<Border Grid.Column="2" HorizontalAlignment="Right" BorderBrush="Gray" BorderThickness="0,1,1,1" Background="{StaticResource SliderText}" Width="40" CornerRadius="0,8,8,0"/>-->
                            <!--<TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent},Path=Tag}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14"/>-->
                            <!--<TextBlock Grid.Column="2" Text="{Binding ElementName=PART_Track,Path=Value,StringFormat=\{0:N0\}}" Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" DataContext="{Binding}" />-->
                            <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  Style="{StaticResource Slider_CustomStyle}"  />

</Grid>

时间: 2024-10-02 05:01:00

wpf silder进度条的样式模板,带有进度颜色显示的相关文章

(六十八)进度条自定义样式(例如进度颜色、背景描边、填充、圆角)的方法

一.说明. <1>在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中.<2>在某些操作的进度中的可视指示器,为用户呈现操作的进度,还它有一个次要的进度条,用来显示中间进度,如在流媒体播放的缓冲区的进度.一个进度条也可不确定其进度.在不确定模式下,进度条显示循环动画.这种模式常用于应用程序使用任务的长度是未知的. 二.ProgressBar的两个进度. 一个是android:progress;另一个是android:secondaryP

ProgressBar学习笔记,自定义横向进度条的样式(包含ActionBar上面的进度条)

 点显示进度条后→   android:max="100" 进度条的最大值 android:progress  进度条已经完成的进度值 android:progressDrawable 已经完成的进度条轨道显示的Drawable对象 indeterminateDrawable   设置绘制不显示进度的进度条的Drawable对象 android:indeterminate 设置为true,进度条不精准显示进度 android:indeterminateDuration  设置不精准显示

HTML5 CSS3 诱人的实例 : 网页加载进度条的实现,下载进度条等

今天给大家带来一个比较炫的进度条,进度条在一耗时操作上给用户一个比较好的体验,不会让用户觉得在盲目等待,对于没有进度条的长时间等待,用户会任务死机了,毫不犹豫的关掉应用:一般用于下载任务,删除大量任务,网页加载等:如果有使用html5为手机布局的,也可以用于手机中~ 效果图: 1.html结构: <div id="loadBar01" class="loadBar"> <div> <span class="percent&qu

自定义Android进度条ProgressBar样式

进度条在Android应用中随处或见,都是为用户提供一个提示,用来增加用户的体验度!进度条样式多种多样,有圆形的,有条形的,有垂直方向的,也有水平方向的.Android系统也是我们提供了好几种默认的样式,今天我们来讲讲自定义样式的ProgressBar. 下面用个很小(又是很小)的例子: -------------------------xml布局-------------------------------------------- <ProgressBar android:id="@+

progress进度条的样式修改

由于公司在做的公众号上需要进度条,我就想着用progress标签,可是progress标签很难修改样式,因而在网上查询了一番. 现在总结一下. progress是H5新标签,主要用于显示进度条.由于他是H5新标签,因而它存在一些兼容问题. 看看他的兼容性: 由此可看,progress样式修改兼容性不是很好. 因而需要兼容写法: Chrome下: 1 progress{ 2 width: 168px; 3 height: 5px; 4 color:#f00; 5 background:#EFEFF

android 进度条ProgressBar样式设置

普通圆形ProgressBar 该类型进度条也就是一个表示运转的过程,例如发送短信,连接网络等等,表示一个过程正在执行中.一般只要在XML布局中定义就可以了. <progressBar Android:id="@+id/widget43" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="

自定义进度条(圆形、横向进度条)

自定义进度条实现大体流程 1.自定义属性声明(attrs文件) 2.自定义属性获取 3.测量(onMeasure) 4.绘制(onDraw) 代码: attrs文件: <!-- 自定义声明 --> <attr name="progress_unreach_color" format="color"></attr> <attr name="progress_unreach_height" format=&q

进度条控件CProgressCtrl实现进度滚动效果

关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL fMarqueeMode, _In_ int nInterval),第一个参数为开关,第二个参数指定滚动时间.且控件应该包含 PBS_MARQUEE风格,eg:m_ProgressCtl.Create(WS_CHILD|WS_VISIBLE|PBS_MARQUEE,CRect(100,200,25

做进度条 根据自己的数据显示进度

做了很多种方法 1: 线程 thread的方法 2: backGroundWorker的方法 3: 自定义线程类 4: 做一个进度条的窗体  通过自定义设置做(最方便快捷) public partial class waitingProcessbar : Form { public waitingProcessbar() { InitializeComponent(); } /// <summary> /// 设定百分比 /// </summary> private int per