wpf-自定义进度条练习

项目需要自定义进度条,这里记录一下。
参考:
官方文档
在这里插入图片描述

基本修改流程

在设计窗口放一个slider,然后右键,编辑样式 → 编辑副本。我把资源放到App.xaml里,改写各部分(参见后文),然后引用:

<Slider Width="400"  Style="{DynamicResource 样式名字}"/>

RepeatButton

我觉得RepeatButton标注的是有点歧义的。比如我这里给RepeatButton写个样式:

<Style x:Key="ArrowRepeatButton" TargetType="{x:Type RepeatButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Path Stroke="DarkGray" Fill="DarkGray" Data="M 0,0 L 15,15 L 0,30"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

为slider写样式:

<Style x:Key="ArrowSlider" TargetType="{x:Type Slider}">
    <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}"/>
    <Setter Property="Template">
        <!-- pxy -->
        <Setter.Value>
            <ControlTemplate TargetType="Slider">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                        <RowDefinition Height="auto"/>
                    </Grid.RowDefinitions>
                    <!--TickBar Name="TopTick" Grid.Row="0" Placement="Top" Height="4" Visibility="Visible" Fill="Red" /-->
                    <Border Name="TrackBackground" Grid.Row="1" Height="4" Background="DarkGray"/>
                    <Track Name="PART_Track" Grid.Row="1">
                        <Track.DecreaseRepeatButton>
                            <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource ArrowRepeatButton}"/>
                        </Track.DecreaseRepeatButton>
                        <Track.IncreaseRepeatButton>
                            <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource ArrowRepeatButton}"/>
                        </Track.IncreaseRepeatButton>
                        <Track.Thumb>
                            <Thumb Name="Thumb" Style="{StaticResource DefaultSliderThumb}"/>
                        </Track.Thumb>
                    </Track>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    
</Style>

效果如下图,可以看出左侧的RepeatButton确实是在左侧尽头不动的,右侧的却是一直跟Thumb动的。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值