WPF实现斜纹圆角进度条样式

佚名 6年前 (2019-04-16) 随笔 1743人围观抢沙发百度已收录

运行效果：

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

进度条样式：

<!--进度条样式-->
<LinearGradientBrush x:Key="ProgressBar.Progress" StartPoint="0,-0.15" EndPoint="0.04,0.04" SpreadMethod="Reflect">
    <GradientStop Color="Transparent" Offset="0.5"/>
    <GradientStop Color="#0530A0" Offset="0.5"/>
</LinearGradientBrush>
<SolidColorBrush x:Key="ProgressBar.Background" Color="#06276E"/>
<Style x:Key="ProgressBarStyle" TargetType="{x:Type ProgressBar}">
    <Setter Property="Foreground" Value="{StaticResource ProgressBar.Progress}"/>
    <Setter Property="Background" Value="{StaticResource ProgressBar.Background}"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ProgressBar}">
                <Grid x:Name="TemplateRoot">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Determinate"/>
                            <VisualState x:Name="Indeterminate">
                                <Storyboard RepeatBehavior="Forever">
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="Animation">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0.25"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:2" Value="0.25"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" Storyboard.TargetName="Animation">
                                        <EasingPointKeyFrame KeyTime="0" Value="-0.5,0.5"/>
                                        <EasingPointKeyFrame KeyTime="0:0:1" Value="0.5,0.5"/>
                                        <EasingPointKeyFrame KeyTime="0:0:2" Value="1.5,0.5"/>
                                    </PointAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="20" Background="{TemplateBinding Background}"/>
                    <Rectangle x:Name="PART_Track" RadiusX="20" RadiusY="20"/>
                    <Grid x:Name="PART_Indicator" ClipToBounds="true" HorizontalAlignment="Left">
                        <Rectangle x:Name="Indicator" Fill="{TemplateBinding Foreground}" RadiusX="20" RadiusY="20"/>
                        <Rectangle x:Name="Animation" Fill="{TemplateBinding Foreground}" RenderTransformOrigin="0.5,0.5" RadiusX="20" RadiusY="20">
                            <Rectangle.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Rectangle.RenderTransform>
                        </Rectangle>
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="Orientation" Value="Vertical">
                        <Setter Property="LayoutTransform" TargetName="TemplateRoot">
                            <Setter.Value>
                                <RotateTransform Angle="-90"/>
                            </Setter.Value>
                        </Setter>
                    </Trigger>
                    <Trigger Property="IsIndeterminate" Value="true">
                        <Setter Property="Visibility" TargetName="Indicator" Value="Collapsed"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

控件xaml：

<ProgressBar x:Name="progressBar" Height="40" Margin="100,0,100,0" Style="{StaticResource ProgressBarStyle}" Value="60" Maximum="100" Minimum="0"></ProgressBar>