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

        <!-- 资源:颜色 -->
        <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 Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Ellipse Width="16" Height="16" Fill="{StaticResource commonSlider_BrightColor}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- 播放进度条 -->
        <Style x:Key="playSlider" TargetType="Slider" >
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="IsSnapToTickEnabled" Value="True" />
            <Setter Property="IsMoveToPointEnabled" Value="True" />
            <Setter Property="Maximum" Value="10" />
            <Setter Property="Minimum" Value="0" />
            <Setter Property="Orientation" Value="Horizontal" />
            <Setter Property="TickFrequency" Value="0.01"></Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Height="20" HorizontalAlignment="Stretch" VerticalAlignment="Center" Margin="16,-4">
                            <Border BorderBrush="{x:Null}" CornerRadius="2" BorderThickness="0">
                                <Track Name="PART_Track">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton 
                                            Style="{StaticResource commonSlider_RepeatButton}"
                                            Height="4" 
                                            Background="{StaticResource commonSlider_BrightColor}"
                                            Command="Slider.DecreaseLarge"
                                            RenderTransformOrigin="0.5,0.5">
                                            <RepeatButton.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="-1"/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </RepeatButton.RenderTransform>
                                            <RepeatButton.Template>
                                                <ControlTemplate>
                                                    <Border Background="{TemplateBinding Background}" CornerRadius="0,2,2,0"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton
                                            Style="{StaticResource commonSlider_RepeatButton}"
                                            Height="4" 
                                            Background="{StaticResource playSlider_DarkColor}"
                                            Command="Slider.IncreaseLarge">
                                            <RepeatButton.Template>
                                                <ControlTemplate>
                                                    <Border Background="{TemplateBinding Background}" CornerRadius="0,2,2,0"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb Style="{StaticResource playSlider_Thumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <!-- 音量进度条 -->
        <Style x:Key="volumeSlider" TargetType="Slider" >
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="IsSnapToTickEnabled" Value="True" />
            <Setter Property="IsMoveToPointEnabled" Value="True" />
            <Setter Property="Maximum" Value="10" />
            <Setter Property="Minimum" Value="0" />
            <Setter Property="Orientation" Value="Vertical" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="TickFrequency" Value="0.01"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid Width="64" HorizontalAlignment="Center" Margin="0,20">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="40"/>
                                <RowDefinition Height="*"/>
                            </Grid.RowDefinitions>
                            <!-- 音量数值文本 -->
                            <TextBlock 
                                Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Stretch"
                                x:Name="TextBlock1"
                                Foreground="{StaticResource volumeSlider_TextColor}"
                                FontFamily="微软雅黑"
                                FontSize="20"
                                Text="{Binding Path=VolumeText,UpdateSourceTrigger=PropertyChanged,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:AnimationVideoPlayer}}"/>
                            <!-- 音量滑块 -->
                            <Border 
                                Grid.Row="1"
                                BorderBrush="Transparent" BorderThickness="0" CornerRadius="0">
                                <Track Name="PART_Track">
                                    <Track.DecreaseRepeatButton>
                                        <RepeatButton 
                                            Style="{StaticResource commonSlider_RepeatButton}"
                                            Width="4" 
                                            Background="{StaticResource commonSlider_BrightColor}" 
                                            Command="Slider.DecreaseLarge"
                                            RenderTransformOrigin="0.5,0.5">
                                            <RepeatButton.RenderTransform>
                                                <TransformGroup>
                                                    <ScaleTransform ScaleX="-1"/>
                                                    <SkewTransform/>
                                                    <RotateTransform/>
                                                    <TranslateTransform/>
                                                </TransformGroup>
                                            </RepeatButton.RenderTransform>
                                            <RepeatButton.Template>
                                                <ControlTemplate>
                                                    <Border Background="{TemplateBinding Background}" CornerRadius="0,0,2,2"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.DecreaseRepeatButton>
                                    <Track.IncreaseRepeatButton>
                                        <RepeatButton 
                                            Style="{StaticResource commonSlider_RepeatButton}"
                                            Width="4" 
                                            Background="{StaticResource volumeSlider_DarkColor}"
                                            Command="Slider.IncreaseLarge">
                                            <RepeatButton.Template>
                                                <ControlTemplate>
                                                    <Border Background="{TemplateBinding Background}" CornerRadius="2,2,0,0"/>
                                                </ControlTemplate>
                                            </RepeatButton.Template>
                                        </RepeatButton>
                                    </Track.IncreaseRepeatButton>
                                    <Track.Thumb>
                                        <Thumb  Style="{StaticResource volumeSlider_Thumb}"/>
                                    </Track.Thumb>
                                </Track>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

效果图:

资源图标: bh_pla_icon_point.png

猜你喜欢

转载自blog.csdn.net/FireGhost57/article/details/87170839