この記事では、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
原文リンク：https://www.cnblogs.com/dino623/p/wpf_column_progress_bar.html