WPF的自定义播放进度条样式

最新推荐文章于 2025-06-16 17:13:01 发布

原创

最新推荐文章于 2025-06-16 17:13:01 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#WPF #播放进度条

本文介绍如何在WPF中创建自定义的播放进度条样式，通过结合资源图标，实现独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        <!-- 资源：颜色 -->
        <SolidColorBrush x:Key="commonSlider_BrightColor" Color="#2ED6CC"/>
        <SolidColorBrush x:Key="playSlider_DarkColor" Color="#989A9A"/>
        <SolidColorBrush x:Key="volumeSlider_DarkColor" Color="#EEEEEE"/>
        <SolidColorBrush x:Key="volumeSlider_TextColor" Color="#999999"/>
        <!-- 进度条滑块 -->
        <Style x:Key="commonSlider_RepeatButton" TargetType="RepeatButton">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="BorderBrush" Value="Transparent"/>
        </Style>
        <!-- 播放进度条圆钮 -->
        <Style x:Key="playSlider_Thumb" TargetType="Thumb">
            <Setter Property="BorderBrush" Value="{x:Null}" />
            <Setter Property="BorderThickness" Value="0" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Grid Height="20" Width="20">
                            <Path Margin="-1,0,0,0" Data="M0,10 L11,10" Stroke="{StaticResource commonSlider_BrightColor}" StrokeThickness="4"/>
                            <Path Margin="0,0,-1,0" Data="M9,10 L21,10" Stroke="{StaticResource playSlider_DarkColor}" StrokeThickness="4"/>
                            <!--<Viewbox Height="20" Stretch="Uniform">
                                <Ellipse Width="12" Height="12" Fill="{StaticResource Slider_BrightColor}" >
                                    <Ellipse.Effect>
                                        <BlurEffect Radius="4" KernelType="Gaussian" RenderingBias="Quality"/>
                                    </Ellipse.Effect>
                                </Ellipse>
                            </Viewbox>-->
                            <Image Width="20" Height="20" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill"
                                   Source="/Resource/Image/Prepare/AnimationVideoPlayer/bh_pla_icon_point.png">
                            </Image>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- 音量进度条圆钮 -->
        <Style x:Key="volumeSlider_Thumb" TargetType="Thumb">
            <Setter Prope