[WPF] 僅用 Rectangle 實現圓柱形進度條
阿新 • • 發佈:2021-11-08
本文將簡單介紹如何僅使用 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 還是需要做得複雜一些,具體程式碼可見這個專案:
作者:dino.c
出處:http://www.cnblogs.com/dino623/
說明:歡迎轉載並請標明來源和作者。如有錯漏請指出,謝謝。