wpf 环形加载进度

画一个 Ellipse 设置 StrokeDashArray 单位值为边框值的宽度,所以可以通过控制 StrokeDashArray 的值设置加载进度。

XAML


    <Grid Background="#1F3542">

        <!--  使用 ProgressBar 自定义环形进度条,因为它有 最大、小值及当前值, 所以只需要自定义模板  -->
        <ProgressBar
            x:Name="ProgressBar"
            Width="200" Height="200"
            Background="#101A26" FontSize="24" FontWeight="Bold" Foreground="#7BCDD9"
            Maximum="100" Minimum="0" SmallChange="0.1"
            Value="30">
            <ProgressBar.Template>
                <ControlTemplate TargetType="ProgressBar">
                    <Grid>

                        <!--  进度条背景  -->
                        <Ellipse
                            Opacity=".5"
                            Stroke="{TemplateBinding Background}"
                            StrokeDashArray="100 0" StrokeDashCap="Round" StrokeThickness="19" />

                        <!--  进度条  -->
                        <Ellipse
                            Margin="1"
                            Opacity=".5"
                            Stroke="{TemplateBinding Foreground}"
                            StrokeDashCap="Round" StrokeThickness="18">
                            <i:Interaction.Behaviors>
                                <circularProgressBarCtrls:EllipseProgressBehavior
                                    EndAngle="0"
                                    Progress="{Binding RelativeSource={RelativeSource AncestorType=ProgressBar}, Path=Value}"
                                    StartAngle="0" />
                            </i:Interaction.Behaviors>

                            <!--  进度条光辉  -->
                            <Ellipse.Effect>
                                <DropShadowEffect
                                    BlurRadius="10" Direction="0" ShadowDepth="2"
                                    Color="#7BCDD9" />
                            </Ellipse.Effect>
                        </Ellipse>

                        <!--  中间的文字  -->
                        <TextBlock
                            HorizontalAlignment="Center" VerticalAlignment="Center"
                            FontFamily="{TemplateBinding FontFamily}"
                            FontSize="{TemplateBinding FontSize}"
                            FontStretch="{TemplateBinding FontStretch}"
                            FontStyle="{TemplateBinding FontStyle}"
                            FontWeight="{TemplateBinding FontWeight}"
                            Foreground="{TemplateBinding Foreground}">
                            <Run Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Value, StringFormat=0.00}" />
                            <Run Text="%" />
                        </TextBlock>
                    </Grid>
                </ControlTemplate>
            </ProgressBar.Template>

        </ProgressBar>

    </Grid>

代码

        this.ProgressBar.Value = 0;

        this.time.Interval = TimeSpan.FromSeconds(0.01);
        this.time.Tick += (o, args) =>
        {
            this.ProgressBar.Value += 0.1;
            if (this.ProgressBar.Value >= 100)
            {
                // this.time.Stop();
                this.ProgressBar.Value = 0;
            }
        };

        this.time.Start();
上一篇
下一篇