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

时间：2023-12-09 18:07:55

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

运行效果：

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

进度条样式：

<!--进度条样式-->

<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>

 

相关文章