WPF镂空进度条的简单实现

//自定义一个继承ProgressBar的控件(也直接使用ProgressBar控件，在其ControlTemplete中将进度条控件的高度直接Templete绑定Value，但由于本身项目需操作的东西较多所以自定义了一个控件)

namespace PandaProgressDemo

{

    [TemplatePart(Name = "rec_Water", Type = typeof(Rectangle))]//动态更改各布局的位置，实现画面的动态运行

    class PandaProgress:ProgressBar

    {

        static PandaProgress()

        {

            DefaultStyleKeyProperty.OverrideMetadata(typeof(PandaProgress),

                new FrameworkPropertyMetadata(typeof(PandaProgress)));

        }

        private Rectangle rec_Water;

        public override void OnApplyTemplate()

        {

            base.OnApplyTemplate();

            rec_Water = this.Template.FindName("rec_Water", this) as Rectangle;

            Width = double.IsNaN(Width) ? 800 : Width;

            Height = double.IsNaN(Height) ? 1000 : Height;

            Minimum = double.IsNaN(Minimum) ? 0 : Minimum;

            Maximum = double.IsNaN(Maximum) ? 1 : Maximum;

            if (rec_Water != null)

                rec_Water.Height = Value*Height;

        }

        protected override void OnValueChanged(double oldValue, double newValue)

        {

            base.OnValueChanged(oldValue, newValue);

            if (Value < Minimum)

                Value = Minimum;

            if (Value > Maximum)

                Value = Maximum;          

                if(rec_Water!=null)

                rec_Water.Height = Value * Height;

        }

    }

}

 

    <Style x:Key="StylePandaProgress" TargetType="{x:Type local:PandaProgress}">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="{x:Type local:PandaProgress}">

                    <Grid x:Name="Grid1" Width="{TemplateBinding Width}"  Height="{TemplateBinding Height}" Clip="{StaticResource PathGeometry1}">

                        <!--注意Clip-->

                        <!--图形轮廓-->

                        <Viewbox >

                            <Path  Visibility="Visible" Stretch="UniformToFill"   Stroke="White"  StrokeThickness="3" 

                              Data="{StaticResource PathGeometry1}">

                            </Path>

                        </Viewbox>

                        <StackPanel VerticalAlignment="Bottom">

                            <!--底面部分 修改height-->

                            <Rectangle Name="rec_Water" Fill="{StaticResource BrushBottom}" Height="0"></Rectangle>

                        </StackPanel>

                       

                    </Grid>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>