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>
  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>
  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>
  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>
  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>
  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>
  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"/>
  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>
  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>
  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>
  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>
  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>
  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"/>
  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;
  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;
  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. }
  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;
    3. namespace Covid19Tracker
    4. {
    5. public class StatusDetails
    6. {
    7. #region Properties
    8. public ConfirmedCases confirmed { get; set; }
    9. public RecoveredCases recovered { get; set; }
    10. public Deaths deaths { get; set; }
    11. public DateTime lastUpdate { get; set; }
    12. #endregion
    14. #region Constructor
    15. public StatusDetails()
    16. {
    17. }
    18. #endregion
    20. #region Internal classes
    21. public class ConfirmedCases
    22. {
    23. public long value { get; set; }
    24. }
    25. public class RecoveredCases
    26. {
    27. public long value { get; set; }
    28. }
    29. public class Deaths
    30. {
    31. public long value { get; set; }
    32. }
    34. public class DailySummary
    35. {
    36. public long value { get; set; }
    37. }
    38. #endregion
    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;
  6. namespace Covid19Tracker
  7. {
  8. public class MainWindowViewModel : BindableBase
  9. {
  10. private StatusDetails _covidDetails;
  12. public StatusDetails CovidDetails
  13. {
  14. get { return _covidDetails; }
  15. set { SetProperty(ref _covidDetails , value); }
  16. }
  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;
  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 { get; set; }
    7. public decimal Value { get; set; }
    8. public decimal ConfirmedCases { get; set; }
    9. public decimal RecorveredOrDeaths { get; set; }
    10. #endregion
    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
    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;
  6. namespace Covid19Tracker
  7. {
  8. public class MainWindowViewModel : BindableBase
  9. {
  10. private List<ChartData> _chartdetailsList;
  12. public List<ChartData> ChartdetailsList
  13. {
  14. get { return _chartdetailsList; }
  15. set { SetProperty(ref _chartdetailsList , value); }
  16. }
  18. private StatusDetails _covidDetails;
  20. public StatusDetails CovidDetails
  21. {
  22. get { return _covidDetails; }
  23. set { SetProperty(ref _covidDetails , value); }
  24. }
  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 @