WPF uses only Rectangle to implement cylindrical progress bars

This article will briefly introduce how to implement a cylindrical progress bar using only Rectangle. The results are shown in the figure above.

A cylindrical progress bar is not difficult to implement, but what's interesting is that it consists entirely of a Rectangle, which is slightly counterintuitive.

First we need to revisit some basics: Rectangle displays a rectangle with rounded corners. Use RadiusX and RadiusY to specify, respectively, the X and Y axes of the ellipse used to round the corners of the rectangle.

As in the following example, you can see that the rounded corners of the Rectangle with RadiusX="50" RadiusY="20" and the Ellipse with Width="100" Height="40"(X-axis radius 50, Y-axis radius 20 ) completely coincide.

<Rectangle
  Height="100"
  Width="100"
  Fill="#FF7E9EC0"
  Stroke="#FFFF0EC4"
  StrokeThickness="5"
  RadiusX="50"
  RadiusY="20"
/>
<Ellipse
  HorizontalAlignment="Left"
  VerticalAlignment="Top"
  StrokeThickness="5"
  Stroke="Yellow"
  Fill="Red"
  Width="100"
  Height="40"
  Opacity="0.5"
/>

Now we lengthen the Rectangle above to form the basic shape of a cylinder; conversely, we flatten it to form the cross-section of a cylinder. Then set them to be translucent, which becomes the background of the cylindrical progress bar:

<Grid.Resources>
  <style TargetType="Rectangle">
    <Setter Property="Fill" Value="#36a8e2" />
    <Setter Property="RadiusX" Value="25" />
    <Setter Property="RadiusY" Value="5" />
  </style>
</Grid.Resources>
<Rectangle Opacity="0.2" />
<Rectangle Height="10" VerticalAlignment="Top" Opacity="0.1" />

Add an opaque Rectangle below:

<Rectangle Height="100" VerticalAlignment="Bottom" />

It looks a lot like a progress bar, but there is no three-dimensional effect at all, so we need to superimpose a translucent and gradient Rectangle:

<Rectangle Opacity="0.6">
  <Rectangle.Fill>
    <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,.5">
      <GradientStop Color="Black" />
      <GradientStop Offset="1" Color="Transparent" />
      <GradientStop Offset="0.6" Color="#41000000" />
    </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

It's very close, but the section above is not obvious. Finally, another Rectangle representing the section needs to be added:

<Grid Height="100" VerticalAlignment="Bottom">
  <Rectangle Height="10" VerticalAlignment="Top" />
</Grid>

It looks like that now. However, these are just basic concepts in the UI aspect. Converting it into ProgressBar still needs to be a bit complicated. The specific code can be found in this project:

• https://github.com/DinoChan/wpf_design_and_animation_lab

Original author: dino.c

Original link: www.cnblogs.com/dino623/p/wpf_column_progress_bar.html