Progress Circle

显示进度的圆环，即使用命名主题的 ProgressBar。

示例可交互

Progress Circle — Avalonia UIKit

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="12" HorizontalAlignment="Left">
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="0" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="25" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="50" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="75" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="100" />
</StackPanel>

用法

ProgressBar Theme="{StaticResource UIKitProgressCircle}" 用进度色绘制一个 20% 的圆环，并在其上从 12 点钟方向顺时针绘制取值的弧线，端点为平头。线宽为宽度的 15%，最多 5px，因此任意 Width 与 Height 都可使用。Value 变化时，弧线在 180ms 内扫过；IsIndeterminate="True" 会重复一秒的循环，弧线在其中沿圆环增长与缩短。尺寸：xsmall（8px）、small（12px）、large（20px）；medium（16px）无需样式类。

示例

四种尺寸，以及一个 80px 的圆环，其线宽止于 5px。

尺寸可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Classes="xsmall" Value="60" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Classes="small" Value="60" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="60" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Classes="large" Value="60" VerticalAlignment="Center" />
  <!-- Any size works: the stroke is 15% of the width, at most 5px. -->
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Width="80" Height="80" Value="60" VerticalAlignment="Center" />
</StackPanel>

medium、large 与 40px 下的不确定进度弧线。

不确定进度可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="16" HorizontalAlignment="Left">
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" IsIndeterminate="True" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Classes="large" IsIndeterminate="True" VerticalAlignment="Center" />
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Width="40" Height="40" IsIndeterminate="True" VerticalAlignment="Center" />
</StackPanel>

uikit:ProgressCircles.Content 把内容放在圆环中央，使用文本颜色：此处是一个 80px 圆环中以百分比显示的取值。

内容可交互

Live demo unavailable

<StackPanel Orientation="Horizontal" Spacing="20">
  <ProgressBar Theme="{StaticResource UIKitProgressCircle}" Value="60" Width="80" Height="80">
    <uikit:ProgressCircles.Content>
      <TextBlock Text="60%" FontWeight="SemiBold" />
    </uikit:ProgressCircles.Content>
  </ProgressBar>
  <StackPanel Spacing="4" VerticalAlignment="Center">
    <TextBlock Text="Analyzing project" FontWeight="Medium" />
    <TextBlock Text="Scanning components and dependencies." FontSize="14" Foreground="{DynamicResource UIKit.MutedForeground}" />
  </StackPanel>
</StackPanel>

Progress Circle

#用法

#示例

用法

示例