WPF 僅用 Rectangle 實現圓柱形進度條

本文將簡單介紹如何僅使用 Rectangle 實作圓柱形進度條，成果如上圖所示。

圓柱形進度條不難實作，不過有趣的是它完全由代表矩形的 Rectangle 組成，這稍微有點反直覺。

首先我們需要重溫一些基礎知識：Rectangle 顯示帶圓角的矩形。用 RadiusX 和 RadiusY 可分別指定用於使矩形的角變圓的橢圓的 X 軸和 Y 軸半徑。

如下面這個例子，可以看到 RadiusX="50" RadiusY="20" 的 Rectangle 的圓角和 Width="100" Height="40" 的 Ellipse (X 軸半徑 50，Y 軸半徑 20 )完全重合在一起。

<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"
/>

現在我們把上面的 Rectangle 拉長，就成了圓柱的基本形狀；反過來將它壓扁，就成了圓柱的截面。再把它們設定成半透明，就成了圓柱形進度條的背景：

<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" />

再在下面加上一個不透明的 Rectangle：

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

看著很像進度條了，但是完全沒有立體效果，所以還要再疊加一個半透明並且漸變的 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>

很接近了，可是上面的截面不明顯，最後還需要再加一個代表截面的 Rectangle：

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

現在看著像那麼一回事了。不過這些只是 UI 方面的基礎概念，要將它轉換成 ProgressBar 還是需要做得複雜一些，具體程式碼可見這個專案：

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

原文作者：dino.c

原文連結：https://www.cnblogs.com/dino623/p/wpf_column_progress_bar.html