Progress Circle
A ring showing progress, as a ProgressBar with a named theme.
<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>Usage
ProgressBar Theme="{StaticResource UIKitProgressCircle}" draws a ring in the progress color at 20% and, over it, the value's arc clockwise from 12 o'clock with flat ends. The stroke is 15% of the width, at most 5px, so any Width and Height work. A change of Value sweeps the arc over 180ms; IsIndeterminate="True" repeats a one-second cycle, in which the arc grows and shrinks around the ring. Sizes: xsmall (8px), small (12px), large (20px); medium (16px) needs no class.
Examples
The four sizes and an 80px ring, whose stroke stops at 5px.
<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>The indeterminate arc at medium, large and 40px.
<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 puts content in the middle of the ring, in the text color: here the value as a percentage in an 80px ring.
<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>