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

ここで、上の長方形を伸ばして円柱の基本形になり、逆に平らにすると円柱の断面になります。次に、それらを半透明に設定すると、円筒状のプログレスバーの背景になります。

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

非常に近いですが、上の断面は明らかではなく、最後に断面を表す別の長方形を追加する必要があります：

<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