Radiograph and ProgressRing

[rmoergeli]

Radiograph is using WPF UI. The 41% free disk space shown in the Radiograph UI, is this a ProgressRing? But how to add precentage text and how the center the ring so it doesn't start at 90 degree?

How to achive the same look and feel like Radiograph does?

[pomianowski]

Radiograph uses Arc to present RAM usage. And ProgressBar for horizontal, dynamic lines.

<wpfui:Card Grid.Column="2" Margin="4,0,0,0">
  <Grid Margin="4">
    <TextBlock
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      FontSize="20"
      Text="{Binding Path=ViewModel.MemoryLoadPercentage, Mode=OneWay}" />
    <wpfui:Arc
      Width="100"
      Height="100"
      EndAngle="-50"
      StartAngle="230"
      Stroke="{DynamicResource ControlElevationBorderBrush}"
      StrokeThickness="12" />
    <wpfui:Arc
      Width="100"
      Height="100"
      EndAngle="{Binding Path=ViewModel.MemoryLoadAngle, Mode=OneWay}"
      StartAngle="230"
      Stroke="{DynamicResource RadiographGreenGradientBrush}"
      StrokeThickness="12" />
    <wpfui:Icon
      Grid.Row="0"
      Margin="0"
      HorizontalAlignment="Right"
      VerticalAlignment="Top"
      Cursor="Help"
      Foreground="{DynamicResource TextFillColorTertiaryBrush}"
      Glyph="Info28"
      ToolTip="{i18n:Translate String='mon.info.ram'}" />
  </Grid>
</wpfui:Card>

<StackPanel Margin="4">
  <ProgressBar Foreground="{DynamicResource RadiographGreenGradientBrush}" Value="{Binding Path=ViewModel.GpuTemperaturePercentage, Mode=OneWay}" />
  <Grid Margin="0,2,0,0">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock
      Grid.Column="0"
      FontSize="10"
      Foreground="{DynamicResource TextFillColorTertiaryBrush}"
      Text="{i18n:Translate String='mon.temp'}" />
    <TextBlock
      Grid.Column="1"
      HorizontalAlignment="Right"
      FontSize="10"
      Text="{Binding Path=ViewModel.GpuTemperature, Mode=OneWay}" />
  </Grid>
</StackPanel>

By the way, it is a bit problematic to recreate this in WinUi because the ProgressBar animation is implemented a bit differently, but you can just use the Rectangle.

<Grid>
    <Rectangle
        Width="{TemplateBinding Width}"
        Height="{TemplateBinding Height}"
        Fill="{ThemeResource ControlFillColorDefaultBrush}"
        RadiusX="4"
        RadiusY="4"
        Stroke="{ThemeResource ControlElevationBorderBrush}"
        StrokeThickness="1" />
    <Rectangle
        Width="{TemplateBinding ProgressWidth}"
        Height="{TemplateBinding Height}"
        HorizontalAlignment="Left"
        Fill="{ThemeResource AccentAAFillColorDefaultBrush}"
        RadiusX="4"
        RadiusY="4"
        Stroke="{ThemeResource ControlElevationBorderBrush}"
        StrokeThickness="1" />
</Grid>