COVID 19 Tracker With WPF, Material Design And WebAPI

Introduction

 
Hi folks, if you remember, recently I published a website for COVID 19 Tracker with React. How about we explore our strengths in WPF.
 
Almost everything is different in these 2 projects. They follow different implementation techniques with respect to their technologies.
 
Let's create a WPF application with an attractive UI. This project is for education purposes only.
 
I can't attach source code here due to the maximum size limit, but you can directly download it from Github.
 
Find the following Github repositories for both, and feel free to tag along on Github, leave a star if you like.
Here is a sneak peek:
 
COVID 19 Tracker With WPF, Material Design And WebAPI

Features of the app:
  • Attractive UI
  • Easy to use
  • Charts & numbers speak more than text
  • Real-time data
Things you will learn in this project:
  • Using a material design with WPF to enhance the user experience
  • Creating styles for a specific page or application-wide
  • Calling Web-API in any C# backed project with a HttpClient
  • Binding ViewModel Properties with View using MVVM architecture.
We will learn each of these steps one by one.
 
Open Visual Studio & create a new WPF app, Name it as you wish.
 
First, we are going to add some basic panels.
  1. <Window x:Class="Covid19Tracker.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:Covid19Tracker"    
  7.         mc:Ignorable="d"    
  8.         Title="Covid19 Tracker" Height="900" Width="1024" ResizeMode="NoResize" WindowStyle="None">    
  9.     <Grid x:Name="OuterGrid">    
  10.         <Grid.ColumnDefinitions>    
  11.             <ColumnDefinition Width="179*"/>    
  12.             <ColumnDefinition Width="845*"/>    
  13.         </Grid.ColumnDefinitions>    
  14.         <Grid.RowDefinitions>    
  15.             <RowDefinition Height="2*"/>    
  16.             <RowDefinition Height="43*"/>    
  17.         </Grid.RowDefinitions>    
  18.         <Grid x:Name="Header"    
  19.             Grid.ColumnSpan="2"    
  20.               Background="#b71c1c">                
  21.         </Grid>    
  22.     </Grid>    
  23. </Window>    
Now, we need the beauty for our project. Let's add Material.Design.
 
Go to NuGet Package Manager & do the necessary requirements.
 
COVID 19 Tracker With WPF, Material Design And WebAPI
 
Now that we have added Material design in your project, we still need to import some of the styles. We can directly add them to App.xaml so that they will be available across the application.
  1. <Application x:Class="Covid19Tracker.App"    
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.              xmlns:local="clr-namespace:Covid19Tracker"    
  5.              StartupUri="MainWindow.xaml">    
  6.     <Application.Resources>    
  7.         <ResourceDictionary>    
  8.             <ResourceDictionary.MergedDictionaries>    
  9.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Light.xaml" />    
  10.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml" />    
  11.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.DeepPurple.xaml" />    
  12.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.Lime.xaml" />    
  13.             </ResourceDictionary.MergedDictionaries>    
  14.         </ResourceDictionary>    
  15.     </Application.Resources>    
  16. </Application>    
Now let us begin with looks.
 
Adding header & a shutdown button. 
  1. <Grid x:Name="Header"    
  2.            Background="{StaticResource HeaderColor}"    
  3.            Grid.ColumnSpan="2">    
  4.            <StackPanel x:Name="HeaderStackPanel">    
  5.                <Button x:Name="ButtonExit"    
  6.                        Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"    
  7.                        BorderBrush="{x:Null}"    
  8.                        Background="{x:Null}"    
  9.                        HorizontalAlignment="Right"    
  10.                        Foreground="White"    
  11.                        Height="35"    
  12.                        Width="35"     
  13.                        Click="ButtonExit_Click">    
  14.                    <materialUI:PackIcon Kind="Power"/>    
  15.                </Button>    
  16.            </StackPanel>    
  17.        </Grid>    
This is the code behind the add ButtonExit_Click method to add following code:
  1. private void ButtonExit_Click(object sender, RoutedEventArgs e)    
  2. {    
  3.     Application.Current.Shutdown();    
  4. }    
Styles.xaml
 
Now let's add ResourceDictionary in our project, Simply right-click on project & select ResouceDictionary. Name as a Styles.xaml
 
This is where we are going to keep all styles.
 
Note
Add this entry in App.xaml as well.
  1. Styles.xaml<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  2.                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">    
  3.     <!-- Title Style -->    
  4.     <Style x:Key="TitleTextBlockStyle"        
  5.            BasedOn="{StaticResource {x:Type TextBlock}}"        
  6.            TargetType="TextBlock">    
  7.         <Setter Property="HorizontalAlignment" Value="Right"/>    
  8.         <Setter Property="FontFamily" Value="Champagne & Limousines"/>    
  9.         <Setter Property="Margin" Value="5"/>    
  10.         <Setter Property="VerticalAlignment" Value="Top"/>    
  11.         <Setter Property="Foreground" Value="Gray"/>    
  12.         <Setter Property="FontSize" Value="15"/>    
  13.     </Style>    
  14.     
  15.     <!-- Tracker Style -->    
  16.     <Style x:Key="ScrollThumbs" TargetType="{x:Type Thumb}">    
  17.         <Setter Property="Template">    
  18.             <Setter.Value>    
  19.                 <ControlTemplate TargetType="{x:Type Thumb}">    
  20.                     <Grid x:Name="Grid">    
  21.                         <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" Fill="Transparent" />    
  22.                         <Border x:Name="Rectangle1" CornerRadius="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto"  Background="{TemplateBinding Background}" />    
  23.                     </Grid>    
  24.                     <ControlTemplate.Triggers>    
  25.                         <Trigger Property="Tag" Value="Horizontal">    
  26.                             <Setter TargetName="Rectangle1" Property="Width" Value="Auto" />    
  27.                             <Setter TargetName="Rectangle1" Property="Height" Value="7" />    
  28.                         </Trigger>    
  29.                     </ControlTemplate.Triggers>    
  30.                 </ControlTemplate>    
  31.             </Setter.Value>    
  32.         </Setter>    
  33.     </Style>    
  34.     
  35.     <!--ScrollBar Style-->    
  36.     <Style x:Key="{x:Type ScrollBar}" TargetType="{x:Type ScrollBar}">    
  37.         <Setter Property="Stylus.IsFlicksEnabled" Value="false" />    
  38.         <Setter Property="Foreground" Value="LightGray" />    
  39.         <Setter Property="Background" Value="DarkGray" />    
  40.         <Setter Property="Width" Value="10" />    
  41.         <Setter Property="Template">    
  42.             <Setter.Value>    
  43.                 <ControlTemplate TargetType="{x:Type ScrollBar}">    
  44.                     <Grid x:Name="GridTrack"     
  45.                                     Background="{x:Null}"    
  46.                                     Width="19">    
  47.                         <Track x:Name="TrackScroll"     
  48.                                            Grid.Row="0"     
  49.                                            IsDirectionReversed="true" Focusable="false">    
  50.                             <Track.Thumb>    
  51.                                 <Thumb x:Name="Thumb" Background="{TemplateBinding Foreground}" Style="{DynamicResource ScrollThumbs}" />    
  52.                             </Track.Thumb>    
  53.                             <Track.IncreaseRepeatButton>    
  54.                                 <RepeatButton x:Name="PageUp" Command="ScrollBar.PageDownCommand" Opacity="0" Focusable="false" />    
  55.                             </Track.IncreaseRepeatButton>    
  56.                             <Track.DecreaseRepeatButton>    
  57.                                 <RepeatButton x:Name="PageDown" Command="ScrollBar.PageUpCommand" Opacity="0" Focusable="false" />    
  58.                             </Track.DecreaseRepeatButton>    
  59.                         </Track>    
  60.                     </Grid>    
  61.     
  62.                     <ControlTemplate.Triggers>    
  63.                         <Trigger SourceName="Thumb" Property="IsMouseOver" Value="true">    
  64.                             <Setter Value="{DynamicResource ButtonSelectBrush}" TargetName="Thumb" Property="Background" />    
  65.                         </Trigger>    
  66.                         <Trigger SourceName="Thumb" Property="IsDragging" Value="true">    
  67.                             <Setter Value="{DynamicResource DarkBrush}" TargetName="Thumb" Property="Background" />    
  68.                         </Trigger>    
  69.     
  70.                         <Trigger Property="IsEnabled" Value="false">    
  71.                             <Setter TargetName="Thumb" Property="Visibility" Value="Collapsed" />    
  72.                         </Trigger>    
  73.                         <Trigger Property="Orientation" Value="Horizontal">    
  74.                             <Setter TargetName="GridTrack" Property="LayoutTransform">    
  75.                                 <Setter.Value>    
  76.                                     <RotateTransform Angle="-90" />    
  77.                                 </Setter.Value>    
  78.                             </Setter>    
  79.                             <Setter TargetName="TrackScroll" Property="LayoutTransform">    
  80.                                 <Setter.Value>    
  81.                                     <RotateTransform Angle="-90" />    
  82.                                 </Setter.Value>    
  83.                             </Setter>    
  84.                             <Setter Property="Width" Value="Auto" />    
  85.                             <Setter Property="Height" Value="12" />    
  86.                             <Setter TargetName="Thumb" Property="Tag" Value="Horizontal" />    
  87.                             <Setter TargetName="PageDown" Property="Command" Value="ScrollBar.PageLeftCommand" />    
  88.                             <Setter TargetName="PageUp" Property="Command" Value="ScrollBar.PageRightCommand" />    
  89.                         </Trigger>    
  90.                     </ControlTemplate.Triggers>    
  91.                 </ControlTemplate>    
  92.             </Setter.Value>    
  93.         </Setter>    
  94.     </Style>    
  95. </ResourceDictionary>    
We have divided our page into 3 sections, header which we already added, now we need...
 
Left Panel
 
The left panel is kind of navigation control across your entire application.
  1. <StackPanel x:Name="LeftPanel"    
  2.                    Background="{StaticResource LeftPanelColor}"    
  3.                    Orientation="Vertical"    
  4.                    Grid.Row="1"    
  5.                    Grid.RowSpan="2">    
  6.            <Grid x:Name="GridLeftPanel">    
  7.                <TextBlock x:Name="CovidStatus"    
  8.                           FontSize="16"    
  9.                           FontFamily="WS Simple Gallifreyan"    
  10.                           Foreground="#FFBC96EA"     
  11.                           HorizontalAlignment="Center"    
  12.                           Text="Covid-19 Status"    
  13.                           VerticalAlignment="Center" >    
  14.                </TextBlock>    
  15.            </Grid>    
  16.            <Button x:Name="ButtonCovidDashBoard"     
  17.                    Margin="10">    
  18.                <Grid x:Name="CovidDashBoard"    
  19.                      Height="20"    
  20.                      Width="150">    
  21.                    <materialUIDesign:PackIcon Kind="ViewDashboard"/>    
  22.                    <TextBlock x:Name="TextBlockDASHBOARD"    
  23.                        HorizontalAlignment="Right"     
  24.                               FontFamily="Champagne & Limousines"    
  25.                               Text="DASHBOARD" />    
  26.                </Grid>    
  27.            </Button>    
  28.            <Button Margin="10">    
  29.                <Grid x:Name="Graph"    
  30.                      Height="20"    
  31.                      Width="150">    
  32.                    <materialUIDesign:PackIcon Kind="ContentPaste"/>    
  33.                    <TextBlock x:Name="TextBlockGRAPH"     
  34.                               FontFamily="Champagne & Limousines"    
  35.                               HorizontalAlignment="Right"     
  36.                               Text="GRAPH" />    
  37.                </Grid>    
  38.            </Button>    
  39.        </StackPanel>    
Right Panel
 
The right panel is where all 3 cards for confirmed, recovered & deaths count will be displayed, Plus the data of the last updated date & our attractive doughnut charts specifying recovery & fatality rate.
  1. <Grid x:Name="RightPanel"    
  2.               Background="{StaticResource RightPanelColor}"    
  3.               Grid.Column="1"    
  4.               Grid.Row="1">    
  5.             <ScrollViewer>    
  6.                 <Grid>    
  7.                     <Grid.RowDefinitions>    
  8.                         <RowDefinition Height="Auto"/>    
  9.                         <RowDefinition Height="Auto"/>    
  10.                         <RowDefinition Height="Auto"/>    
  11.                         <RowDefinition Height="*"/>    
  12.                     </Grid.RowDefinitions>    
  13.                     <Grid.ColumnDefinitions>    
  14.                         <ColumnDefinition Width="5*"/>    
  15.                         <ColumnDefinition Width="5*"/>    
  16.                         <ColumnDefinition Width="5*"/>    
  17.                     </Grid.ColumnDefinitions>    
  18.                 <Grid x:Name="GridlabelConfirmed"     
  19.                       Grid.Column="0">    
  20.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  21.                         <Rectangle.Effect>    
  22.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  23.                         </Rectangle.Effect>    
  24.                     </Rectangle>    
  25.                     <Grid Margin="25" Height="120">    
  26.                             <Grid Width="35" Height="50" Background="#ff6f00" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  27.                             <Grid.Effect>    
  28.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  29.                             </Grid.Effect>    
  30.                                 <materialUIDesign:PackIcon Kind="BacteriaOutline" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  31.                             </Grid>    
  32.                             <TextBlock x:Name="TextBlockCONFIRMED"    
  33.                             Style="{StaticResource TitleTextBlockStyle}"    
  34.                             Foreground="#ff6f00"    
  35.                             Text="CONFIRMED" />    
  36.                             <StackPanel x:Name="StackPanelMessageTC"    
  37.                                     HorizontalAlignment="Right"    
  38.                                     Margin="10 30"    
  39.                                     Orientation="Horizontal"    
  40.                                     VerticalAlignment="Top"  >    
  41.                                 <materialUIDesign:PackIcon     
  42.                                     Foreground="#ff6d00"    
  43.                                     Kind="Hope"     
  44.                                     Height="15"     
  45.                                     Margin="5 0"    
  46.                                     VerticalAlignment="Center"    
  47.                                     Width="15" />    
  48.                                 <TextBlock x:Name="TextBlockTC"    
  49.                                     Foreground="#ff6d00"    
  50.                                     FontSize="12"     
  51.                                     Margin="5 0"    
  52.                                     Text="TAKE CARE" />    
  53.                             </StackPanel>    
  54.                         <StackPanel     
  55.                             Orientation="Horizontal"     
  56.                             VerticalAlignment="Bottom"     
  57.                             Margin="20"     
  58.                             Cursor="Hand">    
  59.                                 <TextBlock x:Name="TextBlockNumbers"    
  60.                                 Text="{Binding CovidDetails.confirmed.value, StringFormat='{}{0:0,0}'}"     
  61.                                 FontFamily="Champagne & Limousines"     
  62.                                 VerticalAlignment="Center"     
  63.                                 Foreground="Gray"    
  64.                                 FontSize="30"/>    
  65.                             </StackPanel>    
  66.                     </Grid>    
  67.                 </Grid>    
  68.                 <Grid x:Name="GridlabelRecorvered"     
  69.                           Grid.Column="1">    
  70.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  71.                         <Rectangle.Effect>    
  72.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  73.                         </Rectangle.Effect>    
  74.                     </Rectangle>    
  75.                     <Grid Margin="25" Height="120">    
  76.                         <Grid Width="35" Height="50" Background="#FF41A43C" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  77.                             <Grid.Effect>    
  78.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  79.                             </Grid.Effect>    
  80.                                 <materialUIDesign:PackIcon Kind="HealthPotion" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  81.                         </Grid>    
  82.                             
  83.                             <TextBlock x:Name="TextBlockRECORVERED"    
  84.                                 Style="{StaticResource TitleTextBlockStyle}"    
  85.                                 Foreground="#FF41A43C"    
  86.                                 Text="RECORVERED" />    
  87.                             <StackPanel x:Name="StackPanelMessageSH"    
  88.                                         HorizontalAlignment="Right"    
  89.                                         Orientation="Horizontal"     
  90.                                         Margin="10 30"    
  91.                                         VerticalAlignment="Top" >    
  92.                                 <materialUIDesign:PackIcon    
  93.                                     Kind="Home"     
  94.                                     Height="15"     
  95.                                     Foreground="#388e3c"    
  96.                                     Margin="5 0"    
  97.                                     VerticalAlignment="Center"     
  98.                                     Width="15" />    
  99.                                 <TextBlock     
  100.                                     FontSize="12"    
  101.                                     Foreground="#388e3c"    
  102.                                     Text="STAY HOME" />    
  103.                             </StackPanel>    
  104.     
  105.                             
  106.                             <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="20">    
  107.                                 <TextBlock     
  108.                                     Text="{Binding CovidDetails.recovered.value,StringFormat='{}{0:0,0}'}"    
  109.                                     FontFamily="Champagne & Limousines"     
  110.                                     VerticalAlignment="Center"     
  111.                                     Foreground="Gray"     
  112.                                     FontSize="30"/>    
  113.                             </StackPanel>    
  114.                     </Grid>    
  115.                 </Grid>    
  116.                 <Grid x:Name="GridlabelDeaths"     
  117.                           Grid.Column="2">    
  118.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  119.                         <Rectangle.Effect>    
  120.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  121.                         </Rectangle.Effect>    
  122.                     </Rectangle>    
  123.                     <Grid Margin="25" Height="120">    
  124.                         <Grid Width="35" Height="50" Background="#FFCF1F1F" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  125.                             <Grid.Effect>    
  126.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  127.                             </Grid.Effect>    
  128.                                 <materialUIDesign:PackIcon Kind="Cross" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  129.                         </Grid>    
  130.                             <TextBlock x:Name="TextBlockDEATHS"    
  131.                                         Style="{StaticResource TitleTextBlockStyle}"    
  132.                                        Foreground="#FFCF1F1F"    
  133.                                         Text="DEATHS" />    
  134.                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10 30">    
  135.                                 <materialUIDesign:PackIcon    
  136.                                     Kind="MedicalBag"     
  137.                                     Foreground="#d50000"    
  138.                                     Width="15"     
  139.                                     Height="15"     
  140.                                     VerticalAlignment="Center"     
  141.                                     Margin="5 0"/>    
  142.                                 <TextBlock     
  143.                                     Text="R.I.P."     
  144.                                     FontSize="15"     
  145.                                     Foreground="#d50000"/>    
  146.                         </StackPanel>    
  147.                         <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="20">    
  148.                                 <TextBlock     
  149.                                     Text="{Binding CovidDetails.deaths.value , StringFormat='{}{0:0,0}'}"    
  150.                                     FontFamily="Champagne & Limousines"     
  151.                                     VerticalAlignment="Center"     
  152.                                     Foreground="Gray"     
  153.                                     FontSize="30"/>    
  154.                             </StackPanel>    
  155.                     </Grid>    
  156.                 </Grid>    
  157.                 <Grid x:Name="GridlabelDate"      
  158.                         Grid.RowSpan="2"    
  159.                         Grid.ColumnSpan="3"    
  160.                         Grid.Column="0"    
  161.                         Grid.Row="1">    
  162.                         <Rectangle Height="40" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  163.                             <Rectangle.Effect>    
  164.                                 <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  165.                             </Rectangle.Effect>    
  166.                         </Rectangle>    
  167.                         <Grid Margin="25" Height="40">    
  168.                             <Grid Width="25" Height="30" Background="#311b92" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  169.                                 <Grid.Effect>    
  170.                                     <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  171.                                 </Grid.Effect>    
  172.                                 <materialUIDesign:PackIcon    
  173.                                     Kind="Calendar"     
  174.                                     HorizontalAlignment="Center"    
  175.                                     VerticalAlignment="Bottom"    
  176.                                     Margin="5"     
  177.                                     Foreground="White"     
  178.                                     Width="20"     
  179.                                     Height="20"/>    
  180.                             </Grid>    
  181.                             <TextBlock x:Name="TextBlockDATE"    
  182.                                        Style="{StaticResource TitleTextBlockStyle}"    
  183.                                        Foreground="#311b92"    
  184.                                        FontSize="20"    
  185.                                        HorizontalAlignment="Left"    
  186.                                        Margin="50 5 0 0"    
  187.                                        Text="LAST UPDATED DATE" />    
  188.                                 <TextBlock     
  189.                                     Text="{Binding CovidDetails.lastUpdate}"    
  190.                                     FontFamily="Champagne & Limousines"     
  191.                                     VerticalAlignment="Center"     
  192.                                     Foreground="Gray"     
  193.                                     FontSize="20"    
  194.                                     Margin="300 5 0 0"/>    
  195.                          </Grid>    
  196.                     </Grid>    
  197.                 <Grid x:Name="GridLabelRatios"    
  198.                     Grid.Row="3"    
  199.                     Grid.RowSpan="2"    
  200.                     Grid.ColumnSpan="3"    
  201.                     HorizontalAlignment="Center"    
  202.                     Width="800"    
  203.                     Height="400">    
  204.                     <Grid     
  205.                         Background="White"    
  206.                         Margin="20 25 15 10">    
  207.                         <Grid.OpacityMask>    
  208.                             <VisualBrush Visual="{ Binding ElementName=BorderG1 }"/>    
  209.                         </Grid.OpacityMask>    
  210.                         <Border x:Name="BorderG1" CornerRadius="5" Background="White" Margin="0,0,0,119"/>    
  211.                         <StackPanel     
  212.                             VerticalAlignment="Bottom" >    
  213.                                 <StackPanel     
  214.                                     Orientation="Horizontal"    
  215.                                     Margin="20 5"/>    
  216.                                 <StackPanel     
  217.                                     Orientation="Horizontal"    
  218.                                     Margin="10 5"/>    
  219.                             </StackPanel>    
  220.                     </Grid>    
  221.                     <Grid Margin="50 0 30 20">    
  222.                         <Grid.OpacityMask>    
  223.                             <VisualBrush Visual="{ Binding ElementName=BorderG2 }"/>    
  224.                         </Grid.OpacityMask>    
  225.                         <Border x:Name="BorderG2" CornerRadius="15" Background="#FF340051"/>    
  226.     
  227.                             <MetroChart:RadialGaugeChart     
  228.                                 Background="{x:Null}"     
  229.                                 ChartTitle="Ratio:"     
  230.                                 Foreground="LightGray"     
  231.                                 Margin="50 0 0 0">    
  232.                                 <MetroChart:RadialGaugeChart.Series>    
  233.                                     <MetroChart:ChartSeries    
  234.                                         DisplayMember="Description"    
  235.                                         ItemsSource="{Binding ChartdetailsList}"    
  236.                                         SeriesTitle="Description"    
  237.                                         ValueMember="Value"     
  238.                                         HorizontalAlignment="Center"/>    
  239.                                 </MetroChart:RadialGaugeChart.Series>    
  240.                             </MetroChart:RadialGaugeChart>    
  241.                         </Grid>    
  242.                 </Grid>    
  243.         </Grid>    
  244.         </ScrollViewer>    
  245.         </Grid>    
Here is the complete screen,
 
All things combined here.
  1. <Window x:Class="Covid19Tracker.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:materialUIDesign="http://materialdesigninxaml.net/winfx/xaml/themes"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  7.         xmlns:MetroChart="clr-namespace:De.TorstenMandelkow.MetroChart;assembly=De.TorstenMandelkow.MetroChart"    
  8.         mc:Ignorable="d"    
  9.         Title="Covid19 Tracker" Height="700" Width="1024" WindowStyle="None" WindowStartupLocation="CenterScreen">    
  10.     <Window.Resources>    
  11.             <ResourceDictionary>    
  12.             <SolidColorBrush x:Key="HeaderColor">#512da8</SolidColorBrush>    
  13.             <SolidColorBrush x:Key="LeftPanelColor">#4a148c</SolidColorBrush>    
  14.             <SolidColorBrush x:Key="RightPanelColor">#d1c4e9</SolidColorBrush>    
  15.             </ResourceDictionary>    
  16.     </Window.Resources>    
  17.     <Grid x:Name="OuterGrid">    
  18.         <Grid.ColumnDefinitions>    
  19.             <ColumnDefinition Width="2*"/>    
  20.             <ColumnDefinition Width="8*"/>    
  21.         </Grid.ColumnDefinitions>    
  22.         <Grid.RowDefinitions>    
  23.             <RowDefinition Height="Auto"/>    
  24.             <RowDefinition Height="*"/>    
  25.         </Grid.RowDefinitions>    
  26.     
  27.         <Grid x:Name="Header"    
  28.             Background="{StaticResource HeaderColor}"    
  29.             Grid.ColumnSpan="2">    
  30.             <StackPanel x:Name="HeaderStackPanel">    
  31.                 <Button x:Name="ButtonExit"    
  32.                         Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}"    
  33.                         BorderBrush="{x:Null}"    
  34.                         Background="{x:Null}"    
  35.                         Click="ButtonExit_Click"    
  36.                         Foreground="White"    
  37.                         Height="35"    
  38.                         HorizontalAlignment="Right"    
  39.                         VerticalAlignment="Top"    
  40.                         Width="35">    
  41.                     <materialUIDesign:PackIcon Kind="Power"/>    
  42.                 </Button>    
  43.             </StackPanel>    
  44.         </Grid>    
  45.     
  46.         <StackPanel x:Name="LeftPanel"    
  47.                     Background="{StaticResource LeftPanelColor}"    
  48.                     Orientation="Vertical"    
  49.                     Grid.Row="1"    
  50.                     Grid.RowSpan="2">    
  51.             <Grid x:Name="GridLeftPanel">    
  52.                 <TextBlock x:Name="CovidStatus"    
  53.                            FontSize="16"    
  54.                            FontFamily="WS Simple Gallifreyan"    
  55.                            Foreground="#FFBC96EA"     
  56.                            HorizontalAlignment="Center"    
  57.                            Text="Covid-19 Status"    
  58.                            VerticalAlignment="Center" >    
  59.                 </TextBlock>    
  60.             </Grid>    
  61.             <Button x:Name="ButtonCovidDashBoard"     
  62.                     Margin="10">    
  63.                 <Grid x:Name="CovidDashBoard"    
  64.                       Height="20"    
  65.                       Width="150">    
  66.                     <materialUIDesign:PackIcon Kind="ViewDashboard"/>    
  67.                     <TextBlock x:Name="TextBlockDASHBOARD"    
  68.                         HorizontalAlignment="Right"     
  69.                                FontFamily="Champagne & Limousines"    
  70.                                Text="DASHBOARD" />    
  71.                 </Grid>    
  72.             </Button>    
  73.             <Button Margin="10">    
  74.                 <Grid x:Name="Graph"    
  75.                       Height="20"    
  76.                       Width="150">    
  77.                     <materialUIDesign:PackIcon Kind="ContentPaste"/>    
  78.                     <TextBlock x:Name="TextBlockGRAPH"     
  79.                                FontFamily="Champagne & Limousines"    
  80.                                HorizontalAlignment="Right"     
  81.                                Text="GRAPH" />    
  82.                 </Grid>    
  83.             </Button>    
  84.         </StackPanel>    
  85.     
  86.         <Grid x:Name="RightPanel"    
  87.               Background="{StaticResource RightPanelColor}"    
  88.               Grid.Column="1"    
  89.               Grid.Row="1">    
  90.             <ScrollViewer>    
  91.                 <Grid>    
  92.                     <Grid.RowDefinitions>    
  93.                         <RowDefinition Height="Auto"/>    
  94.                         <RowDefinition Height="Auto"/>    
  95.                         <RowDefinition Height="Auto"/>    
  96.                         <RowDefinition Height="*"/>    
  97.                     </Grid.RowDefinitions>    
  98.                     <Grid.ColumnDefinitions>    
  99.                         <ColumnDefinition Width="5*"/>    
  100.                         <ColumnDefinition Width="5*"/>    
  101.                         <ColumnDefinition Width="5*"/>    
  102.                     </Grid.ColumnDefinitions>    
  103.                 <Grid x:Name="GridlabelConfirmed"     
  104.                       Grid.Column="0">    
  105.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  106.                         <Rectangle.Effect>    
  107.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  108.                         </Rectangle.Effect>    
  109.                     </Rectangle>    
  110.                     <Grid Margin="25" Height="120">    
  111.                             <Grid Width="35" Height="50" Background="#ff6f00" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  112.                             <Grid.Effect>    
  113.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  114.                             </Grid.Effect>    
  115.                                 <materialUIDesign:PackIcon Kind="BacteriaOutline" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  116.                             </Grid>    
  117.                             <TextBlock x:Name="TextBlockCONFIRMED"    
  118.                             Style="{StaticResource TitleTextBlockStyle}"    
  119.                             Foreground="#ff6f00"    
  120.                             Text="CONFIRMED" />    
  121.                             <StackPanel x:Name="StackPanelMessageTC"    
  122.                                     HorizontalAlignment="Right"    
  123.                                     Margin="10 30"    
  124.                                     Orientation="Horizontal"    
  125.                                     VerticalAlignment="Top"  >    
  126.                                 <materialUIDesign:PackIcon     
  127.                                     Foreground="#ff6d00"    
  128.                                     Kind="Hope"     
  129.                                     Height="15"     
  130.                                     Margin="5 0"    
  131.                                     VerticalAlignment="Center"    
  132.                                     Width="15" />    
  133.                                 <TextBlock x:Name="TextBlockTC"    
  134.                                     Foreground="#ff6d00"    
  135.                                     FontSize="12"     
  136.                                     Margin="5 0"    
  137.                                     Text="TAKE CARE" />    
  138.                             </StackPanel>    
  139.                         <StackPanel     
  140.                             Orientation="Horizontal"     
  141.                             VerticalAlignment="Bottom"     
  142.                             Margin="20"     
  143.                             Cursor="Hand">    
  144.                                 <TextBlock x:Name="TextBlockNumbers"    
  145.                                 Text="{Binding CovidDetails.confirmed.value, StringFormat='{}{0:0,0}'}"     
  146.                                 FontFamily="Champagne & Limousines"     
  147.                                 VerticalAlignment="Center"     
  148.                                 Foreground="Gray"    
  149.                                 FontSize="30"/>    
  150.                             </StackPanel>    
  151.                     </Grid>    
  152.                 </Grid>    
  153.                 <Grid x:Name="GridlabelRecorvered"     
  154.                           Grid.Column="1">    
  155.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  156.                         <Rectangle.Effect>    
  157.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  158.                         </Rectangle.Effect>    
  159.                     </Rectangle>    
  160.                     <Grid Margin="25" Height="120">    
  161.                         <Grid Width="35" Height="50" Background="#FF41A43C" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  162.                             <Grid.Effect>    
  163.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  164.                             </Grid.Effect>    
  165.                                 <materialUIDesign:PackIcon Kind="HealthPotion" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  166.                         </Grid>    
  167.                             
  168.                             <TextBlock x:Name="TextBlockRECORVERED"    
  169.                                 Style="{StaticResource TitleTextBlockStyle}"    
  170.                                 Foreground="#FF41A43C"    
  171.                                 Text="RECORVERED" />    
  172.                             <StackPanel x:Name="StackPanelMessageSH"    
  173.                                         HorizontalAlignment="Right"    
  174.                                         Orientation="Horizontal"     
  175.                                         Margin="10 30"    
  176.                                         VerticalAlignment="Top" >    
  177.                                 <materialUIDesign:PackIcon    
  178.                                     Kind="Home"     
  179.                                     Height="15"     
  180.                                     Foreground="#388e3c"    
  181.                                     Margin="5 0"    
  182.                                     VerticalAlignment="Center"     
  183.                                     Width="15" />    
  184.                                 <TextBlock     
  185.                                     FontSize="12"    
  186.                                     Foreground="#388e3c"    
  187.                                     Text="STAY HOME" />    
  188.                             </StackPanel>    
  189.     
  190.                             
  191.                             <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="20">    
  192.                                 <TextBlock     
  193.                                     Text="{Binding CovidDetails.recovered.value,StringFormat='{}{0:0,0}'}"    
  194.                                     FontFamily="Champagne & Limousines"     
  195.                                     VerticalAlignment="Center"     
  196.                                     Foreground="Gray"     
  197.                                     FontSize="30"/>    
  198.                             </StackPanel>    
  199.                     </Grid>    
  200.                 </Grid>    
  201.                 <Grid x:Name="GridlabelDeaths"     
  202.                           Grid.Column="2">    
  203.                     <Rectangle Height="120" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  204.                         <Rectangle.Effect>    
  205.                             <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  206.                         </Rectangle.Effect>    
  207.                     </Rectangle>    
  208.                     <Grid Margin="25" Height="120">    
  209.                         <Grid Width="35" Height="50" Background="#FFCF1F1F" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  210.                             <Grid.Effect>    
  211.                                 <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  212.                             </Grid.Effect>    
  213.                                 <materialUIDesign:PackIcon Kind="Cross" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5" Foreground="White" Width="20" Height="20"/>    
  214.                         </Grid>    
  215.                             <TextBlock x:Name="TextBlockDEATHS"    
  216.                                         Style="{StaticResource TitleTextBlockStyle}"    
  217.                                        Foreground="#FFCF1F1F"    
  218.                                         Text="DEATHS" />    
  219.                         <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="10 30">    
  220.                                 <materialUIDesign:PackIcon    
  221.                                     Kind="MedicalBag"     
  222.                                     Foreground="#d50000"    
  223.                                     Width="15"     
  224.                                     Height="15"     
  225.                                     VerticalAlignment="Center"     
  226.                                     Margin="5 0"/>    
  227.                                 <TextBlock     
  228.                                     Text="R.I.P."     
  229.                                     FontSize="15"     
  230.                                     Foreground="#d50000"/>    
  231.                         </StackPanel>    
  232.                         <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" Margin="20">    
  233.                                 <TextBlock     
  234.                                     Text="{Binding CovidDetails.deaths.value , StringFormat='{}{0:0,0}'}"    
  235.                                     FontFamily="Champagne & Limousines"     
  236.                                     VerticalAlignment="Center"     
  237.                                     Foreground="Gray"     
  238.                                     FontSize="30"/>    
  239.                             </StackPanel>    
  240.                     </Grid>    
  241.                 </Grid>    
  242.                 <Grid x:Name="GridlabelDate"      
  243.                         Grid.RowSpan="2"    
  244.                         Grid.ColumnSpan="3"    
  245.                         Grid.Column="0"    
  246.                         Grid.Row="1">    
  247.                         <Rectangle Height="40" Margin="20" Fill="White" RadiusY="10" RadiusX="10" >    
  248.                             <Rectangle.Effect>    
  249.                                 <DropShadowEffect BlurRadius="20" Color="#FFDEDEDE" RenderingBias="Quality" ShadowDepth="1"/>    
  250.                             </Rectangle.Effect>    
  251.                         </Rectangle>    
  252.                         <Grid Margin="25" Height="40">    
  253.                             <Grid Width="25" Height="30" Background="#311b92" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20 0">    
  254.                                 <Grid.Effect>    
  255.                                     <DropShadowEffect BlurRadius="20" Color="#FFECECEC" RenderingBias="Quality" ShadowDepth="1"/>    
  256.                                 </Grid.Effect>    
  257.                                 <materialUIDesign:PackIcon    
  258.                                     Kind="Calendar"     
  259.                                     HorizontalAlignment="Center"    
  260.                                     VerticalAlignment="Bottom"    
  261.                                     Margin="5"     
  262.                                     Foreground="White"     
  263.                                     Width="20"     
  264.                                     Height="20"/>    
  265.                             </Grid>    
  266.                             <TextBlock x:Name="TextBlockDATE"    
  267.                                        Style="{StaticResource TitleTextBlockStyle}"    
  268.                                        Foreground="#311b92"    
  269.                                        FontSize="20"    
  270.                                        HorizontalAlignment="Left"    
  271.                                        Margin="50 5 0 0"    
  272.                                        Text="LAST UPDATED DATE" />    
  273.                                 <TextBlock     
  274.                                     Text="{Binding CovidDetails.lastUpdate}"    
  275.                                     FontFamily="Champagne & Limousines"     
  276.                                     VerticalAlignment="Center"     
  277.                                     Foreground="Gray"     
  278.                                     FontSize="20"    
  279.                                     Margin="300 5 0 0"/>    
  280.                          </Grid>    
  281.                     </Grid>    
  282.                 <Grid x:Name="GridLabelRatios"    
  283.                     Grid.Row="3"    
  284.                     Grid.RowSpan="2"    
  285.                     Grid.ColumnSpan="3"    
  286.                     HorizontalAlignment="Center"    
  287.                     Width="800"    
  288.                     Height="400">    
  289.                     <Grid     
  290.                         Background="White"    
  291.                         Margin="20 25 15 10">    
  292.                         <Grid.OpacityMask>    
  293.                             <VisualBrush Visual="{ Binding ElementName=BorderG1 }"/>    
  294.                         </Grid.OpacityMask>    
  295.                         <Border x:Name="BorderG1" CornerRadius="5" Background="White" Margin="0,0,0,119"/>    
  296.                         <StackPanel     
  297.                             VerticalAlignment="Bottom" >    
  298.                                 <StackPanel     
  299.                                     Orientation="Horizontal"    
  300.                                     Margin="20 5"/>    
  301.                                 <StackPanel     
  302.                                     Orientation="Horizontal"    
  303.                                     Margin="10 5"/>    
  304.                             </StackPanel>    
  305.                     </Grid>    
  306.                     <Grid Margin="50 0 30 20">    
  307.                         <Grid.OpacityMask>    
  308.                             <VisualBrush Visual="{ Binding ElementName=BorderG2 }"/>    
  309.                         </Grid.OpacityMask>    
  310.                         <Border x:Name="BorderG2" CornerRadius="15" Background="#FF340051"/>    
  311.     
  312.                             <MetroChart:RadialGaugeChart     
  313.                                 Background="{x:Null}"     
  314.                                 ChartTitle="Ratio:"     
  315.                                 Foreground="LightGray"     
  316.                                 Margin="50 0 0 0">    
  317.                                 <MetroChart:RadialGaugeChart.Series>    
  318.                                     <MetroChart:ChartSeries    
  319.                                         DisplayMember="Description"    
  320.                                         ItemsSource="{Binding ChartdetailsList}"    
  321.                                         SeriesTitle="Description"    
  322.                                         ValueMember="Value"     
  323.                                         HorizontalAlignment="Center"/>    
  324.                                 </MetroChart:RadialGaugeChart.Series>    
  325.                             </MetroChart:RadialGaugeChart>    
  326.                         </Grid>    
  327.                 </Grid>    
  328.         </Grid>    
  329.         </ScrollViewer>    
  330.         </Grid>    
  331.     </Grid>    
  332. </Window>   
Now that we are done with designing a UI, Let's move further ahead and add that API class in your project:
 
class WebAPI
 
We are going to use WebAPI class to make a call to API, For now, we are only using the get method.
 
This class is responsible for getting our data.
  1. using System;    
  2. using System.Net;    
  3. using System.Net.Http;    
  4. using System.Net.Http.Headers;    
  5. using System.Threading.Tasks;    
  6.     
  7. namespace Covid19Tracker    
  8. {    
  9.     class WebAPI    
  10.     {    
  11.         public static Task<HttpResponseMessage> GetCall()    
  12.         {    
  13.             try    
  14.             {    
  15.                 ServicePointManager.SecurityProtocol = SecurityProtocolType.Tls12;    
  16.                 var baseAdress = "https://covid19.mathdro.id/api";    
  17.                 string apiUrl = baseAdress;    
  18.                 using (HttpClient client = new HttpClient())    
  19.                 {    
  20.                     client.BaseAddress = new Uri(baseAdress);    
  21.                     client.Timeout = TimeSpan.FromSeconds(900);    
  22.                     client.DefaultRequestHeaders.Accept.Clear();    
  23.                     client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));    
  24.                     var response = client.GetAsync(apiUrl);    
  25.                     response.Wait();    
  26.                     return response;    
  27.                 }    
  28.             }    
  29.             catch (Exception ex)    
  30.             {    
  31.                 throw;    
  32.             }    
  33.         }    
  34.     }    
  35. }    
Of course, we are going to follow MVVM architecture. Let's add DataContext for our MainWindow.xaml.
  1. using System;    
  2. using System.Collections.Generic;    
  3. using System.Linq;    
  4. using System.Text;    
  5. using System.Threading.Tasks;    
  6. using System.Windows;    
  7. using System.Windows.Controls;    
  8. using System.Windows.Data;    
  9. using System.Windows.Documents;    
  10. using System.Windows.Input;    
  11. using System.Windows.Media;    
  12. using System.Windows.Media.Imaging;    
  13. using System.Windows.Navigation;    
  14. using System.Windows.Shapes;    
  15.     
  16. namespace Covid19Tracker    
  17. {    
  18.     /// <summary>    
  19.     /// Interaction logic for MainWindow.xaml    
  20.     /// </summary>    
  21.     public partial class MainWindow : Window    
  22.     {    
  23.         public MainWindow()    
  24.         {    
  25.             InitializeComponent();    
  26.             this.DataContext = new MainWindowViewModel();    
  27.         }    
  28.     
  29.         private void ButtonExit_Click(object sender, RoutedEventArgs e)    
  30.         {    
  31.             Application.Current.Shutdown();    
  32.         }    
  33.     }    
  34. }    
class StatusDetails
 
StatusDetails is responsible for storing our API's response. We need to have the same property name as the JSON response that we get from our API.
For now, we are concerned about 4 specific properties:
  • Confirmed
    class to represent nested JSON object
  • Recovered
    class to represent nested JSON object
  • Deaths
    class to represent nested JSON object
  • LastUpdate
    DateTime to represent the nested date 
    1. using System;    
    2.     
    3. namespace Covid19Tracker    
    4. {    
    5.     public class StatusDetails    
    6.     {    
    7.         #region Properties    
    8.         public ConfirmedCases confirmed { getset; }    
    9.         public RecoveredCases recovered { getset; }    
    10.         public Deaths deaths { getset; }    
    11.         public DateTime lastUpdate { getset; }    
    12.         #endregion    
    13.   
    14.         #region Constructor    
    15.         public StatusDetails()    
    16.         {    
    17.         }    
    18.         #endregion    
    19.   
    20.         #region Internal classes    
    21.         public class ConfirmedCases    
    22.         {    
    23.             public long value { getset; }    
    24.         }    
    25.         public class RecoveredCases    
    26.         {    
    27.             public long value { getset; }    
    28.         }    
    29.         public class Deaths    
    30.         {    
    31.             public long value { getset; }    
    32.         }    
    33.     
    34.         public class DailySummary    
    35.         {    
    36.             public long value { getset; }    
    37.         }    
    38.         #endregion    
    39.     
    40.     }    
    41. }   
MainViewModel
 
This class acts as a controller. This is where your UI gets its data & functionalities.
  1. using Covid19Tracker.DTOClasses;    
  2. using Prism.Mvvm;    
  3. using System.Collections.Generic;    
  4. using System.Net.Http;    
  5.     
  6. namespace Covid19Tracker    
  7. {    
  8.     public class MainWindowViewModel : BindableBase    
  9.     {    
  10.         private StatusDetails _covidDetails;    
  11.     
  12.         public StatusDetails CovidDetails    
  13.         {    
  14.             get { return _covidDetails; }    
  15.             set { SetProperty(ref _covidDetails , value); }    
  16.         }    
  17.     
  18.     
  19.         public MainWindowViewModel()    
  20.         {    
  21.         var response = WebAPI.GetCall();    
  22.             if (response.Result.StatusCode == System.Net.HttpStatusCode.OK)    
  23.             {    
  24.                 CovidDetails = response.Result.Content.ReadAsAsync<StatusDetails>().Result;    
  25.                    
  26.             }    
  27.         }    
  28.     }    
  29. }    
Well, that's just beautiful. Hold on though, we are still missing something.
 
We forgot to add Itemsource for our Doughnut charts!
 
The doughnut is partitioned based on numbers and every number has its description associated with it, We need to have a class who can fulfill these needs.
 
class ChartData
 
We are going bind 2 properties of this class:
  • Description
    It shows if the doughnut is showing a recovery rate or fatality rate.

  • Value
    It is calculated based on the parameter that we will pass from our ViewModel. This value not only describes the recovery rate but also the fatality rate.
    1. namespace Covid19Tracker.DTOClasses    
    2. {    
    3.     public class ChartData    
    4.     {    
    5.         #region Properties    
    6.         public string Description { getset; }    
    7.         public decimal Value { getset; }    
    8.         public decimal ConfirmedCases { getset; }    
    9.         public decimal RecorveredOrDeaths { getset; }    
    10.         #endregion    
    11.   
    12.         #region Constructor    
    13.         public ChartData(string description, decimal recorveredOrDeaths, decimal confirmedCases)    
    14.         {    
    15.             this.Description = description;    
    16.             this.RecorveredOrDeaths = recorveredOrDeaths;    
    17.             this.ConfirmedCases = confirmedCases;    
    18.             Value = CalculateFatalityOrRecoveryPercentage();    
    19.         }    
    20.         #endregion    
    21.   
    22.         #region Methods    
    23.         private decimal CalculateFatalityOrRecoveryPercentage()    
    24.         {    
    25.             return (RecorveredOrDeaths / ConfirmedCases) * 100;    
    26.         }    
    27.         #endregion    
    28.     }    
    29. }   
Finished MainWindowViewModel
 
We are sending numbers that we received from API to doughnut chart to calculate the recovery & fatality rate:
  1. using Covid19Tracker.DTOClasses;    
  2. using Prism.Mvvm;    
  3. using System.Collections.Generic;    
  4. using System.Net.Http;    
  5.     
  6. namespace Covid19Tracker    
  7. {    
  8.     public class MainWindowViewModel : BindableBase    
  9.     {    
  10.         private List<ChartData> _chartdetailsList;    
  11.     
  12.         public List<ChartData> ChartdetailsList    
  13.         {    
  14.             get { return _chartdetailsList; }    
  15.             set { SetProperty(ref _chartdetailsList , value); }    
  16.         }    
  17.     
  18.         private StatusDetails _covidDetails;    
  19.     
  20.         public StatusDetails CovidDetails    
  21.         {    
  22.             get { return _covidDetails; }    
  23.             set { SetProperty(ref _covidDetails , value); }    
  24.         }    
  25.     
  26.     
  27.         public MainWindowViewModel()    
  28.         {    
  29.         var response = WebAPI.GetCall();    
  30.             if (response.Result.StatusCode == System.Net.HttpStatusCode.OK)    
  31.             {    
  32.                 CovidDetails = response.Result.Content.ReadAsAsync<StatusDetails>().Result;    
  33.                 ChartdetailsList = new List<ChartData>()    
  34.                 {    
  35.                    new ChartData("Recovery Rate",CovidDetails.recovered.value, CovidDetails.confirmed.value),    
  36.                    new ChartData("Fatality  Rate",CovidDetails.deaths.value, CovidDetails.confirmed.value)    
  37.                 };    
  38.             }    
  39.         }    
  40.     }    
  41. }    
Very well done, guys!
 
So far so good. Now just hit that Start button & embrace the happiness of successfully implementing Covid-19 tracker with WPF & Material design.
 
Here is the final outcome of your hard work:
 
COVID 19 Tracker With WPF, Material Design And WebAPI
 
We are not done yet, in the future, we will update our left panel and add more screens on the right panel.
 
This is going to be a good project if you desire to learn WPF.
 

Conclusion

 
In this article, we learned how to develop a WPF application with Material design and how to use WebAPI & How to bind properties to UI.
 
It features reusable styles plus a smooth user experience.
 
I really hope you have come away from this with a real grasp on how to develop a WPF application.
 
Thank you all, and I wish you the very best. Keep Learning & Keep Coding!
 
You can find me @