WPF-自定义进度条（条形、环形）

原创已于 2023-12-12 11:10:50 修改 · 2.4k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#wpf #windows

于 2023-08-24 17:17:04 首次发布

WPF基础与进阶专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何在WPF中使用几何组合模式创建条形和环形进度条，包括动画效果和自定义模板，以及利用IValueConverter实现动态转换。

1、条形进度条制作

1、环形进度条制作

1、条形进度条制作

GeometryCombineMode="Intersect"：取交集

            DoubleAnimation mydbAnimation = new DoubleAnimation();
            mydbAnimation.From = -50;
            mydbAnimation.To = 400;
            mydbAnimation.Duration = new Duration(TimeSpan.FromSeconds(6));
            tranForm.BeginAnimation(TranslateTransform.XProperty, mydbAnimation);

        <Rectangle Width="400"
                   Height="20"
                   Margin="190,349,0,0" HorizontalAlignment="Center" VerticalAlignment="Center"
                   Fill="LightGray" />
        <Path Name="path"
              Width="400"
              Height="20" VerticalAlignment="Center" HorizontalAlignment="Center"
              Margin="190,349,0,0"
              Fill="DeepPink">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Intersect">
                    <CombinedGeometry.Geometry1>
                        <RectangleGeometry Rect="0,0,400,20" />
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry Rect="0,0,50,20">
                            <RectangleGeometry.Transform>
                                <TranslateTransform x:Name="tranForm" X="-6" />
                            </RectangleGeometry.Transform>
                        </RectangleGeometry>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>

2、环形进度条制作

重写ProgressBar模板；

MyConvert：继承自IValueConverter接口的转化器；

hc：Arc：使用HandyControl框架的弧形控件；

ArcThicknessUnit：Pixel空心、Percent实心；

Stretch="None"：关闭伸展

    <Grid>
        <ProgressBar x:Name="probar"
                     Width="120"
                     Height="120"
                     Background="Blue"
                     FontSize="30"
                     FontWeight="Bold"
                     Foreground="Blue"
                     Maximum="1"
                     Minimum="0"
                     SmallChange="0.01"
                     Value="{Binding ElementName=sld, Path=Value}">
            <ProgressBar.Template>
                <ControlTemplate TargetType="ProgressBar">
                    <ControlTemplate.Resources>
                        <local:MyConvert x:Key="tod" />
                    </ControlTemplate.Resources>
                    <Grid>
                        <TextBlock HorizontalAlignment="Center"
                                   VerticalAlignment="Center"
                                   Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Value, StringFormat=p0}" />
                        <hc:Arc ArcThickness="15"
                                ArcThicknessUnit="Pixel"
                                EndAngle="360"
                                Fill="LightGray"
                                StartAngle="0"
                                Stretch="None" />
                        <hc:Arc ArcThickness="15"
                                EndAngle="{TemplateBinding Value,Converter={StaticResource tod}}"
                                Fill="{TemplateBinding Background}"
                                StartAngle="0"
                                Stretch="None" />
                    </Grid>
                </ControlTemplate>
            </ProgressBar.Template>
        </ProgressBar>
        <Slider x:Name="sld"
                Width="400"
                Background="Green"
                Maximum="1"
                Minimum="0" />
    </Grid>