WPF-progress bar (1) and wpf-progress bar

WPF-progress bar (1) and wpf-progress bar

When designing the interface, you may encounter a progress bar. This article explains how to design a custom progress bar and directly go to the Code:

1. Control Interface

<UserControl x: Class = "ProgressBarControl" xmlns =" http://schemas.microsoft.com/winfx/2006/xaml /Presentation "xmlns: x =" http://schemas.microsoft.com/winfx/2006/xaml "Xmlns: mc =" http://schemas.openxmlformats.org/markup-compatibility/2006 "Xmlns: d =" http://schemas.microsoft.com/expression/blend/2008 "Mc: Ignorable =" d "d: DesignHeight =" 200 "d: DesignWidth =" 300 "Background =" Transparent "Loaded =" ProgressBarControl_OnLoaded "> <Grid. resources> <Style TargetType = "Ellipse"> <Setter Property = "Height" Value = "{Binding EclipseSize}"> </Setter> <Setter Property = "Width" Value =" {Binding EclipseSize} "> </Setter> <Setter Property =" Stretch "Value =" Fill "> </Setter> <! -- Set the circle color --> <Setter Property = "Fill" Value = "White"> </Setter> </Style> </Grid. resources> <StackPanel align = "Center" verticalignment = "Center"> <Viewbox Width = "{Binding ViewBoxSize}" Height = "{Binding ViewBoxSize}" HorizontalAlignment = "Center" VerticalAlignment = "Center ""Center"> <Grid x: name = "LayoutRoot" Background = "Transparent" HorizontalAlignment = "Center" verticalignment = "Center"> <! -- There is a canvas loading and unloading event --> <Canvas x: Name = "ProgressBarCanvas" RenderTransformOrigin = "0.5, 0.5 "HorizontalAlignment =" Center "VerticalAlignment =" Center "Width =" {Binding CanvasSize} "Height =" {Binding CanvasSize} "Loaded =" HandleLoaded "Unloaded =" HandleUnloaded "> <! -- Circle --> <Canvas. renderTransform> <RotateTransform x: Name = "SpinnerRotate" Angle = "0"/> </Canvas. renderTransform> </Canvas> </Grid> </Viewbox> </StackPanel> </Grid> </UserControl>

For background settings, see the next article-WPF-progress bar (2)