本文將簡單介紹如何僅使用 Rectangle 實作圓柱形進度條，成果如上圖所示，
圓柱形進度條不難實作，不過有趣的是它完全由代表矩形的 Rectangle 組成，這稍微有點反直覺，
首先我們需要重溫一些基礎知識：Rectangle 顯示帶圓角的矩形，用 RadiusX 和 RadiusY 可分別指定用于使矩形的角變圓的橢圓的 X 軸和 Y 軸半徑，
如下面這個例子，可以看到 RadiusX="50" RadiusY="20" 的 Rectangle 的圓角和 Height="40" 的 Ellipse (X 軸半徑 50，Y 軸半徑 20 )完全重合在一起，
<Rectangle Height="100"
Fill="#FF7E9EC0"
Stroke="#FFFF0EC4"
StrokeThickness="5"
RadiusX="50"
RadiusY="20" />
<Ellipse HorizontalAlignment="Left"
VerticalAlignment="Top"
StrokeThickness="5"
Stroke="Yellow"
Fill="Red"
Height="40"
Opacity="0.5" />
現在我們把上面的 Rectangle 拉長，就成了圓柱的基本形狀；反過來將它壓扁，就成了圓柱的截面，再把它們設定成半透明的，就成了圓柱形進度條的背景：
<Grid.Resources>
<Style TargetType="Rectangle">
<Setter Property="Fill" Value="https://www.cnblogs.com/dino623/archive/2021/11/08/#36a8e2" />
<Setter Property="RadiusX" Value="https://www.cnblogs.com/dino623/archive/2021/11/08/25" />
<Setter Property="RadiusY" Value="https://www.cnblogs.com/dino623/archive/2021/11/08/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
出處：http://www.cnblogs.com/dino623/
說明：歡迎轉載并請標明來源和作者，如有錯漏請指出，謝謝，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353084.html
標籤：.NET技术
上一篇：for回圈中創建執行緒執行問題