├── App.xaml
├── Assets
    ├── Devices_Image.png
    ├── analytics_icon.png
    ├── calendar_icon.png
    ├── categories_icon.png
    ├── close_menu_def.png
    ├── close_menu_mo.png
    ├── dashboard_icon.png
    ├── delivery_icon.png
    ├── discount_icon.png
    ├── hamburger_icon.png
    ├── hamburger_mo.png
    ├── line_chart.png
    ├── max_def.png
    ├── max_mo.png
    ├── order32.png
    ├── product_icon.png
    ├── reports_icon.png
    ├── sales_icon.png
    ├── shutdown_def.png
    ├── shutdown_mo.png
    ├── stats_icon.png
    ├── stocks_icon.png
    └── user_icon.png
├── Converter.cs
├── DataTemplates.xaml
├── Fonts
    ├── OpenSans-Regular.ttf
    ├── OpenSans-SemiBold.ttf
    ├── Raleway-Medium.ttf
    ├── Raleway-SemiBold.ttf
    ├── Roboto-Medium.ttf
    ├── Roboto-Regular.ttf
    ├── Saira-Regular.ttf
    └── Saira-SemiBold.ttf
├── LICENSE
├── MainViewModel.cs
├── MainWindow.xaml
├── README.md
├── RelayCommand.cs
├── Source Code
    └── ResponsiveApp.rar
└── Styles.xaml


/App.xaml:
--------------------------------------------------------------------------------
 1 | <Application x:Class="ResponsiveApp.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:ResponsiveApp"
 5 |              StartupUri="MainWindow.xaml">
 6 |     
 7 |     <Application.Resources>
 8 | 
 9 |         <ResourceDictionary>
10 |             <ResourceDictionary.MergedDictionaries>
11 | 
12 |                 <ResourceDictionary Source="Styles.xaml" />
13 |                 <ResourceDictionary Source="DataTemplates.xaml" />
14 | 
15 |             </ResourceDictionary.MergedDictionaries>
16 |         </ResourceDictionary>
17 | 
18 |     </Application.Resources>
19 |     
20 | </Application>
21 | 


--------------------------------------------------------------------------------
/Assets/Devices_Image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/Devices_Image.png


--------------------------------------------------------------------------------
/Assets/analytics_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/analytics_icon.png


--------------------------------------------------------------------------------
/Assets/calendar_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/calendar_icon.png


--------------------------------------------------------------------------------
/Assets/categories_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/categories_icon.png


--------------------------------------------------------------------------------
/Assets/close_menu_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/close_menu_def.png


--------------------------------------------------------------------------------
/Assets/close_menu_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/close_menu_mo.png


--------------------------------------------------------------------------------
/Assets/dashboard_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/dashboard_icon.png


--------------------------------------------------------------------------------
/Assets/delivery_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/delivery_icon.png


--------------------------------------------------------------------------------
/Assets/discount_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/discount_icon.png


--------------------------------------------------------------------------------
/Assets/hamburger_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/hamburger_icon.png


--------------------------------------------------------------------------------
/Assets/hamburger_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/hamburger_mo.png


--------------------------------------------------------------------------------
/Assets/line_chart.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/line_chart.png


--------------------------------------------------------------------------------
/Assets/max_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/max_def.png


--------------------------------------------------------------------------------
/Assets/max_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/max_mo.png


--------------------------------------------------------------------------------
/Assets/order32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/order32.png


--------------------------------------------------------------------------------
/Assets/product_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/product_icon.png


--------------------------------------------------------------------------------
/Assets/reports_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/reports_icon.png


--------------------------------------------------------------------------------
/Assets/sales_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/sales_icon.png


--------------------------------------------------------------------------------
/Assets/shutdown_def.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/shutdown_def.png


--------------------------------------------------------------------------------
/Assets/shutdown_mo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/shutdown_mo.png


--------------------------------------------------------------------------------
/Assets/stats_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/stats_icon.png


--------------------------------------------------------------------------------
/Assets/stocks_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/stocks_icon.png


--------------------------------------------------------------------------------
/Assets/user_icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Assets/user_icon.png


--------------------------------------------------------------------------------
/Converter.cs:
--------------------------------------------------------------------------------
 1 | /// <Summary>
 2 | /// Author : R. Arun Mutharasu
 3 | /// Created :25-01-2022
 4 | /// YouTube Channel : C# Design Pro 
 5 | /// </Summary>
 6 | 
 7 | using System;
 8 | using System.Globalization;
 9 | using System.Windows.Data;
10 | 
11 | namespace ResponsiveApp.Helper
12 | {   
13 |     // IsLessThanConverter //
14 |     public class IsLessThanConverter : IValueConverter
15 |     {
16 |         public static readonly IValueConverter Instance = new IsLessThanConverter();
17 | 
18 |         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
19 |         {
20 |             double doubleValue = System.Convert.ToDouble(value);
21 |             double compareToValue = System.Convert.ToDouble(parameter);
22 | 
23 |             return doubleValue < compareToValue;
24 |         }
25 | 
26 |         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
27 |         {
28 |             throw new NotImplementedException();
29 |         }
30 |     }
31 | 
32 |     // IsGreaterThanConverter //
33 |     public class IsGreaterThanConverter : IValueConverter
34 |     {
35 |         public static readonly IValueConverter Instance = new IsGreaterThanConverter();
36 | 
37 |         public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
38 |         {
39 |             double doubleValue = System.Convert.ToDouble(value);
40 |             double compareToValue = System.Convert.ToDouble(parameter);
41 | 
42 |             return doubleValue > compareToValue;
43 |         }
44 | 
45 |         public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
46 |         {
47 |             throw new NotImplementedException();
48 |         }
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/DataTemplates.xaml:
--------------------------------------------------------------------------------
   1 | <!--/// <Summary>
   2 |     /// Author : R. Arun Mutharasu
   3 |     /// Created :25-01-2022
   4 |     /// YouTube Channel : C# Design Pro 
   5 |     /// </Summary>-->
   6 | 
   7 | <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   8 |                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   9 | 
  10 |     <!--// Desktop //-->
  11 |     
  12 |     <DataTemplate x:Key="Desktop_Layout">
  13 | 
  14 |         <Grid x:Name="BaseGrid"
  15 |               Background="#282D33"
  16 |               Margin="8">
  17 | 
  18 |             <Grid.ColumnDefinitions>
  19 | 
  20 |                 <ColumnDefinition x:Name="SideMenuColumn"
  21 |                                   Width="0.22*"
  22 |                                   MaxWidth="240" />
  23 | 
  24 |                 <ColumnDefinition x:Name="col2"
  25 |                                   Width="1*" />
  26 | 
  27 |             </Grid.ColumnDefinitions>
  28 | 
  29 |             <Grid.RowDefinitions>
  30 | 
  31 |                 <RowDefinition x:Name="row1"
  32 |                                Height="0.1*"
  33 |                                MinHeight="60"
  34 |                                MaxHeight="68" />
  35 | 
  36 |                 <RowDefinition x:Name="row2"
  37 |                                Height="0.8*" />
  38 | 
  39 |                 <RowDefinition x:Name="row3"
  40 |                                Height="0.02*" />
  41 | 
  42 |             </Grid.RowDefinitions>
  43 | 
  44 |             <Button Grid.Row="0"
  45 |                     Grid.Column="1"
  46 |                     Command="{Binding MaxAppCommand}"
  47 |                     CommandParameter="{Binding ElementName=ResponsiveWindow}"
  48 |                     Style="{StaticResource MaxAppStyle}" />
  49 | 
  50 |             <Grid Grid.Row="0"
  51 |                   Grid.Column="1"
  52 |                   Height="30"
  53 |                   Width="230"
  54 |                   VerticalAlignment="Top"
  55 |                   HorizontalAlignment="Left"
  56 |                   Margin="20,20,0,0">
  57 | 
  58 |                 <Border Height="30"
  59 |                         Width="230"
  60 |                         Background="#373E46"
  61 |                         HorizontalAlignment="Center"
  62 |                         VerticalAlignment="Top"
  63 |                         BorderThickness="5,0,5,0"
  64 |                         BorderBrush="#FFDD00"
  65 |                         CornerRadius="5">
  66 | 
  67 |                     <Grid>
  68 | 
  69 |                         <TextBlock Text="C #   D E S I G N   P R O"
  70 |                                    FontFamily="Fonts/#Saira Regular"
  71 |                                    FontSize="18"
  72 |                                    VerticalAlignment="Center"
  73 |                                    HorizontalAlignment="Center"
  74 |                                    Foreground="#DCE0E4" />
  75 | 
  76 |                         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
  77 |                                    FontFamily="Fonts/#Saira SemiBold"
  78 |                                    FontSize="10"
  79 |                                    VerticalAlignment="Center"
  80 |                                    HorizontalAlignment="Center"
  81 |                                    Foreground="Transparent" />
  82 | 
  83 |                     </Grid>
  84 | 
  85 |                 </Border>
  86 | 
  87 |             </Grid>
  88 | 
  89 | 
  90 |             <ContentControl Grid.Row="0"
  91 |                             Grid.RowSpan="3"
  92 |                             Grid.Column="0"
  93 |                             Template="{StaticResource SideMenuTemplate}" />
  94 | 
  95 |             <ScrollViewer Grid.Row="1"
  96 |                           Grid.Column="1"
  97 |                           VerticalScrollBarVisibility="Auto">
  98 | 
  99 |                 <Grid x:Name="Card_Grid"
 100 |                       Background="Transparent"
 101 |                       VerticalAlignment="Top"
 102 |                       Margin="10,0,10,0">
 103 | 
 104 |                     <Grid.ColumnDefinitions>
 105 | 
 106 |                         <ColumnDefinition x:Name="c0"
 107 |                                           Width="1*" />
 108 |                         <ColumnDefinition x:Name="c1"
 109 |                                           Width="1*" />
 110 |                         <ColumnDefinition x:Name="c2"
 111 |                                           Width="1*" />
 112 |                         <ColumnDefinition x:Name="c3"
 113 |                                           Width="1*" />
 114 | 
 115 |                     </Grid.ColumnDefinitions>
 116 | 
 117 |                     <Grid.RowDefinitions>
 118 | 
 119 |                         <RowDefinition x:Name="CG_R1"
 120 |                                        Height="130" />
 121 |                         <RowDefinition x:Name="CG_R2"
 122 |                                        Height="0" />
 123 |                         <RowDefinition x:Name="CG_R3"
 124 |                                        Height="462" />
 125 |                         <RowDefinition x:Name="CG_R4"
 126 |                                        Height="315" />
 127 | 
 128 | 
 129 |                     </Grid.RowDefinitions>
 130 | 
 131 |                     <!--// Card - 1 //-->
 132 | 
 133 | 
 134 |                     <ContentControl Grid.Row="0"
 135 |                                     Grid.Column="0"
 136 |                                     Template="{StaticResource Card_1_Desktop}" />
 137 | 
 138 |                     <!--// Card - 2 //-->
 139 | 
 140 |                     <ContentControl Grid.Row="0"
 141 |                                     Grid.Column="1"
 142 |                                     Template="{StaticResource Card_2_Desktop}" />
 143 | 
 144 |                     <!--// Card - 3 //-->
 145 | 
 146 |                     <ContentControl Grid.Row="0"
 147 |                                     Grid.Column="2"
 148 |                                     Template="{StaticResource Card_3_Desktop}" />
 149 | 
 150 |                     <!--// Card - 4 //-->
 151 | 
 152 |                     <ContentControl Grid.Row="0"
 153 |                                     Grid.Column="3"
 154 |                                     Template="{StaticResource Card_4_Desktop}" />
 155 | 
 156 |                     <!--// Card - 5 //-->
 157 | 
 158 |                     <ContentControl Grid.Row="2"
 159 |                                     Grid.Column="0"
 160 |                                     Grid.ColumnSpan="4"
 161 |                                     Template="{StaticResource Card_5_Desktop}" />
 162 | 
 163 |                     <!--// Card - 6 //-->
 164 | 
 165 |                     <ContentControl Grid.Row="3"
 166 |                                     Grid.Column="0"
 167 |                                     Template="{StaticResource Card_6_Desktop}" />
 168 | 
 169 |                     <!--// Card - 7 //-->
 170 | 
 171 |                     <ContentControl Grid.Row="3"
 172 |                                     Grid.Column="1"
 173 |                                     Grid.ColumnSpan="3"
 174 |                                     Template="{StaticResource Card_7_Desktop}" />
 175 | 
 176 |                 </Grid>
 177 | 
 178 |             </ScrollViewer>
 179 | 
 180 |         </Grid>
 181 | 
 182 |     </DataTemplate>
 183 |     
 184 |     <!--// Laptop //-->
 185 | 
 186 |     <DataTemplate x:Key="Laptop_Layout">
 187 | 
 188 |         <Grid x:Name="BaseGrid"
 189 |               Background="#282D33"
 190 |               Margin="8">
 191 | 
 192 |             <Grid.ColumnDefinitions>
 193 | 
 194 |                 <ColumnDefinition x:Name="SideMenuColumn"
 195 |                                   Width="0.22*"
 196 |                                   MaxWidth="240" />
 197 | 
 198 |                 <ColumnDefinition x:Name="col2"
 199 |                                   Width="1*" />
 200 | 
 201 |             </Grid.ColumnDefinitions>
 202 | 
 203 |             <Grid.RowDefinitions>
 204 | 
 205 |                 <RowDefinition x:Name="row1"
 206 |                                Height="0.1*"
 207 |                                MinHeight="65"
 208 |                                MaxHeight="75" />
 209 | 
 210 |                 <RowDefinition x:Name="row2"
 211 |                                Height="0.8*" />
 212 | 
 213 |                 <RowDefinition x:Name="row3"
 214 |                                Height="0.02*" />
 215 | 
 216 |             </Grid.RowDefinitions>
 217 | 
 218 |             <Button Grid.Row="0"
 219 |                     Grid.Column="1"
 220 |                     Command="{Binding MaxAppCommand}"
 221 |                     CommandParameter="{Binding ElementName=ResponsiveWindow}"
 222 |                     Style="{StaticResource MaxAppStyle}" />
 223 | 
 224 |             <Grid Grid.Row="0"
 225 |                   Grid.Column="1"
 226 |                   Height="30"
 227 |                   Width="230"
 228 |                   VerticalAlignment="Top"
 229 |                   HorizontalAlignment="Left"
 230 |                   Margin="20,25,0,0">
 231 | 
 232 |                 <Border Height="30"
 233 |                         Width="230"
 234 |                         Background="#373E46"
 235 |                         HorizontalAlignment="Center"
 236 |                         VerticalAlignment="Top"
 237 |                         BorderThickness="5,0,5,0"
 238 |                         BorderBrush="#FFDD00"
 239 |                         CornerRadius="5">
 240 | 
 241 |                     <Grid>
 242 | 
 243 |                         <TextBlock Text="C #   D E S I G N   P R O"
 244 |                                    FontFamily="Fonts/#Saira Regular"
 245 |                                    FontSize="18"
 246 |                                    VerticalAlignment="Center"
 247 |                                    HorizontalAlignment="Center"
 248 |                                    Foreground="#DCE0E4" />
 249 |                       
 250 |                     </Grid>
 251 | 
 252 |                 </Border>
 253 | 
 254 |             </Grid>
 255 | 
 256 |             <ContentControl x:Name="SideMenuPanel"
 257 |                             Grid.Row="0"
 258 |                             Grid.RowSpan="3"
 259 |                             Grid.Column="0"
 260 |                             Template="{StaticResource SideMenuTemplate}" />
 261 | 
 262 |             <ScrollViewer Grid.Row="1"
 263 |                           Grid.Column="1"
 264 |                           VerticalScrollBarVisibility="Auto">
 265 | 
 266 |                 <Grid x:Name="Card_Grid"
 267 |                       Background="Transparent"
 268 |                       Height="590"
 269 |                       VerticalAlignment="Top"
 270 |                       Margin="10,0,10,0">
 271 | 
 272 |                     <Grid.ColumnDefinitions>
 273 | 
 274 |                         <ColumnDefinition x:Name="c0"
 275 |                                           Width="1*" />
 276 |                         <ColumnDefinition x:Name="c1"
 277 |                                           Width="1*" />
 278 |                         <ColumnDefinition x:Name="c2"
 279 |                                           Width="1*" />
 280 |                         <ColumnDefinition x:Name="c3"
 281 |                                           Width="1*" />
 282 |                         <ColumnDefinition x:Name="c4"
 283 |                                           Width="1.3*"
 284 |                                           MaxWidth="260" />
 285 | 
 286 |                     </Grid.ColumnDefinitions>
 287 | 
 288 |                     <Grid.RowDefinitions>
 289 | 
 290 |                         <RowDefinition x:Name="CG_R1"
 291 |                                        Height="0.30*" />
 292 |                         <RowDefinition x:Name="CG_R2"
 293 |                                        Height="0*" />
 294 |                         <RowDefinition x:Name="CG_R3"
 295 |                                        Height="0.80*" />
 296 |                         <RowDefinition x:Name="CG_R4"
 297 |                                        Height="0.40*" />
 298 |                         <RowDefinition x:Name="CG_R5"
 299 |                                        Height="0*" />
 300 |                         <RowDefinition x:Name="CG_R6"
 301 |                                        Height="0.02*" />
 302 | 
 303 |                     </Grid.RowDefinitions>
 304 | 
 305 |                     <!--// Card - 1 //-->
 306 | 
 307 |                     <ContentControl Grid.Row="0"
 308 |                                     Grid.Column="0"
 309 |                                     Template="{StaticResource Card_1}" />
 310 | 
 311 |                     <!--// Card - 2 //-->
 312 | 
 313 |                     <ContentControl Grid.Row="0"
 314 |                                     Grid.Column="1"
 315 |                                     Template="{StaticResource Card_2}" />
 316 | 
 317 |                     <!--// Card - 3 //-->
 318 | 
 319 |                     <ContentControl Grid.Row="0"
 320 |                                     Grid.Column="2"
 321 |                                     Template="{StaticResource Card_3}" />
 322 | 
 323 |                     <!--// Card - 4 //-->
 324 | 
 325 |                     <ContentControl Grid.Row="0"
 326 |                                     Grid.Column="3"
 327 |                                     Template="{StaticResource Card_4}" />
 328 | 
 329 |                     <!--// Card - 5 //-->
 330 | 
 331 |                     <ContentControl Grid.Row="2"
 332 |                                     Grid.Column="0"
 333 |                                     Grid.ColumnSpan="4"
 334 |                                     Template="{StaticResource Card_5}" />
 335 | 
 336 |                     <!--// Card - 6 //-->
 337 | 
 338 |                     <ContentControl Grid.Row="3"
 339 |                                     Grid.Column="0"
 340 |                                     Grid.ColumnSpan="4"
 341 |                                     Template="{StaticResource Card_6}" />
 342 | 
 343 |                     <!--// Card - 7 //-->
 344 | 
 345 |                     <ContentControl Grid.Row="0"
 346 |                                     Grid.Column="4"
 347 |                                     Grid.RowSpan="4"
 348 |                                     Template="{StaticResource Card_7_Vertical}" />
 349 | 
 350 |                 </Grid>
 351 | 
 352 |             </ScrollViewer>
 353 | 
 354 |         </Grid>
 355 | 
 356 |     </DataTemplate>
 357 |     
 358 |     <!--// Tablet Landscape //-->
 359 | 
 360 |     <DataTemplate x:Key="Tablet_Landscape_Layout">
 361 | 
 362 |         <Grid x:Name="BaseGrid"
 363 |               Background="#282D33"
 364 |               Margin="8">
 365 | 
 366 |             <Grid.ColumnDefinitions>
 367 |                 
 368 |                 <ColumnDefinition x:Name="SideMenuColumn"
 369 |                                   Width="0" />
 370 | 
 371 |                 <ColumnDefinition x:Name="col2"
 372 |                                   Width="1*" />
 373 | 
 374 |             </Grid.ColumnDefinitions>
 375 | 
 376 |             <Grid.RowDefinitions>
 377 | 
 378 |                 <RowDefinition x:Name="row1"
 379 |                                Height="0.1*"
 380 |                                MinHeight="65"
 381 |                                MaxHeight="75" />
 382 | 
 383 |                 <RowDefinition x:Name="row2"
 384 |                                Height="0.8*" />
 385 | 
 386 |                 <RowDefinition x:Name="row3"
 387 |                                Height="0.02*" />
 388 | 
 389 |             </Grid.RowDefinitions>
 390 | 
 391 |             <Grid Grid.Row="0"
 392 |                   Grid.Column="1"
 393 |                   Height="30"
 394 |                   Width="230"
 395 |                   VerticalAlignment="Top"
 396 |                   HorizontalAlignment="Center"
 397 |                   Margin="0,20,0,0">
 398 | 
 399 |                 <Border Height="30"
 400 |                         Width="230"
 401 |                         Background="#373E46"
 402 |                         HorizontalAlignment="Center"
 403 |                         VerticalAlignment="Top"
 404 |                         BorderThickness="5,0,5,0"
 405 |                         BorderBrush="#FFDD00"
 406 |                         CornerRadius="5">
 407 | 
 408 |                     <Grid>
 409 | 
 410 |                         <TextBlock Text="C #   D E S I G N   P R O"
 411 |                                    FontFamily="Fonts/#Saira Regular"
 412 |                                    FontSize="18"
 413 |                                    VerticalAlignment="Center"
 414 |                                    HorizontalAlignment="Center"
 415 |                                    Foreground="#DCE0E4" />
 416 | 
 417 |                         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 418 |                                    FontFamily="Fonts/Saira SemiBold"
 419 |                                    FontSize="10"
 420 |                                    VerticalAlignment="Center"
 421 |                                    HorizontalAlignment="Center"
 422 |                                    Foreground="Transparent" />
 423 | 
 424 |                     </Grid>
 425 | 
 426 |                 </Border>
 427 | 
 428 |             </Grid>
 429 | 
 430 |             <Button x:Name="HamburgerBtn"
 431 |                     Grid.Row="0"
 432 |                     Grid.Column="1"
 433 |                     Command="{Binding ShowMenuCommand}"
 434 |                     Style="{StaticResource HamburgerMenuButton}" />
 435 | 
 436 |             <ScrollViewer Grid.Row="1"
 437 |                           Grid.Column="1"
 438 |                           VerticalScrollBarVisibility="Auto">
 439 | 
 440 |                 <Grid x:Name="Card_Grid"
 441 |                       Background="Transparent"
 442 |                       Height="590"
 443 |                       VerticalAlignment="Top"
 444 |                       Margin="10,0,10,0">
 445 | 
 446 |                     <Grid.ColumnDefinitions>
 447 | 
 448 |                         <ColumnDefinition x:Name="c0"
 449 |                                           Width="1*" />
 450 |                         <ColumnDefinition x:Name="c1"
 451 |                                           Width="1*" />
 452 |                         <ColumnDefinition x:Name="c2"
 453 |                                           Width="1*" />
 454 |                         <ColumnDefinition x:Name="c3"
 455 |                                           Width="1*" />
 456 |                         <ColumnDefinition x:Name="c4"
 457 |                                           Width="1.3*"
 458 |                                           MaxWidth="260" />
 459 | 
 460 |                     </Grid.ColumnDefinitions>
 461 | 
 462 |                     <Grid.RowDefinitions>
 463 | 
 464 |                         <RowDefinition x:Name="CG_R1"
 465 |                                        Height="0.30*" />
 466 |                         <RowDefinition x:Name="CG_R2"
 467 |                                        Height="0*" />
 468 |                         <RowDefinition x:Name="CG_R3"
 469 |                                        Height="0.80*" />
 470 |                         <RowDefinition x:Name="CG_R4"
 471 |                                        Height="0.40*" />
 472 |                         <RowDefinition x:Name="CG_R5"
 473 |                                        Height="0*" />
 474 |                         <RowDefinition x:Name="CG_R6"
 475 |                                        Height="0.02*" />
 476 | 
 477 |                     </Grid.RowDefinitions>
 478 | 
 479 |                     <!--// Card - 1 //-->
 480 | 
 481 |                     <ContentControl Grid.Row="0"
 482 |                                     Grid.Column="0"
 483 |                                     Template="{StaticResource Card_1}" />
 484 | 
 485 |                     <!--// Card - 2 //-->
 486 | 
 487 |                     <ContentControl Grid.Row="0"
 488 |                                     Grid.Column="1"
 489 |                                     Template="{StaticResource Card_2}" />
 490 | 
 491 |                     <!--// Card - 3 //-->
 492 | 
 493 |                     <ContentControl Grid.Row="0"
 494 |                                     Grid.Column="2"
 495 |                                     Template="{StaticResource Card_3}" />
 496 | 
 497 |                     <!--// Card - 4 //-->
 498 | 
 499 |                     <ContentControl Grid.Row="0"
 500 |                                     Grid.Column="3"
 501 |                                     Template="{StaticResource Card_4}" />
 502 | 
 503 |                     <!--// Card - 5 //-->
 504 | 
 505 |                     <ContentControl Grid.Row="2"
 506 |                                     Grid.Column="0"
 507 |                                     Grid.ColumnSpan="4"
 508 |                                     Template="{StaticResource Card_5}" />
 509 | 
 510 |                     <!--// Card - 6 //-->
 511 | 
 512 |                     <ContentControl Grid.Row="3"
 513 |                                     Grid.Column="0"
 514 |                                     Grid.ColumnSpan="4"
 515 |                                     Template="{StaticResource Card_6}" />
 516 | 
 517 |                     <!--// Card - 7 //-->
 518 | 
 519 |                     <ContentControl Grid.Row="0"
 520 |                                     Grid.Column="4"
 521 |                                     Grid.RowSpan="4"
 522 |                                     Template="{StaticResource Card_7_Vertical}" />
 523 | 
 524 |                 </Grid>
 525 | 
 526 |             </ScrollViewer>
 527 | 
 528 |         </Grid>
 529 | 
 530 |     </DataTemplate>
 531 |     
 532 |     <!--// Tablet Portrait //-->
 533 | 
 534 |     <DataTemplate x:Key="Tablet_Portrait_Layout">
 535 | 
 536 |         <Grid x:Name="BaseGrid"
 537 |               Background="#282D33"
 538 |               Margin="8">
 539 | 
 540 |             <Grid.ColumnDefinitions>
 541 |                 
 542 |                 <ColumnDefinition x:Name="SideMenuColumn"
 543 |                                   Width="0" />
 544 | 
 545 |                 <ColumnDefinition x:Name="col2"
 546 |                                   Width="1*" />
 547 | 
 548 |             </Grid.ColumnDefinitions>
 549 | 
 550 |             <Grid.RowDefinitions>
 551 | 
 552 |                 <RowDefinition x:Name="row1"
 553 |                                Height="0.1*"
 554 |                                MinHeight="65"
 555 |                                MaxHeight="75" />
 556 | 
 557 |                 <RowDefinition x:Name="row2"
 558 |                                Height="0.8*" />
 559 | 
 560 |                 <RowDefinition x:Name="row3"
 561 |                                Height="0.02*" />
 562 | 
 563 |             </Grid.RowDefinitions>
 564 | 
 565 |             <Grid Grid.Row="0"
 566 |                   Grid.Column="1"
 567 |                   Height="30"
 568 |                   Width="230"
 569 |                   VerticalAlignment="Top"
 570 |                   HorizontalAlignment="Center"
 571 |                   Margin="0,20,0,0">
 572 | 
 573 |                 <Border Height="30"
 574 |                         Width="230"
 575 |                         Background="#373E46"
 576 |                         HorizontalAlignment="Center"
 577 |                         VerticalAlignment="Top"
 578 |                         BorderThickness="5,0,5,0"
 579 |                         BorderBrush="#FFDD00"
 580 |                         CornerRadius="5">
 581 | 
 582 |                     <Grid>
 583 | 
 584 |                         <TextBlock Text="C #   D E S I G N   P R O"
 585 |                                    FontFamily="Fonts/#Saira Regular"
 586 |                                    FontSize="18"
 587 |                                    VerticalAlignment="Center"
 588 |                                    HorizontalAlignment="Center"
 589 |                                    Foreground="#DCE0E4" />
 590 | 
 591 |                         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 592 |                                    FontFamily="Fonts/#Saira SemiBold"
 593 |                                    FontSize="10"
 594 |                                    VerticalAlignment="Center"
 595 |                                    HorizontalAlignment="Center"
 596 |                                    Foreground="Transparent" />
 597 | 
 598 |                     </Grid>
 599 | 
 600 |                 </Border>
 601 | 
 602 |             </Grid>
 603 | 
 604 |             <Button Grid.Row="0"
 605 |                     Grid.Column="1"
 606 |                     Command="{Binding ShowMenuCommand}"
 607 |                     Style="{StaticResource HamburgerMenuButton}" />
 608 | 
 609 | 
 610 |             <ScrollViewer Grid.Row="1"
 611 |                           Grid.Column="1"
 612 |                           VerticalScrollBarVisibility="Auto">
 613 | 
 614 |                 <Grid x:Name="Card_Grid"
 615 |                       Background="Transparent"
 616 |                       Height="900"
 617 |                       VerticalAlignment="Top"
 618 |                       Margin="10,0,10,0">
 619 | 
 620 |                     <Grid.ColumnDefinitions>
 621 | 
 622 |                         <ColumnDefinition x:Name="c0"
 623 |                                           Width="1*" />
 624 |                         <ColumnDefinition x:Name="c1"
 625 |                                           Width="1*" />
 626 |                         <ColumnDefinition x:Name="c2"
 627 |                                           Width="1*" />
 628 |                         <ColumnDefinition x:Name="c3"
 629 |                                           Width="1*" />
 630 | 
 631 |                     </Grid.ColumnDefinitions>
 632 | 
 633 |                     <Grid.RowDefinitions>
 634 | 
 635 |                         <RowDefinition x:Name="CG_R1"
 636 |                                        Height="0.30*" />
 637 |                         <RowDefinition x:Name="CG_R2"
 638 |                                        Height="0*" />
 639 |                         <RowDefinition x:Name="CG_R3"
 640 |                                        Height="0.80*" />
 641 |                         <RowDefinition x:Name="CG_R4"
 642 |                                        Height="0.40*" />
 643 |                         <RowDefinition x:Name="CG_R5"
 644 |                                        Height="0.80*" />
 645 |                         <RowDefinition x:Name="CG_R6"
 646 |                                        Height="0.02*" />
 647 | 
 648 |                     </Grid.RowDefinitions>
 649 | 
 650 |                     <!--// Card - 1 //-->
 651 | 
 652 |                     <ContentControl Grid.Row="0"
 653 |                                     Grid.Column="0"
 654 |                                     Template="{StaticResource Card_1}" />
 655 | 
 656 |                     <!--// Card - 2 //-->
 657 | 
 658 |                     <ContentControl Grid.Row="0"
 659 |                                     Grid.Column="1"
 660 |                                     Template="{StaticResource Card_2}" />
 661 | 
 662 |                     <!--// Card - 3 //-->
 663 | 
 664 |                     <ContentControl Grid.Row="0"
 665 |                                     Grid.Column="2"
 666 |                                     Template="{StaticResource Card_3}" />
 667 | 
 668 |                     <!--// Card - 4 //-->
 669 | 
 670 |                     <ContentControl Grid.Row="0"
 671 |                                     Grid.Column="3"
 672 |                                     Template="{StaticResource Card_4}" />
 673 | 
 674 |                     <!--// Card - 5 //-->
 675 | 
 676 |                     <ContentControl Grid.Row="2"
 677 |                                     Grid.Column="0"
 678 |                                     Grid.ColumnSpan="4"
 679 |                                     Template="{StaticResource Card_5}" />
 680 | 
 681 |                     <!--// Card - 6 //-->
 682 | 
 683 |                     <ContentControl Grid.Row="3"
 684 |                                     Grid.Column="0"
 685 |                                     Grid.ColumnSpan="4"
 686 |                                     Template="{StaticResource Card_6}" />
 687 | 
 688 |                     <!--// Card - 7 //-->
 689 | 
 690 |                     <ContentControl Grid.Row="4"
 691 |                                     Grid.Column="0"
 692 |                                     Grid.ColumnSpan="4"
 693 |                                     Template="{StaticResource Card_7_Horizontal}" />
 694 | 
 695 |                 </Grid>
 696 | 
 697 |             </ScrollViewer>
 698 | 
 699 |         </Grid>
 700 | 
 701 |     </DataTemplate>
 702 |     
 703 |     <!--// Mobile Landscape //-->
 704 | 
 705 |     <DataTemplate x:Key="Mobile_Landscape_Layout">
 706 | 
 707 |         <Grid x:Name="BaseGrid"
 708 |               Background="#282D33"
 709 |               Margin="8">
 710 | 
 711 |             <Grid.ColumnDefinitions>
 712 | 
 713 |                 <ColumnDefinition x:Name="SideMenuColumn"
 714 |                                   Width="0" />
 715 | 
 716 |                 <ColumnDefinition x:Name="col2"
 717 |                                   Width="1*" />
 718 | 
 719 |             </Grid.ColumnDefinitions>
 720 | 
 721 |             <Grid.RowDefinitions>
 722 | 
 723 |                 <RowDefinition x:Name="row1"
 724 |                                Height="0.1*"
 725 |                                MinHeight="65"
 726 |                                MaxHeight="75" />
 727 | 
 728 |                 <RowDefinition x:Name="row2"
 729 |                                Height="0.8*" />
 730 | 
 731 |                 <RowDefinition x:Name="row3"
 732 |                                Height="0.02*" />
 733 | 
 734 |             </Grid.RowDefinitions>
 735 | 
 736 |             <Grid Grid.Row="0"
 737 |                   Grid.Column="1"
 738 |                   Height="30"
 739 |                   Width="230"
 740 |                   VerticalAlignment="Top"
 741 |                   HorizontalAlignment="Center"
 742 |                   Margin="0,20,0,0">
 743 | 
 744 |                 <Border Height="30"
 745 |                         Width="230"
 746 |                         Background="#373E46"
 747 |                         HorizontalAlignment="Center"
 748 |                         VerticalAlignment="Top"
 749 |                         BorderThickness="5,0,5,0"
 750 |                         BorderBrush="#FFDD00"
 751 |                         CornerRadius="5">
 752 | 
 753 |                     <Grid>
 754 | 
 755 |                         <TextBlock Text="C #   D E S I G N   P R O"
 756 |                                    FontFamily="Fonts/#Saira Regular"
 757 |                                    FontSize="18"
 758 |                                    VerticalAlignment="Center"
 759 |                                    HorizontalAlignment="Center"
 760 |                                    Foreground="#DCE0E4" />
 761 | 
 762 |                         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 763 |                                    FontFamily="Fonts/#Saira SemiBold"
 764 |                                    FontSize="10"
 765 |                                    VerticalAlignment="Center"
 766 |                                    HorizontalAlignment="Center"
 767 |                                    Foreground="Transparent" />
 768 | 
 769 |                     </Grid>
 770 | 
 771 |                 </Border>
 772 | 
 773 |             </Grid>
 774 | 
 775 |             <Button Grid.Row="0"
 776 |                     Grid.Column="1"
 777 |                     Command="{Binding ShowMenuCommand}"
 778 |                     Style="{StaticResource HamburgerMenuButton}" />
 779 | 
 780 | 
 781 |             <ScrollViewer Grid.Row="1"
 782 |                           Grid.Column="1"
 783 |                           VerticalScrollBarVisibility="Auto">
 784 | 
 785 |                 <Grid x:Name="Card_Grid"
 786 |                       Background="Transparent"
 787 |                       Height="1180"
 788 |                       VerticalAlignment="Top"
 789 |                       Margin="10,0,10,0">
 790 | 
 791 |                     <Grid.ColumnDefinitions>
 792 | 
 793 |                         <ColumnDefinition x:Name="c0"
 794 |                                           Width="1*" />
 795 |                         <ColumnDefinition x:Name="c1"
 796 |                                           Width="1*" />
 797 |                         <ColumnDefinition x:Name="c2"
 798 |                                           Width="1*" />
 799 |                         <ColumnDefinition x:Name="c3"
 800 |                                           Width="1*" />
 801 | 
 802 |                     </Grid.ColumnDefinitions>
 803 | 
 804 |                     <Grid.RowDefinitions>
 805 | 
 806 |                         <RowDefinition x:Name="CG_R1"
 807 |                                        Height="116" />
 808 |                         <RowDefinition x:Name="CG_R2"
 809 |                                        Height="116" />
 810 |                         <RowDefinition x:Name="CG_R3"
 811 |                                        Height="310" />
 812 |                         <RowDefinition x:Name="CG_R4"
 813 |                                        Height="315" />
 814 |                         <RowDefinition x:Name="CG_R5"
 815 |                                        Height="310" />
 816 |                         <RowDefinition x:Name="CG_R6"
 817 |                                        Height="20" />
 818 | 
 819 |                     </Grid.RowDefinitions>
 820 | 
 821 |                     <!--// Card - 1 //-->
 822 | 
 823 |                     <ContentControl Grid.Row="0"
 824 |                                     Grid.Column="0"
 825 |                                     Grid.ColumnSpan="2"
 826 |                                     Template="{StaticResource Card_1}" />
 827 | 
 828 |                     <!--// Card - 2 //-->
 829 | 
 830 |                     <ContentControl Grid.Row="0"
 831 |                                     Grid.Column="2"
 832 |                                     Grid.ColumnSpan="2"
 833 |                                     Template="{StaticResource Card_2}" />
 834 | 
 835 |                     <!--// Card - 3 //-->
 836 | 
 837 |                     <ContentControl Grid.Row="1"
 838 |                                     Grid.Column="0"
 839 |                                     Grid.ColumnSpan="2"
 840 |                                     Template="{StaticResource Card_3}" />
 841 | 
 842 |                     <!--// Card - 4 //-->
 843 | 
 844 |                     <ContentControl Grid.Row="1"
 845 |                                     Grid.Column="2"
 846 |                                     Grid.ColumnSpan="2"
 847 |                                     Template="{StaticResource Card_4}" />
 848 | 
 849 |                     <!--// Card - 5 //-->
 850 | 
 851 |                     <ContentControl Grid.Row="2"
 852 |                                     Grid.Column="0"
 853 |                                     Grid.ColumnSpan="4"
 854 |                                     Template="{StaticResource Card_5}" />
 855 | 
 856 |                     <!--// Card - 6 //-->
 857 | 
 858 |                     <ContentControl Grid.Row="3"
 859 |                                     Grid.Column="0"
 860 |                                     Grid.ColumnSpan="4"
 861 |                                     Template="{StaticResource Card_6_Mobile}" />
 862 | 
 863 |                     <!--// Card - 7 //-->
 864 | 
 865 |                     <ContentControl Grid.Row="4"
 866 |                                     Grid.Column="0"
 867 |                                     Grid.ColumnSpan="4"
 868 |                                     Template="{StaticResource Card_7_Horizontal}" />
 869 | 
 870 |                 </Grid>
 871 | 
 872 |             </ScrollViewer>
 873 | 
 874 |         </Grid>
 875 | 
 876 |     </DataTemplate>
 877 |     
 878 |     <!--// Mobile Portrait //-->
 879 | 
 880 |     <DataTemplate x:Key="Mobile_Portrait_Layout">
 881 | 
 882 |         <Grid x:Name="BaseGrid"
 883 |               Background="#282D33"
 884 |               Margin="8">
 885 | 
 886 |             <Grid.ColumnDefinitions>
 887 | 
 888 |                 <ColumnDefinition x:Name="SideMenuColumn"
 889 |                                   Width="0" />
 890 | 
 891 |                 <ColumnDefinition x:Name="col2"
 892 |                                   Width="1*" />
 893 | 
 894 |             </Grid.ColumnDefinitions>
 895 | 
 896 |             <Grid.RowDefinitions>
 897 | 
 898 |                 <RowDefinition x:Name="row1"
 899 |                                Height="0.1*"
 900 |                                MinHeight="65"
 901 |                                MaxHeight="75" />
 902 | 
 903 |                 <RowDefinition x:Name="row2"
 904 |                                Height="0.8*" />
 905 | 
 906 |                 <RowDefinition x:Name="row3"
 907 |                                Height="0.02*" />
 908 | 
 909 |             </Grid.RowDefinitions>
 910 | 
 911 |             <Grid Grid.Row="0"
 912 |                   Grid.Column="1"
 913 |                   Height="30"
 914 |                   Width="230"
 915 |                   VerticalAlignment="Top"
 916 |                   HorizontalAlignment="Center"
 917 |                   Margin="0,20,0,0">
 918 | 
 919 |                 <Border Height="30"
 920 |                         Width="230"
 921 |                         Background="#373E46"
 922 |                         HorizontalAlignment="Center"
 923 |                         VerticalAlignment="Top"
 924 |                         BorderThickness="5,0,5,0"
 925 |                         BorderBrush="#FFDD00"
 926 |                         CornerRadius="5">
 927 | 
 928 |                     <Grid>
 929 | 
 930 |                         <TextBlock Text="C #   D E S I G N   P R O"
 931 |                                    FontFamily="Fonts/#Saira Regular"
 932 |                                    FontSize="18"
 933 |                                    VerticalAlignment="Center"
 934 |                                    HorizontalAlignment="Center"
 935 |                                    Foreground="#DCE0E4" />
 936 | 
 937 |                         <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
 938 |                                    FontFamily="Fonts/#Saira SemiBold"
 939 |                                    FontSize="10"
 940 |                                    VerticalAlignment="Center"
 941 |                                    HorizontalAlignment="Center"
 942 |                                    Foreground="Transparent" />
 943 | 
 944 |                     </Grid>
 945 | 
 946 |                 </Border>
 947 | 
 948 |             </Grid>
 949 | 
 950 |             <Button Grid.Row="0"
 951 |                     Grid.Column="1"
 952 |                     Command="{Binding ShowMenuCommand}"
 953 |                     Style="{StaticResource HamburgerMenuButton}" />
 954 | 
 955 |             <ScrollViewer Grid.Row="1"
 956 |                           Grid.Column="1"
 957 |                           VerticalScrollBarVisibility="Auto">
 958 | 
 959 |                 <Grid x:Name="Card_Grid"
 960 |                       Background="Transparent"
 961 |                       Height="1540"
 962 |                       VerticalAlignment="Top"
 963 |                       Margin="10,0,10,0">
 964 | 
 965 |                     <Grid.ColumnDefinitions>
 966 | 
 967 |                         <ColumnDefinition x:Name="c0"
 968 |                                           Width="1*" />
 969 |                         <ColumnDefinition x:Name="c1"
 970 |                                           Width="1*" />
 971 |                         <ColumnDefinition x:Name="c2"
 972 |                                           Width="1*" />
 973 |                         <ColumnDefinition x:Name="c3"
 974 |                                           Width="1*" />
 975 | 
 976 |                     </Grid.ColumnDefinitions>
 977 | 
 978 |                     <Grid.RowDefinitions>
 979 | 
 980 |                         <RowDefinition x:Name="CG_R1"
 981 |                                        Height="116" />
 982 |                         <RowDefinition x:Name="CG_R2"
 983 |                                        Height="116" />
 984 |                         <RowDefinition x:Name="CG_R3"
 985 |                                        Height="500" />
 986 |                         <RowDefinition x:Name="CG_R4"
 987 |                                        Height="315" />
 988 |                         <RowDefinition x:Name="CG_R5"
 989 |                                        Height="480" />
 990 |                         <RowDefinition x:Name="CG_R6"
 991 |                                        Height="10" />
 992 | 
 993 |                     </Grid.RowDefinitions>
 994 | 
 995 |                     <!--// Card - 1 //-->
 996 | 
 997 |                     <ContentControl Grid.Row="0"
 998 |                                     Grid.Column="0"
 999 |                                     Grid.ColumnSpan="2"
1000 |                                     Template="{StaticResource Card_1}" />
1001 | 
1002 |                     <!--// Card - 2 //-->
1003 | 
1004 |                     <ContentControl Grid.Row="0"
1005 |                                     Grid.Column="2"
1006 |                                     Grid.ColumnSpan="2"
1007 |                                     Template="{StaticResource Card_2}" />
1008 | 
1009 |                     <!--// Card - 3 //-->
1010 | 
1011 |                     <ContentControl Grid.Row="1"
1012 |                                     Grid.Column="0"
1013 |                                     Grid.ColumnSpan="2"
1014 |                                     Template="{StaticResource Card_3}" />
1015 | 
1016 |                     <!--// Card - 4 //-->
1017 | 
1018 |                     <ContentControl Grid.Row="1"
1019 |                                     Grid.Column="2"
1020 |                                     Grid.ColumnSpan="2"
1021 |                                     Template="{StaticResource Card_4}" />
1022 | 
1023 |                     <!--// Card - 5 //-->
1024 | 
1025 |                     <ContentControl Grid.Row="2"
1026 |                                     Grid.Column="0"
1027 |                                     Grid.ColumnSpan="4"
1028 |                                     Template="{StaticResource Card_5_Mobile}" />
1029 | 
1030 |                     <!--// Card - 6 //-->
1031 | 
1032 |                     <ContentControl Grid.Row="3"
1033 |                                     Grid.Column="0"
1034 |                                     Grid.ColumnSpan="4"
1035 |                                     Template="{StaticResource Card_6_Mobile}" />
1036 | 
1037 |                     <!--// Card - 7 //-->
1038 | 
1039 |                     <ContentControl Grid.Row="4"
1040 |                                     Grid.Column="0"
1041 |                                     Grid.ColumnSpan="4"
1042 |                                     Template="{StaticResource Card_7_Vertical_Mobile}" />
1043 | 
1044 |                 </Grid>
1045 | 
1046 |             </ScrollViewer>
1047 | 
1048 |         </Grid>
1049 | 
1050 |     </DataTemplate>
1051 | 
1052 | 
1053 | </ResourceDictionary>


--------------------------------------------------------------------------------
/Fonts/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/OpenSans-Regular.ttf


--------------------------------------------------------------------------------
/Fonts/OpenSans-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/OpenSans-SemiBold.ttf


--------------------------------------------------------------------------------
/Fonts/Raleway-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Raleway-Medium.ttf


--------------------------------------------------------------------------------
/Fonts/Raleway-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Raleway-SemiBold.ttf


--------------------------------------------------------------------------------
/Fonts/Roboto-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Roboto-Medium.ttf


--------------------------------------------------------------------------------
/Fonts/Roboto-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Roboto-Regular.ttf


--------------------------------------------------------------------------------
/Fonts/Saira-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Saira-Regular.ttf


--------------------------------------------------------------------------------
/Fonts/Saira-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Fonts/Saira-SemiBold.ttf


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Arun Mutharasu
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/MainViewModel.cs:
--------------------------------------------------------------------------------
  1 | /// <Summary>
  2 | /// Author : R. Arun Mutharasu
  3 | /// Created :25-01-2022
  4 | /// YouTube Channel : C# Design Pro 
  5 | /// </Summary>   
  6 | 
  7 | using System.ComponentModel;
  8 | using System.Windows.Input;
  9 | using System.Windows;
 10 | 
 11 | namespace ResponsiveApp.ViewModel
 12 | {
 13 |     public class MainViewModel : INotifyPropertyChanged
 14 |     {
 15 |         public event PropertyChangedEventHandler PropertyChanged;
 16 |         private void OnPropertyChanged(string propName)
 17 |         {
 18 |             PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
 19 |         }
 20 | 
 21 |         // Close App
 22 |         public void CloseApp(object obj)
 23 |         {
 24 |             MainWindow win = obj as MainWindow;
 25 |             win.Close();
 26 |         }
 27 | 
 28 | 
 29 |         // Close App Command
 30 |         private ICommand _closeCommand;
 31 | 
 32 |         public ICommand CloseAppCommand
 33 |         {
 34 |             get
 35 |             {
 36 |                 if (_closeCommand == null)
 37 |                 {
 38 |                     _closeCommand = new RelayCommand(p => CloseApp(p));
 39 |                 }
 40 |                 return _closeCommand;
 41 |             }
 42 |         }
 43 | 
 44 |         // Maximize App
 45 |         public void MaxApp(object obj)
 46 |         {
 47 |             MainWindow win = obj as MainWindow;
 48 | 
 49 |             if (win.WindowState == WindowState.Normal)
 50 |             {
 51 |                 win.WindowState = WindowState.Maximized;
 52 |             }
 53 |             else if (win.WindowState == WindowState.Maximized)
 54 |             {
 55 |                 win.WindowState = WindowState.Normal;
 56 |             }
 57 |         }
 58 | 
 59 |         // Maximize App Command
 60 |         private ICommand _maxCommand;
 61 |         public ICommand MaxAppCommand
 62 |         {
 63 |             get
 64 |             {
 65 |                 if (_maxCommand == null)
 66 |                 {
 67 |                     _maxCommand = new RelayCommand(p => MaxApp(p));
 68 |                 }
 69 |                 return _maxCommand;
 70 |             }
 71 |         }
 72 | 
 73 |         public MainViewModel()
 74 |         {
 75 |             // Set SideMenu Visibility 
 76 |             IsPanelVisible = false;
 77 |         }
 78 | 
 79 |         // Close Menu
 80 |         public void CloseMenu()
 81 |         {
 82 |             IsPanelVisible = false;
 83 |         }
 84 | 
 85 |         // Show Menu
 86 |         public void ShowMenu()
 87 |         {
 88 |             IsPanelVisible = true;
 89 |         }
 90 | 
 91 |         // Show Menu Command
 92 |         private ICommand _showMenuCommand;
 93 | 
 94 |         public ICommand ShowMenuCommand
 95 |         {
 96 |             get
 97 |             {
 98 |                 if (_showMenuCommand == null)
 99 |                 {
100 |                     _showMenuCommand = new RelayCommand(p => ShowMenu());
101 |                 }
102 |                 return _showMenuCommand;
103 |             }
104 |         }
105 | 
106 | 
107 |         // Close Menu Command
108 |         private ICommand _closeMenuCommand;
109 | 
110 |         public ICommand CloseMenuCommand
111 |         {
112 |             get
113 |             {
114 |                 if (_closeMenuCommand == null)
115 |                 {
116 |                     _closeMenuCommand = new RelayCommand(p => CloseMenu());
117 |                 }
118 |                 return _closeMenuCommand;
119 |             }
120 |         }
121 | 
122 |         private bool _isPanelVisible;
123 |         public bool IsPanelVisible
124 |         {
125 |             get
126 |             {
127 |                 return _isPanelVisible;
128 |             }
129 |             set
130 |             {
131 |                 _isPanelVisible = value;
132 |                 OnPropertyChanged("IsPanelVisible");
133 |             }
134 |         }
135 |     }
136 | }
137 | 


--------------------------------------------------------------------------------
/MainWindow.xaml:
--------------------------------------------------------------------------------
  1 | <!--/// <Summary>
  2 |     /// Author : R. Arun Mutharasu
  3 |     /// Created :25-01-2022
  4 |     /// YouTube Channel : C# Design Pro 
  5 |     /// </Summary>-->
  6 | 
  7 | <Window x:Class="ResponsiveApp.MainWindow"
  8 |         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  9 |         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 10 |         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 11 |         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 12 |         xmlns:local="clr-namespace:ResponsiveApp.Helper"
 13 |         xmlns:vm="clr-namespace:ResponsiveApp.ViewModel"
 14 |         mc:Ignorable="d"
 15 |         Title="MainWindow"
 16 |         x:Name="ResponsiveWindow"
 17 |         Height="700"
 18 |         Width="1350"
 19 |         MinWidth="428"
 20 |         WindowStyle="None"
 21 |         AllowsTransparency="True"
 22 |         ResizeMode="CanResizeWithGrip"
 23 |         WindowStartupLocation="CenterScreen"
 24 |         Background="Transparent">
 25 | 
 26 |     <Window.Resources>
 27 |         <BooleanToVisibilityConverter x:Key="BooleanToVisibility" />
 28 |     </Window.Resources>
 29 | 
 30 |     <Window.DataContext>
 31 |         <vm:MainViewModel />
 32 |     </Window.DataContext>
 33 |     
 34 |     <Grid>
 35 | 
 36 |         <Border Background="#282D33"
 37 |                 BorderBrush="#3A4149"
 38 |                 BorderThickness="5"
 39 |                 CornerRadius="8,8,0,8" /> 
 40 |         
 41 |         <!--// Responsive Layouts //-->
 42 | 
 43 |         <ContentControl Content="{Binding}">
 44 | 
 45 |             <ContentControl.Style>
 46 | 
 47 |                 <Style TargetType="ContentControl">
 48 |                     
 49 |                     <!--// Default Layout //-->
 50 | 
 51 |                     <Setter Property="ContentTemplate"
 52 |                             Value="{StaticResource Laptop_Layout}" />
 53 | 
 54 |                     <Style.Triggers>
 55 |                         
 56 |                         <!--// Desktop Layout // {width > 1400px}-->
 57 | 
 58 |                         <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={x:Static local:IsGreaterThanConverter.Instance}, ConverterParameter=1400}"
 59 |                                      Value="True">
 60 | 
 61 |                             <Setter Property="ContentTemplate"
 62 |                                     Value="{StaticResource Desktop_Layout}" />
 63 | 
 64 |                         </DataTrigger>      
 65 |                         
 66 |                         <!--// Tablet Landscape Layout // {width < 1200px}-->
 67 | 
 68 |                         <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=1200}"
 69 |                                      Value="True">
 70 | 
 71 |                             <Setter Property="ContentTemplate"
 72 |                                     Value="{StaticResource Tablet_Landscape_Layout}" />
 73 | 
 74 |                         </DataTrigger>
 75 | 
 76 |                         <!--// Tablet Portrait Layout // {width < 1024px}-->
 77 | 
 78 |                         <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=1024}"
 79 |                                      Value="True">
 80 | 
 81 |                             <Setter Property="ContentTemplate"
 82 |                                     Value="{StaticResource Tablet_Portrait_Layout}" />
 83 | 
 84 |                         </DataTrigger>
 85 | 
 86 |                         <!--// Mobile Landscape Layout // {width < 812px}-->
 87 | 
 88 |                         <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=812}"
 89 |                                      Value="True">
 90 | 
 91 |                             <Setter Property="ContentTemplate"
 92 |                                     Value="{StaticResource Mobile_Landscape_Layout}" />
 93 | 
 94 |                         </DataTrigger>
 95 | 
 96 |                         <!--// Mobile Portrait Layout // {width < 667px}-->
 97 | 
 98 |                         <DataTrigger Binding="{Binding Path=ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={x:Static local:IsLessThanConverter.Instance}, ConverterParameter=667}"
 99 |                                      Value="True">
100 | 
101 |                             <Setter Property="ContentTemplate"
102 |                                     Value="{StaticResource Mobile_Portrait_Layout}" />
103 | 
104 |                         </DataTrigger>                     
105 | 
106 |                     </Style.Triggers>                    
107 | 
108 |                 </Style>
109 |                 
110 |             </ContentControl.Style>
111 |             
112 |         </ContentControl>
113 |         
114 |         <!--// Side Menu // [ For Tablet, Mobile Layouts ]-->
115 | 
116 |         <ContentControl Content="{Binding}"
117 |                         Visibility="{Binding IsPanelVisible, Converter={StaticResource BooleanToVisibility}}">
118 | 
119 |             <ContentControl.Style>
120 | 
121 |                 <Style TargetType="ContentControl">
122 | 
123 |                     <Setter Property="ContentTemplate"
124 |                             Value="{StaticResource MenuTemplate}" />
125 | 
126 |                 </Style>
127 | 
128 |             </ContentControl.Style>
129 | 
130 |         </ContentControl>
131 | 
132 |         <!--// Close App Button //-->
133 | 
134 |         <Button Command="{Binding CloseAppCommand}"
135 |                 CommandParameter="{Binding ElementName=ResponsiveWindow}"
136 |                 Style="{StaticResource CloseAppStyle}" />
137 | 
138 |     </Grid>
139 |     
140 | </Window>
141 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WPF - Responsive UI Design
2 | 
3 | YouTube Video Tutorial 
4 | 
5 | [![](https://img.youtube.com/vi/EfXz4C5cSVI/0.jpg)](https://www.youtube.com/watch?v=EfXz4C5cSVI)
6 | 
7 | Icon Credits : https://icons8.com/icons
8 | 


--------------------------------------------------------------------------------
/RelayCommand.cs:
--------------------------------------------------------------------------------
 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.Input;
 7 | 
 8 | namespace ResponsiveApp.ViewModel
 9 | {
10 |     public class RelayCommand : ICommand
11 |     {
12 |         private Action<object> execute;
13 |         private Func<object, bool> canExecute;
14 | 
15 |         public RelayCommand(Action<object> execute)
16 |         {
17 |             this.execute = execute;
18 |             canExecute = null;
19 |         }
20 | 
21 |         public RelayCommand(Action<object> execute, Func<object, bool> canExecute)
22 |         {
23 |             this.execute = execute;
24 |             this.canExecute = canExecute;
25 |         }
26 | 
27 |         public event EventHandler CanExecuteChanged
28 |         {
29 |             add { CommandManager.RequerySuggested += value; }
30 |             remove { CommandManager.RequerySuggested -= value; }
31 |         }
32 | 
33 |         public bool CanExecute(object parameter)
34 |         {
35 |             return canExecute == null || CanExecute(parameter);
36 |         }
37 | 
38 |         public void Execute(object parameter)
39 |         {
40 |             execute(parameter);
41 |         }
42 |     }
43 | }
44 | 


--------------------------------------------------------------------------------
/Source Code/ResponsiveApp.rar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/CSharpDesignPro/WPF---Responsive-UI-Design/dbf40f9dce0165c546f9da5f532098177747b5c9/Source Code/ResponsiveApp.rar


--------------------------------------------------------------------------------
/Styles.xaml:
--------------------------------------------------------------------------------
   1 | <!--/// <Summary>
   2 |     /// Author : R. Arun Mutharasu
   3 |     /// Created :25-01-2022
   4 |     /// YouTube Channel : C# Design Pro 
   5 |     /// </Summary>-->
   6 | 
   7 | <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   8 |                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   9 | 
  10 | 
  11 |     <!--#region Card 1-->
  12 | 
  13 |     <Style x:Key="C101Style"
  14 |            TargetType="Border">
  15 |         <Setter Property="Background"
  16 |                 Value="#373E46" />
  17 |         <Setter Property="CornerRadius"
  18 |                 Value="10" />
  19 |         <Setter Property="Margin"
  20 |                 Value="10" />
  21 |     </Style>
  22 | 
  23 |     <Style x:Key="C102Style"
  24 |            TargetType="Border">
  25 | 
  26 |         <Setter Property="Background"
  27 |                 Value="#292F34" />
  28 |         <Setter Property="Height"
  29 |                 Value="30" />
  30 |         <Setter Property="Width"
  31 |                 Value="82" />
  32 |         <Setter Property="VerticalAlignment"
  33 |                 Value="Top" />
  34 |         <Setter Property="HorizontalAlignment"
  35 |                 Value="Left" />
  36 |         <Setter Property="CornerRadius"
  37 |                 Value="7" />
  38 |         <Setter Property="Margin"
  39 |                 Value="15,15,0,0" />
  40 | 
  41 |     </Style>
  42 | 
  43 |     <Style x:Key="C102Style_Desktop"
  44 |            TargetType="Border">
  45 | 
  46 |         <Setter Property="Background"
  47 |                 Value="#292F34" />
  48 |         <Setter Property="Height"
  49 |                 Value="35" />
  50 |         <Setter Property="Width"
  51 |                 Value="110" />
  52 |         <Setter Property="VerticalAlignment"
  53 |                 Value="Top" />
  54 |         <Setter Property="HorizontalAlignment"
  55 |                 Value="Left" />
  56 |         <Setter Property="CornerRadius"
  57 |                 Value="7" />
  58 |         <Setter Property="Margin"
  59 |                 Value="15,15,0,0" />
  60 | 
  61 |     </Style>
  62 | 
  63 |     <Style x:Key="C103Style"
  64 |            TargetType="TextBlock">
  65 |         <Setter Property="Foreground"
  66 |                 Value="#FFFFFF" />
  67 |         <Setter Property="VerticalAlignment"
  68 |                 Value="Center" />
  69 |         <Setter Property="HorizontalAlignment"
  70 |                 Value="Center" />
  71 |         <Setter Property="FontSize"
  72 |                 Value="12" />
  73 |         <Setter Property="Text"
  74 |                 Value="ORDERS" />
  75 |         <Setter Property="FontFamily"
  76 |                 Value="Fonts/#Open Sans SemiBold" />
  77 |     </Style>
  78 | 
  79 |     <Style x:Key="C103Style_Desktop"
  80 |            TargetType="TextBlock">
  81 |         <Setter Property="Foreground"
  82 |                 Value="#FFFFFF" />
  83 |         <Setter Property="VerticalAlignment"
  84 |                 Value="Center" />
  85 |         <Setter Property="HorizontalAlignment"
  86 |                 Value="Center" />
  87 |         <Setter Property="FontSize"
  88 |                 Value="14" />
  89 |         <Setter Property="Text"
  90 |                 Value="ORDERS" />
  91 |         <Setter Property="FontFamily"
  92 |                 Value="Fonts/#Open Sans SemiBold" />
  93 |     </Style>
  94 | 
  95 |     <Style x:Key="C104Style"
  96 |            TargetType="TextBlock">
  97 |         <Setter Property="Foreground"
  98 |                 Value="#DCE0E4" />
  99 |         <Setter Property="VerticalAlignment"
 100 |                 Value="Top" />
 101 |         <Setter Property="HorizontalAlignment"
 102 |                 Value="Left" />
 103 |         <Setter Property="FontSize"
 104 |                 Value="22" />
 105 |         <Setter Property="Text"
 106 |                 Value="31.5k" />
 107 |         <Setter Property="FontFamily"
 108 |                 Value="Fonts/#Saira Regular" />
 109 |         <Setter Property="Margin"
 110 |                 Value="20,50,0,0" />
 111 |     </Style>
 112 | 
 113 |     <Style x:Key="C104Style_Desktop"
 114 |            TargetType="TextBlock">
 115 |         <Setter Property="Foreground"
 116 |                 Value="White" />
 117 |         <Setter Property="VerticalAlignment"
 118 |                 Value="Top" />
 119 |         <Setter Property="HorizontalAlignment"
 120 |                 Value="Left" />
 121 |         <Setter Property="FontSize"
 122 |                 Value="28" />
 123 |         <Setter Property="Text"
 124 |                 Value="31.5k" />
 125 |         <Setter Property="FontFamily"
 126 |                 Value="Fonts/#Saira Regular" />
 127 |         <Setter Property="Margin"
 128 |                 Value="25,55,0,0" />
 129 |     </Style>
 130 | 
 131 |     <Style x:Key="C105Style"
 132 |            TargetType="Image">
 133 |         <Setter Property="Source"
 134 |                 Value="Assets/order32.png" />
 135 |         <Setter Property="VerticalAlignment"
 136 |                 Value="Top" />
 137 |         <Setter Property="HorizontalAlignment"
 138 |                 Value="Right" />
 139 |         <Setter Property="Stretch"
 140 |                 Value="None" />
 141 |         <Setter Property="Margin"
 142 |                 Value="0,15,18,0" />
 143 |     </Style>
 144 | 
 145 |     <!--#endregion-->
 146 | 
 147 |     <!--#region Card 2-->
 148 | 
 149 |     <Style x:Key="C201Style"
 150 |            TargetType="Border"
 151 |            BasedOn="{StaticResource C101Style}">
 152 |     </Style>
 153 | 
 154 |     <Style x:Key="C202Style_Desktop"
 155 |            TargetType="Border">
 156 | 
 157 |         <Setter Property="Background"
 158 |                 Value="#292F34" />
 159 |         <Setter Property="Height"
 160 |                 Value="35" />
 161 |         <Setter Property="Width"
 162 |                 Value="110" />
 163 |         <Setter Property="VerticalAlignment"
 164 |                 Value="Top" />
 165 |         <Setter Property="HorizontalAlignment"
 166 |                 Value="Left" />
 167 |         <Setter Property="CornerRadius"
 168 |                 Value="7" />
 169 |         <Setter Property="Margin"
 170 |                 Value="15,15,0,0" />
 171 | 
 172 |     </Style>
 173 | 
 174 |     <Style x:Key="C202Style"
 175 |            TargetType="Border"
 176 |            BasedOn="{StaticResource C102Style}">
 177 |     </Style>
 178 | 
 179 |     <Style x:Key="C203Style"
 180 |            TargetType="TextBlock"
 181 |            BasedOn="{StaticResource C103Style}">
 182 |         <Setter Property="Text"
 183 |                 Value="SALES" />
 184 |     </Style>
 185 | 
 186 |     <Style x:Key="C203Style_Desktop"
 187 |            TargetType="TextBlock"
 188 |            BasedOn="{StaticResource C103Style_Desktop}">
 189 |         <Setter Property="Text"
 190 |                 Value="SALES" />
 191 |     </Style>
 192 | 
 193 |     <Style x:Key="C204Style"
 194 |            TargetType="TextBlock"
 195 |            BasedOn="{StaticResource C104Style}">
 196 |         <Setter Property="Text"
 197 |                 Value="87.2k" />
 198 |     </Style>
 199 | 
 200 |     <Style x:Key="C204Style_Desktop"
 201 |            TargetType="TextBlock">
 202 |         <Setter Property="Foreground"
 203 |                 Value="White" />
 204 |         <Setter Property="VerticalAlignment"
 205 |                 Value="Top" />
 206 |         <Setter Property="HorizontalAlignment"
 207 |                 Value="Left" />
 208 |         <Setter Property="FontSize"
 209 |                 Value="28" />
 210 |         <Setter Property="Text"
 211 |                 Value="87.2k" />
 212 |         <Setter Property="FontFamily"
 213 |                 Value="Fonts/#Saira Regular" />
 214 |         <Setter Property="Margin"
 215 |                 Value="25,55,0,0" />
 216 |     </Style>
 217 | 
 218 |     <Style x:Key="C205Style"
 219 |            TargetType="Image"
 220 |            BasedOn="{StaticResource C105Style}">
 221 |         <Setter Property="Source"
 222 |                 Value="Assets/sales_icon.png" />
 223 |     </Style>
 224 | 
 225 |     <!--#endregion-->
 226 | 
 227 |     <!--#region Card 3-->
 228 | 
 229 |     <Style x:Key="Card301Style"
 230 |            TargetType="Border"
 231 |            BasedOn="{StaticResource C101Style}">
 232 |     </Style>
 233 | 
 234 |     <Style x:Key="C302Style_Desktop"
 235 |            TargetType="Border">
 236 | 
 237 |         <Setter Property="Background"
 238 |                 Value="#292F34" />
 239 |         <Setter Property="Height"
 240 |                 Value="35" />
 241 |         <Setter Property="Width"
 242 |                 Value="110" />
 243 |         <Setter Property="VerticalAlignment"
 244 |                 Value="Top" />
 245 |         <Setter Property="HorizontalAlignment"
 246 |                 Value="Left" />
 247 |         <Setter Property="CornerRadius"
 248 |                 Value="7" />
 249 |         <Setter Property="Margin"
 250 |                 Value="15,15,0,0" />
 251 | 
 252 |     </Style>
 253 | 
 254 |     <Style x:Key="C302Style"
 255 |            TargetType="Border"
 256 |            BasedOn="{StaticResource C102Style}">
 257 |     </Style>
 258 | 
 259 |     <Style x:Key="Card302Style"
 260 |            TargetType="TextBlock"
 261 |            BasedOn="{StaticResource C103Style}">
 262 |         <Setter Property="Text"
 263 |                 Value="PRODUCTS" />
 264 |     </Style>
 265 | 
 266 |     <Style x:Key="C303Style_Desktop"
 267 |            TargetType="TextBlock"
 268 |            BasedOn="{StaticResource C103Style_Desktop}">
 269 |         <Setter Property="Text"
 270 |                 Value="PRODUCTS" />
 271 |     </Style>
 272 | 
 273 |     <Style x:Key="Card303Style"
 274 |            TargetType="TextBlock"
 275 |            BasedOn="{StaticResource C104Style}">
 276 |         <Setter Property="Text"
 277 |                 Value="12.6k" />
 278 |     </Style>
 279 | 
 280 |     <Style x:Key="Card304Style"
 281 |            TargetType="Image"
 282 |            BasedOn="{StaticResource C105Style}">
 283 |         <Setter Property="Source"
 284 |                 Value="Assets/product_icon.png" />
 285 |     </Style>
 286 | 
 287 |     <Style x:Key="C305Style"
 288 |            TargetType="Image"
 289 |            BasedOn="{StaticResource C105Style}">
 290 |         <Setter Property="Source"
 291 |                 Value="Assets/product_icon.png" />
 292 |     </Style>
 293 | 
 294 |     <Style x:Key="C304Style_Desktop"
 295 |            TargetType="TextBlock">
 296 |         <Setter Property="Foreground"
 297 |                 Value="White" />
 298 |         <Setter Property="VerticalAlignment"
 299 |                 Value="Top" />
 300 |         <Setter Property="HorizontalAlignment"
 301 |                 Value="Left" />
 302 |         <Setter Property="FontSize"
 303 |                 Value="28" />
 304 |         <Setter Property="Text"
 305 |                 Value="12.6k" />
 306 |         <Setter Property="FontFamily"
 307 |                 Value="Fonts/#Saira Regular" />
 308 |         <Setter Property="Margin"
 309 |                 Value="25,55,0,0" />
 310 |     </Style>
 311 | 
 312 |     <!--#endregion-->
 313 | 
 314 |     <!--#region Card 4-->
 315 | 
 316 |     <Style x:Key="Card401Style"
 317 |            TargetType="Border"
 318 |            BasedOn="{StaticResource C101Style}">
 319 |     </Style>
 320 | 
 321 |     <Style x:Key="C402Style_Desktop"
 322 |            TargetType="Border">
 323 | 
 324 |         <Setter Property="Background"
 325 |                 Value="#292F34" />
 326 |         <Setter Property="Height"
 327 |                 Value="35" />
 328 |         <Setter Property="Width"
 329 |                 Value="110" />
 330 |         <Setter Property="VerticalAlignment"
 331 |                 Value="Top" />
 332 |         <Setter Property="HorizontalAlignment"
 333 |                 Value="Left" />
 334 |         <Setter Property="CornerRadius"
 335 |                 Value="7" />
 336 |         <Setter Property="Margin"
 337 |                 Value="15,15,0,0" />
 338 | 
 339 |     </Style>
 340 | 
 341 |     <Style x:Key="C402Style"
 342 |            TargetType="Border"
 343 |            BasedOn="{StaticResource C102Style}">
 344 |     </Style>
 345 | 
 346 |     <Style x:Key="Card402Style"
 347 |            TargetType="TextBlock"
 348 |            BasedOn="{StaticResource C103Style}">
 349 |         <Setter Property="Text"
 350 |                 Value="USERS" />
 351 |     </Style>
 352 | 
 353 |     <Style x:Key="C403Style_Desktop"
 354 |            TargetType="TextBlock"
 355 |            BasedOn="{StaticResource C103Style_Desktop}">
 356 |         <Setter Property="Text"
 357 |                 Value="USERS" />
 358 |     </Style>
 359 | 
 360 |     <Style x:Key="Card403Style"
 361 |            TargetType="TextBlock"
 362 |            BasedOn="{StaticResource C104Style}">
 363 |         <Setter Property="Text"
 364 |                 Value="92.8k" />
 365 |     </Style>
 366 | 
 367 |     <Style x:Key="Card404Style"
 368 |            TargetType="Image"
 369 |            BasedOn="{StaticResource C105Style}">
 370 |         <Setter Property="Source"
 371 |                 Value="Assets/user_icon.png" />
 372 |     </Style>
 373 | 
 374 |     <Style x:Key="C405Style"
 375 |            TargetType="Image"
 376 |            BasedOn="{StaticResource C105Style}">
 377 |         <Setter Property="Source"
 378 |                 Value="Assets/user_icon.png" />
 379 |     </Style>
 380 | 
 381 |     <Style x:Key="C404Style_Desktop"
 382 |            TargetType="TextBlock">
 383 |         <Setter Property="Foreground"
 384 |                 Value="White" />
 385 |         <Setter Property="VerticalAlignment"
 386 |                 Value="Top" />
 387 |         <Setter Property="HorizontalAlignment"
 388 |                 Value="Left" />
 389 |         <Setter Property="FontSize"
 390 |                 Value="28" />
 391 |         <Setter Property="Text"
 392 |                 Value="92.8k" />
 393 |         <Setter Property="FontFamily"
 394 |                 Value="Fonts/#Saira Regular" />
 395 |         <Setter Property="Margin"
 396 |                 Value="25,55,0,0" />
 397 |     </Style>
 398 | 
 399 |     <!--#endregion-->
 400 | 
 401 |     <!--#region Card 5-->
 402 | 
 403 |     <Style x:Key="C5Style"
 404 |            TargetType="Border">
 405 | 
 406 |         <Setter Property="Background"
 407 |                 Value="#373E46" />
 408 |         <Setter Property="CornerRadius"
 409 |                 Value="10" />
 410 |         <Setter Property="VerticalAlignment"
 411 |                 Value="Top" />
 412 |         <Setter Property="Height"
 413 |                 Value="290" />
 414 |         <Setter Property="Margin"
 415 |                 Value="10" />
 416 | 
 417 |     </Style>
 418 | 
 419 |     <Style x:Key="C5Style_Desktop"
 420 |            TargetType="Border">
 421 | 
 422 |         <Setter Property="Background"
 423 |                 Value="#373E46" />
 424 |         <Setter Property="CornerRadius"
 425 |                 Value="10" />
 426 |         <Setter Property="VerticalAlignment"
 427 |                 Value="Top" />
 428 |         <Setter Property="Height"
 429 |                 Value="440" />
 430 |         <Setter Property="Margin"
 431 |                 Value="10" />
 432 | 
 433 |     </Style>
 434 | 
 435 |     <Style x:Key="C501Style"
 436 |            TargetType="WrapPanel">
 437 | 
 438 |         <Setter Property="HorizontalAlignment"
 439 |                 Value="Left" />
 440 |         <Setter Property="VerticalAlignment"
 441 |                 Value="Top" />
 442 |         <Setter Property="Margin"
 443 |                 Value="20,20,20,0" />
 444 | 
 445 |     </Style>
 446 | 
 447 |     <Style x:Key="C501Style_Mobile"
 448 |            TargetType="WrapPanel">
 449 | 
 450 |         <Setter Property="HorizontalAlignment"
 451 |                 Value="Center" />
 452 |         <Setter Property="VerticalAlignment"
 453 |                 Value="Top" />
 454 |         <Setter Property="Margin"
 455 |                 Value="30,10,30,0" />
 456 | 
 457 |     </Style>
 458 | 
 459 |     <Style x:Key="C502Style"
 460 |            TargetType="TextBlock">
 461 | 
 462 |         <Setter Property="Foreground"
 463 |                 Value="#DCE0E4" />
 464 |         <Setter Property="Text"
 465 |                 Value="Build A Responsive WPF App With Visual Studio!" />
 466 |         <Setter Property="FontSize"
 467 |                 Value="28" />
 468 |         <Setter Property="TextWrapping"
 469 |                 Value="Wrap" />
 470 |         <Setter Property="FontFamily"
 471 |                 Value="Fonts/#Raleway Medium" />
 472 |         <Setter Property="Margin"
 473 |                 Value="20,15,0,0" />
 474 | 
 475 |     </Style>
 476 | 
 477 |     <Style x:Key="C502Style_Desktop"
 478 |            TargetType="TextBlock">
 479 | 
 480 |         <Setter Property="Foreground"
 481 |                 Value="#DCE0E4" />
 482 |         <Setter Property="Text"
 483 |                 Value="Build A Responsive WPF App With Visual Studio!" />
 484 |         <Setter Property="FontSize"
 485 |                 Value="44" />
 486 |         <Setter Property="TextWrapping"
 487 |                 Value="Wrap" />
 488 |         <Setter Property="FontFamily"
 489 |                 Value="Fonts/#Raleway SemiBold" />
 490 |         <Setter Property="Margin"
 491 |                 Value="40,30,20,0" />
 492 | 
 493 |     </Style>
 494 | 
 495 |     <Style x:Key="C502Style_Mobile"
 496 |            TargetType="TextBlock">
 497 | 
 498 |         <Setter Property="Foreground"
 499 |                 Value="#DCE0E4" />
 500 |         <Setter Property="Text"
 501 |                 Value="Build A Responsive WPF App With Visual Studio!" />
 502 |         <Setter Property="FontSize"
 503 |                 Value="26" />
 504 |         <Setter Property="TextWrapping"
 505 |                 Value="Wrap" />
 506 |         <Setter Property="TextAlignment"
 507 |                 Value="Center" />
 508 |         <Setter Property="FontFamily"
 509 |                 Value="Fonts/#Raleway SemiBold" />
 510 |         <Setter Property="Margin"
 511 |                 Value="10" />
 512 | 
 513 |     </Style>
 514 | 
 515 |     <Style x:Key="C503Style"
 516 |            TargetType="WrapPanel">
 517 | 
 518 |         <Setter Property="HorizontalAlignment"
 519 |                 Value="Left" />
 520 |         <Setter Property="VerticalAlignment"
 521 |                 Value="Top" />
 522 |         <Setter Property="Margin"
 523 |                 Value="20,5,0,0" />
 524 | 
 525 |     </Style>
 526 | 
 527 |     <Style x:Key="C503Style_Desktop"
 528 |            TargetType="WrapPanel">
 529 | 
 530 |         <Setter Property="HorizontalAlignment"
 531 |                 Value="Left" />
 532 |         <Setter Property="VerticalAlignment"
 533 |                 Value="Top" />
 534 |         <Setter Property="Margin"
 535 |                 Value="20,5,20,0" />
 536 | 
 537 |     </Style>
 538 | 
 539 |     <Style x:Key="C503Style_Mobile"
 540 |            TargetType="WrapPanel">
 541 | 
 542 |         <Setter Property="HorizontalAlignment"
 543 |                 Value="Center" />
 544 |         <Setter Property="VerticalAlignment"
 545 |                 Value="Top" />
 546 |         <Setter Property="Margin"
 547 |                 Value="40,0,40,10" />
 548 | 
 549 |     </Style>
 550 | 
 551 |     <Style x:Key="C504Style"
 552 |            TargetType="TextBlock">
 553 | 
 554 |         <Setter Property="Foreground"
 555 |                 Value="#ACB4BD" />
 556 |         <Setter Property="FontSize"
 557 |                 Value="16" />
 558 |         <Setter Property="FontFamily"
 559 |                 Value="Fonts/#Open Sans Regular" />
 560 |         <Setter Property="TextWrapping"
 561 |                 Value="Wrap" />
 562 |         <Setter Property="Text"
 563 |                 Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ligula eget ante condimentum ultrices ut ut nibh. Aliquam leo." />
 564 |         <Setter Property="Margin"
 565 |                 Value="20,0,0,0" />
 566 |     </Style>
 567 | 
 568 |     <Style x:Key="C504Style_Desktop"
 569 |            TargetType="TextBlock">
 570 | 
 571 |         <Setter Property="Foreground"
 572 |                 Value="#ACB4BD" />
 573 |         <Setter Property="FontSize"
 574 |                 Value="22" />
 575 |         <Setter Property="FontFamily"
 576 |                 Value="Fonts/#Open Sans Regular" />
 577 |         <Setter Property="TextWrapping"
 578 |                 Value="Wrap" />
 579 |         <Setter Property="Text"
 580 |                 Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ligula eget ante condimentum ultrices ut ut nibh. Aliquam leo." />
 581 |         <Setter Property="Margin"
 582 |                 Value="40,0,100,0" />
 583 | 
 584 |     </Style>
 585 | 
 586 |     <Style x:Key="C504Style_Mobile"
 587 |            TargetType="TextBlock">
 588 | 
 589 |         <Setter Property="Foreground"
 590 |                 Value="#ACB4BD" />
 591 |         <Setter Property="FontSize"
 592 |                 Value="14" />
 593 |         <Setter Property="FontFamily"
 594 |                 Value="Fonts/#Open Sans Regular" />
 595 |         <Setter Property="TextWrapping"
 596 |                 Value="Wrap" />
 597 |         <Setter Property="TextAlignment"
 598 |                 Value="Center" />
 599 |         <Setter Property="Text"
 600 |                 Value="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ligula eget ante condimentum ultrices ut ut nibh. Aliquam leo." />
 601 |         <Setter Property="Margin"
 602 |                 Value="10,5,10,15" />
 603 | 
 604 |     </Style>
 605 | 
 606 |     <Style x:Key="C506Style"
 607 |            TargetType="Border">
 608 | 
 609 |         <Setter Property="Background"
 610 |                 Value="#FFDD00" />
 611 |         <Setter Property="CornerRadius"
 612 |                 Value="20" />
 613 |         <Setter Property="VerticalAlignment"
 614 |                 Value="Top" />
 615 |         <Setter Property="HorizontalAlignment"
 616 |                 Value="Left" />
 617 |         <Setter Property="Margin"
 618 |                 Value="40,10,0,0" />
 619 |     </Style>
 620 | 
 621 |     <Style x:Key="C506Style_Desktop"
 622 |            TargetType="Border">
 623 | 
 624 |         <Setter Property="Background"
 625 |                 Value="#FFDD00" />
 626 |         <Setter Property="CornerRadius"
 627 |                 Value="20" />
 628 |         <Setter Property="VerticalAlignment"
 629 |                 Value="Top" />
 630 |         <Setter Property="HorizontalAlignment"
 631 |                 Value="Left" />
 632 |         <Setter Property="Margin"
 633 |                 Value="60,10,0,0" />
 634 |     </Style>
 635 | 
 636 |     <Style x:Key="C506Style_Mobile"
 637 |            TargetType="Border">
 638 | 
 639 |         <Setter Property="Background"
 640 |                 Value="#FFDD00" />
 641 |         <Setter Property="CornerRadius"
 642 |                 Value="20" />
 643 |         <Setter Property="VerticalAlignment"
 644 |                 Value="Top" />
 645 |         <Setter Property="HorizontalAlignment"
 646 |                 Value="Center" />
 647 | 
 648 |     </Style>
 649 | 
 650 |     <Style x:Key="C507Style"
 651 |            TargetType="TextBlock">
 652 | 
 653 |         <Setter Property="Foreground"
 654 |                 Value="#2D2700" />
 655 |         <Setter Property="FontSize"
 656 |                 Value="12" />
 657 |         <Setter Property="Text"
 658 |                 Value="GET STARTED" />
 659 |         <Setter Property="VerticalAlignment"
 660 |                 Value="Center" />
 661 |         <Setter Property="HorizontalAlignment"
 662 |                 Value="Center" />
 663 |         <Setter Property="FontFamily"
 664 |                 Value="Fonts/#Open Sans SemiBold" />
 665 | 
 666 |     </Style>
 667 | 
 668 |     <!--#endregion-->
 669 | 
 670 |     <!--#region Card 6-->
 671 | 
 672 |     <Style x:Key="CalendarStyle"
 673 |            TargetType="Border">
 674 | 
 675 |         <Setter Property="Background"
 676 |                 Value="#292F34" />
 677 |         <Setter Property="Margin"
 678 |                 Value="10,30,30,30" />
 679 |         <Setter Property="CornerRadius"
 680 |                 Value="10" />
 681 | 
 682 |     </Style>
 683 | 
 684 |     <Style x:Key="CalendarStyle_Mobile"
 685 |            TargetType="Border">
 686 | 
 687 |         <Setter Property="Background"
 688 |                 Value="#292F34" />
 689 |         <Setter Property="Margin"
 690 |                 Value="20,0,20,25" />
 691 |         <Setter Property="CornerRadius"
 692 |                 Value="10" />
 693 | 
 694 |     </Style>
 695 | 
 696 |     <Style x:Key="Cal01Style"
 697 |            TargetType="Image">
 698 | 
 699 |         <Setter Property="HorizontalAlignment"
 700 |                 Value="Left" />
 701 |         <Setter Property="VerticalAlignment"
 702 |                 Value="Center" />
 703 |         <Setter Property="Source"
 704 |                 Value="Assets/calendar_icon.png" />
 705 |         <Setter Property="Stretch"
 706 |                 Value="None" />
 707 |         <Setter Property="Margin"
 708 |                 Value="20,0,0,0" />
 709 | 
 710 |     </Style>
 711 | 
 712 |     <Style x:Key="Cal02Style"
 713 |            TargetType="TextBlock">
 714 | 
 715 |         <Setter Property="Foreground"
 716 |                 Value="#FFFFFF" />
 717 |         <Setter Property="VerticalAlignment"
 718 |                 Value="Center" />
 719 |         <Setter Property="HorizontalAlignment"
 720 |                 Value="Left" />
 721 |         <Setter Property="FontSize"
 722 |                 Value="20" />
 723 |         <Setter Property="Text"
 724 |                 Value="Calendar" />
 725 |         <Setter Property="FontFamily"
 726 |                 Value="Fonts/#Open Sans Regular" />
 727 |         <Setter Property="Margin"
 728 |                 Value="80,0,0,0" />
 729 | 
 730 |     </Style>
 731 | 
 732 |     <Style x:Key="ReportStyle"
 733 |            TargetType="Border">
 734 | 
 735 |         <Setter Property="Background"
 736 |                 Value="#292F34" />
 737 |         <Setter Property="Margin"
 738 |                 Value="20,30,20,30" />
 739 |         <Setter Property="CornerRadius"
 740 |                 Value="10" />
 741 | 
 742 |     </Style>
 743 | 
 744 |     <Style x:Key="ReportStyle_Mobile"
 745 |            TargetType="Border">
 746 | 
 747 |         <Setter Property="Background"
 748 |                 Value="#292F34" />
 749 |         <Setter Property="Margin"
 750 |                 Value="20,10,20,15" />
 751 |         <Setter Property="CornerRadius"
 752 |                 Value="10" />
 753 | 
 754 |     </Style>
 755 | 
 756 |     <Style x:Key="Rep01Style"
 757 |            TargetType="Image">
 758 | 
 759 |         <Setter Property="HorizontalAlignment"
 760 |                 Value="Left" />
 761 |         <Setter Property="VerticalAlignment"
 762 |                 Value="Center" />
 763 |         <Setter Property="Source"
 764 |                 Value="Assets/reports_icon.png" />
 765 |         <Setter Property="Stretch"
 766 |                 Value="None" />
 767 |         <Setter Property="Margin"
 768 |                 Value="20,0,0,0" />
 769 | 
 770 |     </Style>
 771 | 
 772 |     <Style x:Key="Rep02Style"
 773 |            TargetType="TextBlock">
 774 | 
 775 |         <Setter Property="Foreground"
 776 |                 Value="#FFFFFF" />
 777 |         <Setter Property="VerticalAlignment"
 778 |                 Value="Center" />
 779 |         <Setter Property="HorizontalAlignment"
 780 |                 Value="Left" />
 781 |         <Setter Property="FontSize"
 782 |                 Value="20" />
 783 |         <Setter Property="Text"
 784 |                 Value="Reports" />
 785 |         <Setter Property="FontFamily"
 786 |                 Value="Fonts/#Open Sans Regular" />
 787 |         <Setter Property="Margin"
 788 |                 Value="80,0,0,0" />
 789 | 
 790 |     </Style>
 791 | 
 792 |     <Style x:Key="StatisticsStyle"
 793 |            TargetType="Border">
 794 | 
 795 |         <Setter Property="Background"
 796 |                 Value="#292F34" />
 797 |         <Setter Property="Margin"
 798 |                 Value="30,30,10,30" />
 799 |         <Setter Property="CornerRadius"
 800 |                 Value="10" />
 801 | 
 802 |     </Style>
 803 | 
 804 |     <Style x:Key="StatisticsStyle_Mobile"
 805 |            TargetType="Border">
 806 | 
 807 |         <Setter Property="Background"
 808 |                 Value="#292F34" />
 809 |         <Setter Property="Margin"
 810 |                 Value="20,20,20,5" />
 811 |         <Setter Property="CornerRadius"
 812 |                 Value="10" />
 813 | 
 814 |     </Style>
 815 | 
 816 |     <Style x:Key="Stat01Style"
 817 |            TargetType="Image">
 818 | 
 819 |         <Setter Property="HorizontalAlignment"
 820 |                 Value="Left" />
 821 |         <Setter Property="VerticalAlignment"
 822 |                 Value="Center" />
 823 |         <Setter Property="Source"
 824 |                 Value="Assets/stats_icon.png" />
 825 |         <Setter Property="Stretch"
 826 |                 Value="None" />
 827 |         <Setter Property="Margin"
 828 |                 Value="20,0,0,0" />
 829 | 
 830 |     </Style>
 831 | 
 832 |     <Style x:Key="Stat02Style"
 833 |            TargetType="TextBlock">
 834 | 
 835 |         <Setter Property="Foreground"
 836 |                 Value="#FFFFFF" />
 837 |         <Setter Property="VerticalAlignment"
 838 |                 Value="Center" />
 839 |         <Setter Property="HorizontalAlignment"
 840 |                 Value="Left" />
 841 |         <Setter Property="FontSize"
 842 |                 Value="20" />
 843 |         <Setter Property="Text"
 844 |                 Value="Statistics" />
 845 |         <Setter Property="FontFamily"
 846 |                 Value="Fonts/#Open Sans Regular" />
 847 |         <Setter Property="Margin"
 848 |                 Value="80,0,0,0" />
 849 | 
 850 |     </Style>
 851 | 
 852 |     <Style x:Key="C6Style"
 853 |            TargetType="Border">
 854 | 
 855 |         <Setter Property="VerticalAlignment"
 856 |                 Value="Top" />
 857 |         <Setter Property="Background"
 858 |                 Value="#373E46" />
 859 |         <Setter Property="CornerRadius"
 860 |                 Value="10" />
 861 |         <Setter Property="Height"
 862 |                 Value="135" />
 863 |         <Setter Property="Margin"
 864 |                 Value="10" />
 865 | 
 866 |     </Style>
 867 | 
 868 | 
 869 |     <!--#endregion-->
 870 | 
 871 |     <!--#region Card 7-->
 872 | 
 873 |     <Style x:Key="C701Style"
 874 |            TargetType="TextBlock">
 875 | 
 876 |         <Setter Property="Foreground"
 877 |                 Value="#D3D8DC" />
 878 |         <Setter Property="VerticalAlignment"
 879 |                 Value="Top" />
 880 |         <Setter Property="HorizontalAlignment"
 881 |                 Value="Left" />
 882 |         <Setter Property="FontSize"
 883 |                 Value="20" />
 884 |         <Setter Property="Text"
 885 |                 Value="Analytics" />
 886 |         <Setter Property="FontFamily"
 887 |                 Value="Fonts/#Roboto Regular" />
 888 |         <Setter Property="Margin"
 889 |                 Value="20,20,0,0" />
 890 | 
 891 |     </Style>
 892 | 
 893 |     <Style x:Key="C701Style_Desktop"
 894 |            TargetType="TextBlock">
 895 | 
 896 |         <Setter Property="Foreground"
 897 |                 Value="#D3D8DC" />
 898 |         <Setter Property="VerticalAlignment"
 899 |                 Value="Top" />
 900 |         <Setter Property="HorizontalAlignment"
 901 |                 Value="Left" />
 902 |         <Setter Property="FontSize"
 903 |                 Value="22" />
 904 |         <Setter Property="Text"
 905 |                 Value="Analytics" />
 906 |         <Setter Property="FontFamily"
 907 |                 Value="Fonts/#Roboto Medium" />
 908 |         <Setter Property="Margin"
 909 |                 Value="20,20,0,0" />
 910 | 
 911 |     </Style>
 912 | 
 913 |     <Style x:Key="C702Style"
 914 |            TargetType="Border">
 915 | 
 916 |         <Setter Property="Height"
 917 |                 Value="75" />
 918 |         <Setter Property="Background"
 919 |                 Value="#292F34" />
 920 |         <Setter Property="CornerRadius"
 921 |                 Value="10" />
 922 |         <Setter Property="Margin"
 923 |                 Value="20,25,20,25" />
 924 | 
 925 |     </Style>
 926 | 
 927 |     <Style x:Key="C703Style"
 928 |            TargetType="TextBlock">
 929 | 
 930 |         <Setter Property="Foreground"
 931 |                 Value="#8F99A7" />
 932 |         <Setter Property="VerticalAlignment"
 933 |                 Value="Top" />
 934 |         <Setter Property="HorizontalAlignment"
 935 |                 Value="Left" />
 936 |         <Setter Property="FontSize"
 937 |                 Value="16" />
 938 |         <Setter Property="Text"
 939 |                 Value="Customers" />
 940 |         <Setter Property="FontFamily"
 941 |                 Value="Fonts/#Open Sans Regular" />
 942 |         <Setter Property="Margin"
 943 |                 Value="18,12,0,0" />
 944 | 
 945 |     </Style>
 946 | 
 947 |     <Style x:Key="C704Style"
 948 |            TargetType="TextBlock">
 949 | 
 950 |         <Setter Property="Foreground"
 951 |                 Value="#E9EBED" />
 952 |         <Setter Property="VerticalAlignment"
 953 |                 Value="Top" />
 954 |         <Setter Property="HorizontalAlignment"
 955 |                 Value="Left" />
 956 |         <Setter Property="FontSize"
 957 |                 Value="20" />
 958 |         <Setter Property="Text"
 959 |                 Value="315k" />
 960 |         <Setter Property="FontFamily"
 961 |                 Value="Fonts/#Saira Regular" />
 962 |         <Setter Property="Margin"
 963 |                 Value="18,34,0,0" />
 964 | 
 965 |     </Style>
 966 | 
 967 |     <Style x:Key="C705Style"
 968 |            TargetType="Border">
 969 | 
 970 |         <Setter Property="Height"
 971 |                 Value="55" />
 972 |         <Setter Property="Width"
 973 |                 Value="60" />
 974 |         <Setter Property="VerticalAlignment"
 975 |                 Value="Center" />
 976 |         <Setter Property="HorizontalAlignment"
 977 |                 Value="Right" />
 978 |         <Setter Property="Margin"
 979 |                 Value="0,0,10,0" />
 980 |         <Setter Property="CornerRadius"
 981 |                 Value="10" />
 982 |         <Setter Property="Background"
 983 |                 Value="Transparent" />
 984 | 
 985 |     </Style>
 986 | 
 987 |     <Style x:Key="C706Style"
 988 |            TargetType="Image">
 989 | 
 990 |         <Setter Property="HorizontalAlignment"
 991 |                 Value="Center" />
 992 |         <Setter Property="VerticalAlignment"
 993 |                 Value="Center" />
 994 |         <Setter Property="Source"
 995 |                 Value="Assets/line_chart.png" />
 996 |         <Setter Property="Stretch"
 997 |                 Value="None" />
 998 | 
 999 |     </Style>
1000 | 
1001 |     <Style x:Key="C707Style"
1002 |            TargetType="TextBlock">
1003 | 
1004 |         <Setter Property="Foreground"
1005 |                 Value="#ACB4BD" />
1006 |         <Setter Property="FontSize"
1007 |                 Value="16" />
1008 |         <Setter Property="TextWrapping"
1009 |                 Value="Wrap" />
1010 |         <Setter Property="Text"
1011 |                 Value="Morbi sit amet urna vel tortor convallis dapibus. Aenean sit amet fermentum sapien. Praesent pharetra." />
1012 |         <Setter Property="FontFamily"
1013 |                 Value="Fonts/#Open Sans Regular" />
1014 |         <Setter Property="Margin"
1015 |                 Value="25,0,25,0" />
1016 | 
1017 |     </Style>
1018 | 
1019 |     <Style x:Key="C707Style_Desktop"
1020 |            TargetType="TextBlock">
1021 | 
1022 |         <Setter Property="Foreground"
1023 |                 Value="#ACB4BD" />
1024 |         <Setter Property="FontSize"
1025 |                 Value="18" />
1026 |         <Setter Property="TextWrapping"
1027 |                 Value="Wrap" />
1028 |         <Setter Property="Text"
1029 |                 Value="Morbi sit amet urna vel tortor convallis dapibus. Aenean sit amet fermentum sapien. Praesent pharetra." />
1030 |         <Setter Property="FontFamily"
1031 |                 Value="Fonts/#Open Sans Regular" />
1032 |         <Setter Property="Margin"
1033 |                 Value="25,0,25,0" />
1034 | 
1035 |     </Style>
1036 | 
1037 |     <Style x:Key="C708Style"
1038 |            TargetType="Border">
1039 | 
1040 |         <Setter Property="Margin"
1041 |                 Value="20,25,20,25" />
1042 |         <Setter Property="Height"
1043 |                 Value="75" />
1044 |         <Setter Property="Background"
1045 |                 Value="#292F34" />
1046 |         <Setter Property="CornerRadius"
1047 |                 Value="10" />
1048 | 
1049 |     </Style>
1050 | 
1051 |     <Style x:Key="C709Style"
1052 |            TargetType="TextBlock">
1053 | 
1054 |         <Setter Property="Foreground"
1055 |                 Value="#8F99A7" />
1056 |         <Setter Property="VerticalAlignment"
1057 |                 Value="Top" />
1058 |         <Setter Property="HorizontalAlignment"
1059 |                 Value="Left" />
1060 |         <Setter Property="FontSize"
1061 |                 Value="16" />
1062 |         <Setter Property="Text"
1063 |                 Value="Delivered" />
1064 |         <Setter Property="FontFamily"
1065 |                 Value="Fonts/#Open Sans Regular" />
1066 |         <Setter Property="Margin"
1067 |                 Value="18,12,0,0" />
1068 | 
1069 |     </Style>
1070 | 
1071 |     <Style x:Key="C710Style"
1072 |            TargetType="TextBlock">
1073 | 
1074 |         <Setter Property="Foreground"
1075 |                 Value="#E9EBED" />
1076 |         <Setter Property="VerticalAlignment"
1077 |                 Value="Top" />
1078 |         <Setter Property="HorizontalAlignment"
1079 |                 Value="Left" />
1080 |         <Setter Property="FontSize"
1081 |                 Value="20" />
1082 |         <Setter Property="Text"
1083 |                 Value="159k" />
1084 |         <Setter Property="FontFamily"
1085 |                 Value="Fonts/#Saira Regular" />
1086 |         <Setter Property="Margin"
1087 |                 Value="18,34,0,0" />
1088 | 
1089 |     </Style>
1090 | 
1091 |     <Style x:Key="C711Style"
1092 |            TargetType="Border">
1093 | 
1094 |         <Setter Property="Height"
1095 |                 Value="55" />
1096 |         <Setter Property="Width"
1097 |                 Value="60" />
1098 |         <Setter Property="VerticalAlignment"
1099 |                 Value="Center" />
1100 |         <Setter Property="HorizontalAlignment"
1101 |                 Value="Right" />
1102 |         <Setter Property="Margin"
1103 |                 Value="0,0,10,0" />
1104 |         <Setter Property="CornerRadius"
1105 |                 Value="10" />
1106 |         <Setter Property="Background"
1107 |                 Value="Transparent" />
1108 | 
1109 |     </Style>
1110 | 
1111 |     <Style x:Key="C712Style"
1112 |            TargetType="Image">
1113 | 
1114 |         <Setter Property="HorizontalAlignment"
1115 |                 Value="Center" />
1116 |         <Setter Property="VerticalAlignment"
1117 |                 Value="Center" />
1118 |         <Setter Property="Source"
1119 |                 Value="Assets/delivery_icon.png" />
1120 |         <Setter Property="Stretch"
1121 |                 Value="None" />
1122 |     </Style>
1123 | 
1124 |     <Style x:Key="C713Style"
1125 |            TargetType="TextBlock">
1126 | 
1127 |         <Setter Property="Foreground"
1128 |                 Value="#ACB4BD" />
1129 |         <Setter Property="FontSize"
1130 |                 Value="16" />
1131 |         <Setter Property="TextWrapping"
1132 |                 Value="Wrap" />
1133 |         <Setter Property="Text"
1134 |                 Value="Proin tincidunt neque fermentum sem hendrerit, at maximus turpis viverra. In." />
1135 |         <Setter Property="FontFamily"
1136 |                 Value="Fonts/#Open Sans Regular" />
1137 |         <Setter Property="Margin"
1138 |                 Value="25,0,25,0" />
1139 | 
1140 |     </Style>
1141 | 
1142 |     <Style x:Key="C713Style_Desktop"
1143 |            TargetType="TextBlock">
1144 | 
1145 |         <Setter Property="Foreground"
1146 |                 Value="#ACB4BD" />
1147 |         <Setter Property="FontSize"
1148 |                 Value="18" />
1149 |         <Setter Property="TextWrapping"
1150 |                 Value="Wrap" />
1151 |         <Setter Property="Text"
1152 |                 Value="Proin tincidunt neque fermentum sem hendrerit, at maximus turpis viverra. In." />
1153 |         <Setter Property="FontFamily"
1154 |                 Value="Fonts/#Open Sans Regular" />
1155 |         <Setter Property="Margin"
1156 |                 Value="25,0,25,0" />
1157 | 
1158 |     </Style>
1159 | 
1160 |     <Style x:Key="C7VerticalStyle"
1161 |            TargetType="Border">
1162 | 
1163 |         <Setter Property="Background"
1164 |                 Value="#373E46" />
1165 |         <Setter Property="CornerRadius"
1166 |                 Value="10" />
1167 |         <Setter Property="Height"
1168 |                 Value="562" />
1169 |         <Setter Property="Margin"
1170 |                 Value="10" />
1171 | 
1172 |     </Style>
1173 | 
1174 |     <Style x:Key="C7HorizontalStyle"
1175 |            TargetType="Border">
1176 | 
1177 |         <Setter Property="Background"
1178 |                 Value="#373E46" />
1179 |         <Setter Property="CornerRadius"
1180 |                 Value="10" />
1181 |         <Setter Property="Height"
1182 |                 Value="290" />
1183 |         <Setter Property="Margin"
1184 |                 Value="10" />
1185 | 
1186 |     </Style>
1187 | 
1188 |     <!--#endregion-->   
1189 |     
1190 |     <!--#region Side Menu-->
1191 | 
1192 |     <Style x:Key="SideMenuStyle"
1193 |            TargetType="Border">
1194 | 
1195 |         <Setter Property="Background"
1196 |                 Value="#373E46" />
1197 |         <Setter Property="CornerRadius"
1198 |                 Value="4,0,0,4" />
1199 |         <Setter Property="MinWidth"
1200 |                 Value="200" />
1201 |         <Setter Property="Margin"
1202 |                 Value="2,2,0,2" />
1203 | 
1204 |     </Style>
1205 | 
1206 |     <Style x:Key="MenuButton1Style"
1207 |            TargetType="Button">
1208 | 
1209 |         <Setter Property="Template">
1210 | 
1211 |             <Setter.Value>
1212 | 
1213 |                 <ControlTemplate TargetType="Button">
1214 | 
1215 |                     <Grid>
1216 |                         <Border x:Name="border"
1217 |                                 Background="#373E46"
1218 |                                 Height="50"
1219 |                                 VerticalAlignment="Top">
1220 |                             <ContentPresenter />
1221 |                         </Border>
1222 | 
1223 |                         <Image Source="Assets/dashboard_icon.png"
1224 |                                HorizontalAlignment="Left"
1225 |                                VerticalAlignment="Center"
1226 |                                Margin="20,0,0,0"
1227 |                                Stretch="None" />
1228 | 
1229 |                         <TextBlock Foreground="#E9EBED"
1230 |                                    VerticalAlignment="Center"
1231 |                                    HorizontalAlignment="Left"
1232 |                                    FontSize="18"
1233 |                                    Text="Dashboard"
1234 |                                    FontFamily="Fonts/#Open Sans Regular"
1235 |                                    Margin="70,0,0,0" />
1236 |                     </Grid>
1237 | 
1238 |                     <ControlTemplate.Triggers>
1239 | 
1240 |                         <Trigger Property="IsMouseOver"
1241 |                                  Value="True">
1242 |                             <Setter Property="Background"
1243 |                                     TargetName="border"
1244 |                                     Value="#292F34" />
1245 |                         </Trigger>
1246 |                         <Trigger Property="IsPressed"
1247 |                                  Value="True">
1248 |                             <Setter Property="Background"
1249 |                                     TargetName="border"
1250 |                                     Value="#292F34" />
1251 | 
1252 |                         </Trigger>
1253 | 
1254 |                     </ControlTemplate.Triggers>
1255 |                 </ControlTemplate>
1256 |             </Setter.Value>
1257 |         </Setter>
1258 | 
1259 |     </Style>
1260 | 
1261 |     <Style x:Key="MenuButton2Style"
1262 |            TargetType="Button">
1263 | 
1264 |         <Setter Property="Template">
1265 | 
1266 |             <Setter.Value>
1267 | 
1268 |                 <ControlTemplate TargetType="Button">
1269 | 
1270 |                     <Grid>
1271 |                         <Border x:Name="border"
1272 |                                 Background="#373E46"
1273 |                                 Height="50"
1274 |                                 VerticalAlignment="Top">
1275 |                             <ContentPresenter />
1276 |                         </Border>
1277 | 
1278 |                         <Image Source="Assets/stocks_icon.png"
1279 |                                HorizontalAlignment="Left"
1280 |                                VerticalAlignment="Center"
1281 |                                Margin="20,0,0,0"
1282 |                                Stretch="None" />
1283 | 
1284 |                         <TextBlock Foreground="#E9EBED"
1285 |                                    VerticalAlignment="Center"
1286 |                                    HorizontalAlignment="Left"
1287 |                                    FontSize="18"
1288 |                                    Text="Stocks"
1289 |                                    FontFamily="Fonts/#Open Sans Regular"
1290 |                                    Margin="70,0,0,0" />
1291 |                     </Grid>
1292 | 
1293 |                     <ControlTemplate.Triggers>
1294 | 
1295 |                         <Trigger Property="IsMouseOver"
1296 |                                  Value="True">
1297 |                             <Setter Property="Background"
1298 |                                     TargetName="border"
1299 |                                     Value="#292F34" />
1300 |                         </Trigger>
1301 |                         <Trigger Property="IsPressed"
1302 |                                  Value="True">
1303 |                             <Setter Property="Background"
1304 |                                     TargetName="border"
1305 |                                     Value="#292F34" />
1306 | 
1307 |                         </Trigger>
1308 | 
1309 |                     </ControlTemplate.Triggers>
1310 |                 </ControlTemplate>
1311 |             </Setter.Value>
1312 |         </Setter>
1313 | 
1314 |     </Style>
1315 | 
1316 |     <Style x:Key="MenuButton3Style"
1317 |            TargetType="Button">
1318 | 
1319 |         <Setter Property="Template">
1320 | 
1321 |             <Setter.Value>
1322 | 
1323 |                 <ControlTemplate TargetType="Button">
1324 | 
1325 |                     <Grid>
1326 |                         <Border x:Name="border"
1327 |                                 Background="#373E46"
1328 |                                 Height="50"
1329 |                                 VerticalAlignment="Top">
1330 |                             <ContentPresenter />
1331 |                         </Border>
1332 | 
1333 |                         <Image Source="Assets/analytics_icon.png"
1334 |                                HorizontalAlignment="Left"
1335 |                                VerticalAlignment="Center"
1336 |                                Margin="20,0,0,0"
1337 |                                Stretch="None" />
1338 | 
1339 |                         <TextBlock Foreground="#E9EBED"
1340 |                                    VerticalAlignment="Center"
1341 |                                    HorizontalAlignment="Left"
1342 |                                    FontSize="18"
1343 |                                    Text="Analytics"
1344 |                                    FontFamily="Fonts/#Open Sans Regular"
1345 |                                    Margin="70,0,0,0" />
1346 |                     </Grid>
1347 | 
1348 |                     <ControlTemplate.Triggers>
1349 | 
1350 |                         <Trigger Property="IsMouseOver"
1351 |                                  Value="True">
1352 |                             <Setter Property="Background"
1353 |                                     TargetName="border"
1354 |                                     Value="#292F34" />
1355 |                         </Trigger>
1356 |                         <Trigger Property="IsPressed"
1357 |                                  Value="True">
1358 |                             <Setter Property="Background"
1359 |                                     TargetName="border"
1360 |                                     Value="#292F34" />
1361 | 
1362 |                         </Trigger>
1363 | 
1364 |                     </ControlTemplate.Triggers>
1365 |                 </ControlTemplate>
1366 |             </Setter.Value>
1367 |         </Setter>
1368 | 
1369 |     </Style>
1370 | 
1371 |     <Style x:Key="MenuButton4Style"
1372 |            TargetType="Button">
1373 | 
1374 |         <Setter Property="Template">
1375 | 
1376 |             <Setter.Value>
1377 | 
1378 |                 <ControlTemplate TargetType="Button">
1379 | 
1380 |                     <Grid>
1381 |                         <Border x:Name="border"
1382 |                                 Background="#373E46"
1383 |                                 Height="50"
1384 |                                 VerticalAlignment="Top">
1385 |                             <ContentPresenter />
1386 |                         </Border>
1387 | 
1388 |                         <Image Source="Assets/discount_icon.png"
1389 |                                HorizontalAlignment="Left"
1390 |                                VerticalAlignment="Center"
1391 |                                Margin="20,0,0,0"
1392 |                                Stretch="None" />
1393 | 
1394 |                         <TextBlock Foreground="#E9EBED"
1395 |                                    VerticalAlignment="Center"
1396 |                                    HorizontalAlignment="Left"
1397 |                                    FontSize="18"
1398 |                                    Text="Discounts"
1399 |                                    FontFamily="Fonts/#Open Sans Regular"
1400 |                                    Margin="70,0,0,0" />
1401 |                     </Grid>
1402 | 
1403 |                     <ControlTemplate.Triggers>
1404 | 
1405 |                         <Trigger Property="IsMouseOver"
1406 |                                  Value="True">
1407 |                             <Setter Property="Background"
1408 |                                     TargetName="border"
1409 |                                     Value="#292F34" />
1410 |                         </Trigger>
1411 |                         <Trigger Property="IsPressed"
1412 |                                  Value="True">
1413 |                             <Setter Property="Background"
1414 |                                     TargetName="border"
1415 |                                     Value="#292F34" />
1416 | 
1417 |                         </Trigger>
1418 | 
1419 |                     </ControlTemplate.Triggers>
1420 |                 </ControlTemplate>
1421 |             </Setter.Value>
1422 |         </Setter>
1423 | 
1424 |     </Style>
1425 | 
1426 |     <Style x:Key="MenuButton5Style"
1427 |            TargetType="Button">
1428 | 
1429 |         <Setter Property="Template">
1430 | 
1431 |             <Setter.Value>
1432 | 
1433 |                 <ControlTemplate TargetType="Button">
1434 | 
1435 |                     <Grid>
1436 |                         <Border x:Name="border"
1437 |                                 Background="#373E46"
1438 |                                 Height="50"
1439 |                                 VerticalAlignment="Top">
1440 |                             <ContentPresenter />
1441 |                         </Border>
1442 | 
1443 |                         <Image Source="Assets/categories_icon.png"
1444 |                                HorizontalAlignment="Left"
1445 |                                VerticalAlignment="Center"
1446 |                                Margin="20,0,0,0"
1447 |                                Stretch="None" />
1448 | 
1449 |                         <TextBlock Foreground="#E9EBED"
1450 |                                    VerticalAlignment="Center"
1451 |                                    HorizontalAlignment="Left"
1452 |                                    FontSize="18"
1453 |                                    Text="Categories"
1454 |                                    FontFamily="Fonts/#Open Sans Regular"
1455 |                                    Margin="70,0,0,0" />
1456 |                     </Grid>
1457 | 
1458 |                     <ControlTemplate.Triggers>
1459 | 
1460 |                         <Trigger Property="IsMouseOver"
1461 |                                  Value="True">
1462 |                             <Setter Property="Background"
1463 |                                     TargetName="border"
1464 |                                     Value="#292F34" />
1465 |                         </Trigger>
1466 |                         <Trigger Property="IsPressed"
1467 |                                  Value="True">
1468 |                             <Setter Property="Background"
1469 |                                     TargetName="border"
1470 |                                     Value="#292F34" />
1471 | 
1472 |                         </Trigger>
1473 | 
1474 |                     </ControlTemplate.Triggers>
1475 |                 </ControlTemplate>
1476 |             </Setter.Value>
1477 |         </Setter>
1478 | 
1479 |     </Style>
1480 | 
1481 |     <Style x:Key="MenuStackPanelStyle"
1482 |            TargetType="StackPanel">
1483 | 
1484 |         <Setter Property="Orientation"
1485 |                 Value="Vertical" />
1486 |         <Setter Property="Height"
1487 |                 Value="250" />
1488 |         <Setter Property="Background"
1489 |                 Value="#2E333A" />
1490 |         <Setter Property="VerticalAlignment"
1491 |                 Value="Top" />
1492 |         <Setter Property="Margin"
1493 |                 Value="0,180,0,0" />
1494 | 
1495 |     </Style>
1496 | 
1497 |     <ControlTemplate x:Key="SideMenuTemplate">
1498 | 
1499 |         <Border Grid.Row="0"
1500 |                 Grid.RowSpan="3"
1501 |                 Grid.Column="0"
1502 |                 Style="{StaticResource SideMenuStyle}">
1503 | 
1504 |             <Grid>
1505 | 
1506 |                 <StackPanel Style="{StaticResource MenuStackPanelStyle}">
1507 | 
1508 |                     <Button Style="{StaticResource MenuButton1Style}" />
1509 |                     <Button Style="{StaticResource MenuButton2Style}" />
1510 |                     <Button Style="{StaticResource MenuButton3Style}" />
1511 |                     <Button Style="{StaticResource MenuButton4Style}" />
1512 |                     <Button Style="{StaticResource MenuButton5Style}" />
1513 | 
1514 |                 </StackPanel>
1515 | 
1516 |                 <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
1517 |                            FontFamily="Fonts/#Saira SemiBold"
1518 |                            FontSize="10"
1519 |                            VerticalAlignment="Bottom"
1520 |                            HorizontalAlignment="Center"
1521 |                            Foreground="#959FAC"
1522 |                            Margin="0,0,10,10" />
1523 | 
1524 |             </Grid>
1525 |         </Border>
1526 | 
1527 |     </ControlTemplate>
1528 | 
1529 |     <ImageBrush x:Key="hamburger_def"
1530 |                 ImageSource="Assets/hamburger_icon.png"
1531 |                 Stretch="None" />
1532 | 
1533 |     <ImageBrush x:Key="hamburger_mo"
1534 |                 ImageSource="Assets/hamburger_mo.png"
1535 |                 Stretch="None" />
1536 | 
1537 |     <Style x:Key="HamburgerMenuButton"
1538 |            TargetType="Button">
1539 | 
1540 |         <Setter Property="Height"
1541 |                 Value="45" />
1542 |         <Setter Property="Width"
1543 |                 Value="45" />
1544 |         <Setter Property="HorizontalAlignment"
1545 |                 Value="Left" />
1546 |         <Setter Property="VerticalAlignment"
1547 |                 Value="Top" />
1548 |         <Setter Property="Margin"
1549 |                 Value="15,5,0,0" />
1550 | 
1551 |         <Setter Property="Template">
1552 | 
1553 |             <Setter.Value>
1554 | 
1555 |                 <ControlTemplate TargetType="{x:Type Button}">
1556 | 
1557 |                     <Border x:Name="border"
1558 |                             BorderThickness="0"
1559 |                             Background="{StaticResource hamburger_def}">
1560 | 
1561 |                     </Border>
1562 | 
1563 |                     <ControlTemplate.Triggers>
1564 | 
1565 |                         <Trigger Property="IsMouseOver"
1566 |                                  Value="True">
1567 | 
1568 |                             <Setter Property="Background"
1569 |                                     TargetName="border"
1570 |                                     Value="{StaticResource hamburger_mo}" />
1571 | 
1572 |                         </Trigger>
1573 | 
1574 |                         <Trigger Property="IsPressed"
1575 |                                  Value="True">
1576 | 
1577 |                             <Setter Property="Background"
1578 |                                     TargetName="border"
1579 |                                     Value="{StaticResource hamburger_mo}" />
1580 | 
1581 |                         </Trigger>
1582 | 
1583 |                     </ControlTemplate.Triggers>
1584 | 
1585 |                 </ControlTemplate>
1586 | 
1587 |             </Setter.Value>
1588 | 
1589 |         </Setter>
1590 |     </Style>
1591 | 
1592 |     <ImageBrush x:Key="close_def"
1593 |                 ImageSource="Assets/close_menu_def.png"
1594 |                 Stretch="None" />
1595 | 
1596 |     <ImageBrush x:Key="close_mo"
1597 |                 ImageSource="Assets/close_menu_mo.png"
1598 |                 Stretch="None" />
1599 | 
1600 |     <Style x:Key="CloseMenuButton"
1601 |            TargetType="{x:Type Button}">
1602 | 
1603 |         <Setter Property="Height"
1604 |                 Value="30" />
1605 |         <Setter Property="Width"
1606 |                 Value="30" />
1607 |         <Setter Property="HorizontalAlignment"
1608 |                 Value="Right" />
1609 |         <Setter Property="VerticalAlignment"
1610 |                 Value="Top" />
1611 |         <Setter Property="Margin"
1612 |                 Value="0,10,10,0" />
1613 | 
1614 |         <Setter Property="Template">
1615 | 
1616 |             <Setter.Value>
1617 | 
1618 |                 <ControlTemplate TargetType="{x:Type Button}">
1619 | 
1620 |                     <Border x:Name="border"
1621 |                             BorderThickness="0"
1622 |                             Background="{StaticResource close_def}">
1623 | 
1624 |                     </Border>
1625 | 
1626 |                     <ControlTemplate.Triggers>
1627 | 
1628 |                         <Trigger Property="IsMouseOver"
1629 |                                  Value="True">
1630 | 
1631 |                             <Setter Property="Background"
1632 |                                     TargetName="border"
1633 |                                     Value="{StaticResource close_mo}" />
1634 | 
1635 |                         </Trigger>
1636 | 
1637 |                         <Trigger Property="IsPressed"
1638 |                                  Value="True">
1639 | 
1640 |                             <Setter Property="Background"
1641 |                                     TargetName="border"
1642 |                                     Value="{StaticResource close_mo}" />
1643 | 
1644 |                         </Trigger>
1645 | 
1646 |                     </ControlTemplate.Triggers>
1647 | 
1648 |                 </ControlTemplate>
1649 | 
1650 |             </Setter.Value>
1651 | 
1652 |         </Setter>
1653 | 
1654 |     </Style>
1655 | 
1656 |     <DataTemplate x:Key="MainMenuTemplate">
1657 | 
1658 |         <Border Style="{StaticResource SideMenuStyle}">
1659 | 
1660 |             <Grid>
1661 | 
1662 |                 <Button Command="{Binding CloseMenuCommand}"
1663 |                         Style="{StaticResource CloseMenuButton}" />
1664 | 
1665 |                 <StackPanel Style="{StaticResource MenuStackPanelStyle}">
1666 | 
1667 |                     <Button Style="{StaticResource MenuButton1Style}" />
1668 |                     <Button Style="{StaticResource MenuButton2Style}" />
1669 |                     <Button Style="{StaticResource MenuButton3Style}" />
1670 |                     <Button Style="{StaticResource MenuButton4Style}" />
1671 |                     <Button Style="{StaticResource MenuButton5Style}" />
1672 | 
1673 |                 </StackPanel>
1674 | 
1675 |                 <TextBlock Text="D E S I G N   T H E   I N T E R F A C E"
1676 |                            FontFamily="Fonts/#Saira SemiBold"
1677 |                            FontSize="10"
1678 |                            VerticalAlignment="Bottom"
1679 |                            HorizontalAlignment="Center"
1680 |                            Foreground="#959FAC"
1681 |                            Margin="0,0,10,10" />
1682 | 
1683 |             </Grid>
1684 | 
1685 |         </Border>
1686 | 
1687 |     </DataTemplate>
1688 | 
1689 |     <DataTemplate x:Key="MenuTemplate">
1690 | 
1691 |         <Border Background="#282D33"
1692 |                 CornerRadius="12"
1693 |                 HorizontalAlignment="Stretch"
1694 |                 VerticalAlignment="Stretch">
1695 | 
1696 |             <ContentControl Content="{Binding}"
1697 |                             Width="230"
1698 |                             HorizontalAlignment="Left">
1699 | 
1700 |                 <ContentControl.Style>
1701 | 
1702 |                     <Style TargetType="ContentControl">
1703 | 
1704 |                         <Setter Property="ContentTemplate"
1705 |                                 Value="{StaticResource MainMenuTemplate}" />
1706 | 
1707 |                     </Style>
1708 | 
1709 |                 </ContentControl.Style>
1710 | 
1711 |             </ContentControl>
1712 | 
1713 |         </Border>
1714 | 
1715 |     </DataTemplate>
1716 |     
1717 |     <!--#endregion-->
1718 | 
1719 |     <ImageBrush x:Key="close_app_def"
1720 |                 ImageSource="Assets/shutdown_def.png"
1721 |                 Stretch="None" />
1722 | 
1723 |     <ImageBrush x:Key="close_app_mo"
1724 |                 ImageSource="Assets/shutdown_mo.png"
1725 |                 Stretch="None" />
1726 | 
1727 |     <Style x:Key="CloseAppStyle"
1728 |            TargetType="{x:Type Button}">
1729 | 
1730 |         <Setter Property="Height"
1731 |                 Value="40" />
1732 |         <Setter Property="Width"
1733 |                 Value="40" />
1734 |         <Setter Property="HorizontalAlignment"
1735 |                 Value="Right" />
1736 |         <Setter Property="VerticalAlignment"
1737 |                 Value="Top" />
1738 |         <Setter Property="Margin"
1739 |                 Value="0,15,15,0" />
1740 | 
1741 |         <Setter Property="Template">
1742 | 
1743 |             <Setter.Value>
1744 | 
1745 |                 <ControlTemplate TargetType="{x:Type Button}">
1746 | 
1747 |                     <Border x:Name="border"
1748 |                             BorderThickness="0"
1749 |                             Background="{StaticResource close_app_def}">
1750 | 
1751 |                     </Border>
1752 | 
1753 |                     <ControlTemplate.Triggers>
1754 | 
1755 |                         <Trigger Property="IsMouseOver"
1756 |                                  Value="True">
1757 | 
1758 |                             <Setter Property="Background"
1759 |                                     TargetName="border"
1760 |                                     Value="{StaticResource close_app_mo}" />
1761 | 
1762 |                         </Trigger>
1763 | 
1764 |                         <Trigger Property="IsPressed"
1765 |                                  Value="True">
1766 | 
1767 |                             <Setter Property="Background"
1768 |                                     TargetName="border"
1769 |                                     Value="{StaticResource close_app_mo}" />
1770 | 
1771 |                         </Trigger>
1772 | 
1773 |                     </ControlTemplate.Triggers>
1774 | 
1775 |                 </ControlTemplate>
1776 | 
1777 |             </Setter.Value>
1778 | 
1779 |         </Setter>
1780 | 
1781 |     </Style>
1782 | 
1783 | 
1784 |     <ImageBrush x:Key="max_app_def"
1785 |                 ImageSource="Assets/max_def.png"
1786 |                 Stretch="None" />
1787 | 
1788 |     <ImageBrush x:Key="max_app_mo"
1789 |                 ImageSource="Assets/max_mo.png"
1790 |                 Stretch="None" />
1791 | 
1792 |     <Style x:Key="MaxAppStyle"
1793 |            TargetType="{x:Type Button}">
1794 | 
1795 |         <Setter Property="Height"
1796 |                 Value="40" />
1797 |         <Setter Property="Width"
1798 |                 Value="40" />
1799 |         <Setter Property="HorizontalAlignment"
1800 |                 Value="Right" />
1801 |         <Setter Property="VerticalAlignment"
1802 |                 Value="Top" />
1803 |         <Setter Property="Margin"
1804 |                 Value="0,8,50,0" />
1805 | 
1806 |         <Setter Property="Template">
1807 | 
1808 |             <Setter.Value>
1809 | 
1810 |                 <ControlTemplate TargetType="{x:Type Button}">
1811 | 
1812 |                     <Border x:Name="border"
1813 |                             BorderThickness="0"
1814 |                             Background="{StaticResource max_app_def}">
1815 | 
1816 |                     </Border>
1817 | 
1818 |                     <ControlTemplate.Triggers>
1819 | 
1820 |                         <Trigger Property="IsMouseOver"
1821 |                                  Value="True">
1822 | 
1823 |                             <Setter Property="Background"
1824 |                                     TargetName="border"
1825 |                                     Value="{StaticResource max_app_mo}" />
1826 | 
1827 |                         </Trigger>
1828 | 
1829 |                         <Trigger Property="IsPressed"
1830 |                                  Value="True">
1831 | 
1832 |                             <Setter Property="Background"
1833 |                                     TargetName="border"
1834 |                                     Value="{StaticResource max_app_mo}" />
1835 | 
1836 |                         </Trigger>
1837 | 
1838 |                     </ControlTemplate.Triggers>
1839 | 
1840 |                 </ControlTemplate>
1841 | 
1842 |             </Setter.Value>
1843 | 
1844 |         </Setter>
1845 | 
1846 |     </Style>
1847 | 
1848 | 
1849 |     <ControlTemplate x:Key="Card_1">
1850 | 
1851 |         <Border Style="{StaticResource C101Style}">
1852 | 
1853 |             <Grid>
1854 | 
1855 |                 <Grid.ColumnDefinitions>
1856 |                     <ColumnDefinition Width="1.8*" />
1857 |                     <ColumnDefinition Width="1*" />
1858 |                 </Grid.ColumnDefinitions>
1859 | 
1860 |                 <Grid.RowDefinitions>
1861 |                     <RowDefinition Height="*" />
1862 |                 </Grid.RowDefinitions>
1863 | 
1864 |                 <Border Grid.Column="0"
1865 |                         Style="{StaticResource C102Style}">
1866 | 
1867 |                     <TextBlock x:Name="txt1"
1868 |                                Style="{StaticResource C103Style}" />
1869 |                 </Border>
1870 | 
1871 |                 <TextBlock Grid.Row="0"
1872 |                            Grid.Column="0"
1873 |                            x:Name="txt2"
1874 |                            Style="{StaticResource C104Style}" />
1875 | 
1876 |                 <Image Grid.Row="0"
1877 |                        Grid.Column="1"
1878 |                        Style="{StaticResource C105Style}" />
1879 | 
1880 |             </Grid>
1881 | 
1882 |         </Border>
1883 | 
1884 | 
1885 |     </ControlTemplate>
1886 | 
1887 |     <ControlTemplate x:Key="Card_1_Desktop">
1888 | 
1889 |         <Border Style="{StaticResource C101Style}">
1890 | 
1891 |             <Grid>
1892 | 
1893 |                 <Grid.ColumnDefinitions>
1894 |                     <ColumnDefinition Width="1.8*" />
1895 |                     <ColumnDefinition Width="1*" />
1896 |                 </Grid.ColumnDefinitions>
1897 | 
1898 |                 <Grid.RowDefinitions>
1899 |                     <RowDefinition Height="*" />
1900 |                 </Grid.RowDefinitions>
1901 | 
1902 | 
1903 |                 <Border Grid.Column="0"
1904 |                         Style="{StaticResource C102Style_Desktop}">
1905 | 
1906 | 
1907 |                     <TextBlock x:Name="txt1"
1908 |                                Style="{StaticResource C103Style_Desktop}" />
1909 |                 </Border>
1910 | 
1911 | 
1912 |                 <TextBlock Grid.Row="0"
1913 |                            Grid.Column="0"
1914 |                            x:Name="txt2"
1915 |                            Style="{StaticResource C104Style_Desktop}" />
1916 | 
1917 |                 <Image Grid.Row="0"
1918 |                        Grid.Column="1"
1919 |                        Style="{StaticResource C105Style}" />
1920 | 
1921 |             </Grid>
1922 | 
1923 | 
1924 |         </Border>
1925 | 
1926 | 
1927 |     </ControlTemplate>
1928 | 
1929 |     <ControlTemplate x:Key="Card_2">
1930 | 
1931 |         <Border Grid.Row="0"
1932 |                 Grid.Column="1"
1933 |                 Style="{StaticResource C201Style}">
1934 | 
1935 |             <Grid>
1936 | 
1937 |                 <Grid.ColumnDefinitions>
1938 | 
1939 |                     <ColumnDefinition Width="1.8*" />
1940 |                     <ColumnDefinition Width="1*" />
1941 | 
1942 |                 </Grid.ColumnDefinitions>
1943 | 
1944 |                 <Grid.RowDefinitions>
1945 |                     <RowDefinition Height="*" />
1946 |                 </Grid.RowDefinitions>
1947 | 
1948 |                 <Border Grid.Column="0"
1949 |                         Style="{StaticResource C202Style}">
1950 |                     <TextBlock x:Name="sales"
1951 |                                Style="{StaticResource C203Style}" />
1952 |                 </Border>
1953 | 
1954 |                 <TextBlock Grid.Column="0"
1955 |                            x:Name="salecount"
1956 |                            Style="{StaticResource C204Style}" />
1957 | 
1958 |                 <Image Grid.Column="1"
1959 |                        Style="{StaticResource C205Style}" />
1960 | 
1961 |             </Grid>
1962 | 
1963 |         </Border>
1964 | 
1965 |     </ControlTemplate>
1966 | 
1967 |     <ControlTemplate x:Key="Card_2_Desktop">
1968 | 
1969 |         <Border Grid.Row="0"
1970 |                 Grid.Column="1"
1971 |                 Style="{StaticResource C201Style}">
1972 | 
1973 |             <Grid>
1974 | 
1975 |                 <Grid.ColumnDefinitions>
1976 | 
1977 |                     <ColumnDefinition Width="1.8*" />
1978 |                     <ColumnDefinition Width="1*" />
1979 | 
1980 |                 </Grid.ColumnDefinitions>
1981 | 
1982 |                 <Grid.RowDefinitions>
1983 |                     <RowDefinition Height="*" />
1984 |                 </Grid.RowDefinitions>
1985 | 
1986 |                 <Border Grid.Column="0"
1987 |                         Style="{StaticResource C202Style_Desktop}">
1988 |                     <TextBlock x:Name="sales"
1989 |                                Style="{StaticResource C203Style_Desktop}" />
1990 |                 </Border>
1991 | 
1992 |                 <TextBlock Grid.Column="0"
1993 |                            x:Name="salecount"
1994 |                            Style="{StaticResource C204Style_Desktop}" />
1995 | 
1996 |                 <Image Grid.Column="1"
1997 |                        Style="{StaticResource C205Style}" />
1998 | 
1999 |             </Grid>
2000 | 
2001 |         </Border>
2002 | 
2003 |     </ControlTemplate>
2004 | 
2005 |     <ControlTemplate x:Key="Card_3_Desktop">
2006 | 
2007 |         <Border Grid.Row="0"
2008 |                 Grid.Column="1"
2009 |                 Style="{StaticResource Card301Style}">
2010 | 
2011 |             <Grid>
2012 | 
2013 |                 <Grid.ColumnDefinitions>
2014 | 
2015 |                     <ColumnDefinition Width="1.8*" />
2016 |                     <ColumnDefinition Width="1*" />
2017 | 
2018 |                 </Grid.ColumnDefinitions>
2019 | 
2020 |                 <Grid.RowDefinitions>
2021 |                     <RowDefinition Height="*" />
2022 |                 </Grid.RowDefinitions>
2023 | 
2024 |                 <Border Grid.Column="0"
2025 |                         Style="{StaticResource C302Style_Desktop}">
2026 |                     <TextBlock x:Name="sales"
2027 |                                Style="{StaticResource C303Style_Desktop}" />
2028 |                 </Border>
2029 | 
2030 |                 <TextBlock Grid.Column="0"
2031 |                            x:Name="salecount"
2032 |                            Style="{StaticResource C304Style_Desktop}" />
2033 | 
2034 |                 <Image Grid.Column="1"
2035 |                        Style="{StaticResource C305Style}" />
2036 | 
2037 |             </Grid>
2038 | 
2039 |         </Border>
2040 | 
2041 |     </ControlTemplate>
2042 | 
2043 |     <ControlTemplate x:Key="Card_4_Desktop">
2044 | 
2045 |         <Border Grid.Row="0"
2046 |                 Grid.Column="1"
2047 |                 Style="{StaticResource Card301Style}">
2048 | 
2049 |             <Grid>
2050 | 
2051 |                 <Grid.ColumnDefinitions>
2052 | 
2053 |                     <ColumnDefinition Width="1.8*" />
2054 |                     <ColumnDefinition Width="1*" />
2055 | 
2056 |                 </Grid.ColumnDefinitions>
2057 | 
2058 |                 <Grid.RowDefinitions>
2059 |                     <RowDefinition Height="*" />
2060 |                 </Grid.RowDefinitions>
2061 | 
2062 |                 <Border Grid.Column="0"
2063 |                         Style="{StaticResource C402Style_Desktop}">
2064 |                     <TextBlock x:Name="sales"
2065 |                                Style="{StaticResource C403Style_Desktop}" />
2066 |                 </Border>
2067 | 
2068 |                 <TextBlock Grid.Column="0"
2069 |                            x:Name="salecount"
2070 |                            Style="{StaticResource C404Style_Desktop}" />
2071 | 
2072 |                 <Image Grid.Column="1"
2073 |                        Style="{StaticResource C405Style}" />
2074 | 
2075 |             </Grid>
2076 | 
2077 |         </Border>
2078 | 
2079 |     </ControlTemplate>
2080 | 
2081 |     <ControlTemplate x:Key="Card_3">
2082 | 
2083 |         <Border Grid.Row="0"
2084 |                 Grid.Column="2"
2085 |                 Style="{StaticResource Card301Style}">
2086 | 
2087 |             <Grid>
2088 | 
2089 |                 <Grid.ColumnDefinitions>
2090 |                     <ColumnDefinition Width="1.8*" />
2091 |                     <ColumnDefinition Width="1*" />
2092 |                 </Grid.ColumnDefinitions>
2093 | 
2094 |                 <Grid.RowDefinitions>
2095 |                     <RowDefinition Height="*" />
2096 |                 </Grid.RowDefinitions>
2097 | 
2098 |                 <Border Grid.Column="0"
2099 |                         Style="{StaticResource C302Style}">
2100 |                     <TextBlock Style="{StaticResource Card302Style}" />
2101 |                 </Border>
2102 | 
2103 |                 <TextBlock Grid.Row="0"
2104 |                            Grid.Column="0"
2105 |                            x:Name="prdcount"
2106 |                            Style="{StaticResource Card303Style}" />
2107 | 
2108 |                 <Image Grid.Row="0"
2109 |                        Grid.Column="1"
2110 |                        Style="{StaticResource Card304Style}" />
2111 | 
2112 |             </Grid>
2113 | 
2114 |         </Border>
2115 | 
2116 |     </ControlTemplate>
2117 | 
2118 |     <ControlTemplate x:Key="Card_4">
2119 | 
2120 |         <Border Grid.Row="0"
2121 |                 Grid.Column="3"
2122 |                 Style="{StaticResource Card401Style}">
2123 | 
2124 |             <Grid>
2125 | 
2126 |                 <Grid.ColumnDefinitions>
2127 |                     <ColumnDefinition Width="1.8*" />
2128 |                     <ColumnDefinition Width="1*" />
2129 |                 </Grid.ColumnDefinitions>
2130 | 
2131 |                 <Grid.RowDefinitions>
2132 |                     <RowDefinition Height="*" />
2133 |                 </Grid.RowDefinitions>
2134 | 
2135 |                 <Border Grid.Column="0"
2136 |                         Style="{StaticResource C402Style}">
2137 |                     <TextBlock x:Name="customer"
2138 |                                Grid.Row="0"
2139 |                                Grid.Column="0"
2140 |                                Style="{StaticResource Card402Style}" />
2141 |                 </Border>
2142 | 
2143 |                 <TextBlock Grid.Row="0"
2144 |                            Grid.Column="0"
2145 |                            x:Name="custcount"
2146 |                            Style="{StaticResource Card403Style}" />
2147 | 
2148 |                 <Image Grid.Row="0"
2149 |                        Grid.Column="1"
2150 |                        Style="{StaticResource Card404Style}" />
2151 |             </Grid>
2152 | 
2153 |         </Border>
2154 | 
2155 |     </ControlTemplate>
2156 | 
2157 |     <ControlTemplate x:Key="Card_5">
2158 | 
2159 |         <Border  Style="{StaticResource C5Style}">
2160 | 
2161 |             <Grid>
2162 | 
2163 |                 <Grid.ColumnDefinitions>
2164 | 
2165 |                     <ColumnDefinition Width="2*" />
2166 |                     <ColumnDefinition x:Name="ResponsiveImageColumn"
2167 |                                       Width="1*" />
2168 | 
2169 |                 </Grid.ColumnDefinitions>
2170 | 
2171 |                 <Grid.RowDefinitions>
2172 |                     <RowDefinition x:Name="Responsive_Image"
2173 |                                    Height="0*" />
2174 |                     <RowDefinition x:Name="title"
2175 |                                    Height="1.5*" />
2176 |                     <RowDefinition x:Name="body"
2177 |                                    Height="1*" />
2178 |                     <RowDefinition x:Name="button"
2179 |                                    Height="1*" />
2180 | 
2181 |                 </Grid.RowDefinitions>
2182 | 
2183 |                 <WrapPanel Name="TitleWrap"
2184 |                            Grid.Row="1"
2185 |                            Grid.Column="0"
2186 |                            Style="{StaticResource C501Style}">
2187 | 
2188 |                     <TextBlock x:Name="TitleText"
2189 |                                Style="{StaticResource C502Style}" />
2190 | 
2191 |                 </WrapPanel>
2192 | 
2193 |                 <WrapPanel x:Name="ContentWrap"
2194 |                            Grid.Row="2"
2195 |                            Grid.Column="0"
2196 |                            Style="{StaticResource C503Style}">
2197 | 
2198 |                     <TextBlock x:Name="ContentText"
2199 |                                Style="{StaticResource C504Style}" />
2200 | 
2201 |                 </WrapPanel>
2202 | 
2203 |                 <Viewbox  Grid.Column="1"
2204 |                           Grid.Row="0"
2205 |                           Grid.RowSpan="4">
2206 |                     <Image Source="Assets/Devices_Image.png"
2207 |                            Stretch="None"
2208 |                            Margin="50" />
2209 |                 </Viewbox>
2210 | 
2211 |                 <Button Grid.Row="3">
2212 | 
2213 |                     <Button.Style>
2214 | 
2215 |                         <Style TargetType="{x:Type Button}">
2216 | 
2217 |                             <Setter Property="Height"
2218 |                                     Value="40" />
2219 |                             <Setter Property="Background"
2220 |                                     Value="#FFDD00" />
2221 |                             <Setter Property="Width"
2222 |                                     Value="120" />
2223 |                             <Setter Property="HorizontalAlignment"
2224 |                                     Value="Left" />
2225 |                             <Setter Property="VerticalAlignment"
2226 |                                     Value="Top" />
2227 |                             <Setter Property="Margin"
2228 |                                     Value="40,10,0,0" />
2229 | 
2230 | 
2231 |                             <Setter Property="Template">
2232 | 
2233 |                                 <Setter.Value>
2234 | 
2235 |                                     <ControlTemplate TargetType="{x:Type Button}">
2236 | 
2237 |                                         <Border x:Name="border"
2238 |                                                 BorderThickness="0"
2239 |                                                 Background="#FFDD00"
2240 |                                                 CornerRadius="20">
2241 | 
2242 |                                             <TextBlock x:Name="BtnText"
2243 |                                                        Text="GET STARTED"
2244 |                                                        Foreground="#292F34"
2245 |                                                        FontSize="12"
2246 |                                                        VerticalAlignment="Center"
2247 |                                                        HorizontalAlignment="Center"
2248 |                                                        FontFamily="Fonts/#Open Sans SemiBold" />
2249 | 
2250 |                                         </Border>
2251 | 
2252 |                                         <ControlTemplate.Triggers>
2253 | 
2254 |                                             <Trigger Property="IsMouseOver"
2255 |                                                      Value="True">
2256 | 
2257 |                                                 <Setter Property="Background"
2258 |                                                         TargetName="border"
2259 |                                                         Value="#292F34" />
2260 | 
2261 |                                                 <Setter Property="Foreground"
2262 |                                                         TargetName="BtnText"
2263 |                                                         Value="#FFFFFF" />
2264 | 
2265 | 
2266 |                                             </Trigger>
2267 | 
2268 |                                             <Trigger Property="IsPressed"
2269 |                                                      Value="True">
2270 | 
2271 |                                                 <Setter Property="Background"
2272 |                                                         TargetName="border"
2273 |                                                         Value="#FFDD00" />
2274 | 
2275 |                                                 <Setter Property="Foreground"
2276 |                                                         TargetName="BtnText"
2277 |                                                         Value="#292F34" />
2278 | 
2279 |                                             </Trigger>
2280 | 
2281 |                                         </ControlTemplate.Triggers>
2282 | 
2283 |                                     </ControlTemplate>
2284 | 
2285 |                                 </Setter.Value>
2286 | 
2287 |                             </Setter>
2288 | 
2289 |                         </Style>
2290 | 
2291 |                     </Button.Style>
2292 | 
2293 |                 </Button>
2294 | 
2295 |             </Grid>
2296 | 
2297 |         </Border>
2298 | 
2299 |     </ControlTemplate>
2300 | 
2301 |     <ControlTemplate x:Key="Card_5_Desktop">
2302 | 
2303 |         <Border  Style="{StaticResource C5Style_Desktop}">
2304 | 
2305 |             <Grid>
2306 | 
2307 |                 <Grid.ColumnDefinitions>
2308 | 
2309 |                     <ColumnDefinition Width="2*" />
2310 |                     <ColumnDefinition x:Name="ResponsiveImageColumn"
2311 |                                       Width="1*" />
2312 | 
2313 |                 </Grid.ColumnDefinitions>
2314 | 
2315 |                 <Grid.RowDefinitions>
2316 |                     <RowDefinition x:Name="Responsive_Image"
2317 |                                    Height="0*" />
2318 |                     <RowDefinition x:Name="title"
2319 |                                    Height="1.5*" />
2320 |                     <RowDefinition x:Name="body"
2321 |                                    Height="1*" />
2322 |                     <RowDefinition x:Name="button"
2323 |                                    Height="1*" />
2324 | 
2325 |                 </Grid.RowDefinitions>
2326 | 
2327 |                 <WrapPanel Name="TitleWrap"
2328 |                            Grid.Row="1"
2329 |                            Grid.Column="0"
2330 |                            Style="{StaticResource C501Style}">
2331 | 
2332 |                     <TextBlock x:Name="TitleText"
2333 |                                Style="{StaticResource C502Style_Desktop}" />
2334 | 
2335 |                 </WrapPanel>
2336 | 
2337 |                 <WrapPanel x:Name="ContentWrap"
2338 |                            Grid.Row="2"
2339 |                            Grid.Column="0"
2340 |                            Style="{StaticResource C503Style_Desktop}">
2341 | 
2342 |                     <TextBlock x:Name="ContentText"
2343 |                                Style="{StaticResource C504Style_Desktop}" />
2344 | 
2345 |                 </WrapPanel>
2346 | 
2347 |                 <Viewbox  Grid.Column="1"
2348 |                           Grid.Row="0"
2349 |                           Grid.RowSpan="4">
2350 |                     <Image Source="Assets/Devices_Image.png"
2351 |                            Stretch="None"
2352 |                            Margin="50" />
2353 |                 </Viewbox>
2354 | 
2355 |                 <Button Grid.Row="3">
2356 | 
2357 |                     <Button.Style>
2358 | 
2359 |                         <Style TargetType="{x:Type Button}">
2360 | 
2361 |                             <Setter Property="Height"
2362 |                                     Value="50" />
2363 |                             <Setter Property="Background"
2364 |                                     Value="#FFDD00" />
2365 |                             <Setter Property="Width"
2366 |                                     Value="150" />
2367 |                             <Setter Property="HorizontalAlignment"
2368 |                                     Value="Left" />
2369 |                             <Setter Property="VerticalAlignment"
2370 |                                     Value="Top" />
2371 |                             <Setter Property="Margin"
2372 |                                     Value="60,10,0,0" />
2373 | 
2374 | 
2375 |                             <Setter Property="Template">
2376 | 
2377 |                                 <Setter.Value>
2378 | 
2379 |                                     <ControlTemplate TargetType="{x:Type Button}">
2380 | 
2381 |                                         <Border x:Name="border"
2382 |                                                 BorderThickness="0"
2383 |                                                 Background="#FFDD00"
2384 |                                                 CornerRadius="25">
2385 | 
2386 |                                             <TextBlock x:Name="BtnText"
2387 |                                                        Text="GET STARTED"
2388 |                                                        Foreground="#292F34"
2389 |                                                        FontSize="14"
2390 |                                                        VerticalAlignment="Center"
2391 |                                                        HorizontalAlignment="Center"
2392 |                                                        FontFamily="Fonts/#Open Sans SemiBold" />
2393 | 
2394 |                                         </Border>
2395 | 
2396 |                                         <ControlTemplate.Triggers>
2397 | 
2398 |                                             <Trigger Property="IsMouseOver"
2399 |                                                      Value="True">
2400 | 
2401 |                                                 <Setter Property="Background"
2402 |                                                         TargetName="border"
2403 |                                                         Value="#292F34" />
2404 | 
2405 |                                                 <Setter Property="Foreground"
2406 |                                                         TargetName="BtnText"
2407 |                                                         Value="#FFFFFF" />
2408 | 
2409 | 
2410 |                                             </Trigger>
2411 | 
2412 |                                             <Trigger Property="IsPressed"
2413 |                                                      Value="True">
2414 | 
2415 |                                                 <Setter Property="Background"
2416 |                                                         TargetName="border"
2417 |                                                         Value="#FFDD00" />
2418 | 
2419 |                                                 <Setter Property="Foreground"
2420 |                                                         TargetName="BtnText"
2421 |                                                         Value="#292F34" />
2422 | 
2423 | 
2424 |                                             </Trigger>
2425 | 
2426 |                                         </ControlTemplate.Triggers>
2427 | 
2428 |                                     </ControlTemplate>
2429 | 
2430 |                                 </Setter.Value>
2431 | 
2432 |                             </Setter>
2433 | 
2434 |                         </Style>
2435 | 
2436 |                     </Button.Style>
2437 | 
2438 |                 </Button>
2439 | 
2440 |             </Grid>
2441 | 
2442 |         </Border>
2443 | 
2444 | 
2445 |     </ControlTemplate>
2446 | 
2447 |     <ControlTemplate x:Key="Card_5_Mobile">
2448 | 
2449 |         <Border Height="480"
2450 |                 Style="{StaticResource C5Style}">
2451 | 
2452 |             <Grid>
2453 | 
2454 |                 <Grid.ColumnDefinitions>
2455 | 
2456 |                     <ColumnDefinition Width="2*" />
2457 | 
2458 |                 </Grid.ColumnDefinitions>
2459 | 
2460 |                 <Grid.RowDefinitions>
2461 |                     <RowDefinition x:Name="Responsive_Image"
2462 |                                    Height="180" />
2463 |                     <RowDefinition x:Name="title"
2464 |                                    Height="120" />
2465 |                     <RowDefinition x:Name="body"
2466 |                                    Height="110" />
2467 |                     <RowDefinition x:Name="button"
2468 |                                    Height="60" />
2469 | 
2470 |                 </Grid.RowDefinitions>
2471 | 
2472 |                 <WrapPanel Name="TitleWrap"
2473 |                            Grid.Row="1"
2474 |                            Grid.Column="0"
2475 |                            Style="{StaticResource C501Style_Mobile}">
2476 | 
2477 |                     <TextBlock x:Name="TitleText"
2478 |                                Style="{StaticResource C502Style_Mobile}" />
2479 | 
2480 |                 </WrapPanel>
2481 | 
2482 |                 <WrapPanel x:Name="ContentWrap"
2483 |                            Grid.Row="2"
2484 |                            Grid.Column="0"
2485 |                            Style="{StaticResource C503Style_Mobile}">
2486 | 
2487 |                     <TextBlock x:Name="ContentText"
2488 |                                Style="{StaticResource C504Style_Mobile}" />
2489 | 
2490 |                 </WrapPanel>
2491 | 
2492 |                 <Viewbox  Grid.Column="0"
2493 |                           Grid.Row="0">
2494 |                     <Image Source="Assets/Devices_Image.png"
2495 |                            Stretch="None"
2496 |                            Margin="10,50,10,0" />
2497 |                 </Viewbox>
2498 | 
2499 |                 <Button Grid.Row="3">
2500 | 
2501 |                     <Button.Style>
2502 | 
2503 |                         <Style TargetType="{x:Type Button}">
2504 | 
2505 |                             <Setter Property="Height"
2506 |                                     Value="40" />
2507 |                             <Setter Property="Background"
2508 |                                     Value="#FFDD00" />
2509 |                             <Setter Property="Width"
2510 |                                     Value="120" />
2511 |                             <Setter Property="HorizontalAlignment"
2512 |                                     Value="Center" />
2513 |                             <Setter Property="VerticalAlignment"
2514 |                                     Value="Top" />
2515 |                             <Setter Property="Margin"
2516 |                                     Value="0,0,0,10" />
2517 | 
2518 | 
2519 |                             <Setter Property="Template">
2520 | 
2521 |                                 <Setter.Value>
2522 | 
2523 |                                     <ControlTemplate TargetType="{x:Type Button}">
2524 | 
2525 |                                         <Border x:Name="border"
2526 |                                                 BorderThickness="0"
2527 |                                                 Background="#FFDD00"
2528 |                                                 CornerRadius="20">
2529 | 
2530 |                                             <TextBlock x:Name="BtnText"
2531 |                                                        Text="GET STARTED"
2532 |                                                        Foreground="#292F34"
2533 |                                                        FontSize="12"
2534 |                                                        VerticalAlignment="Center"
2535 |                                                        HorizontalAlignment="Center"
2536 |                                                        FontFamily="Fonts/#Open Sans SemiBold" />
2537 | 
2538 |                                         </Border>
2539 | 
2540 |                                         <ControlTemplate.Triggers>
2541 | 
2542 |                                             <Trigger Property="IsMouseOver"
2543 |                                                      Value="True">
2544 | 
2545 |                                                 <Setter Property="Background"
2546 |                                                         TargetName="border"
2547 |                                                         Value="#292F34" />
2548 | 
2549 |                                                 <Setter Property="Foreground"
2550 |                                                         TargetName="BtnText"
2551 |                                                         Value="#FFFFFF" />
2552 | 
2553 |                                             </Trigger>
2554 | 
2555 |                                             <Trigger Property="IsPressed"
2556 |                                                      Value="True">
2557 | 
2558 |                                                 <Setter Property="Background"
2559 |                                                         TargetName="border"
2560 |                                                         Value="#FFDD00" />
2561 | 
2562 |                                                 <Setter Property="Foreground"
2563 |                                                         TargetName="BtnText"
2564 |                                                         Value="#292F34" />
2565 | 
2566 |                                             </Trigger>
2567 | 
2568 |                                         </ControlTemplate.Triggers>
2569 | 
2570 |                                     </ControlTemplate>
2571 | 
2572 |                                 </Setter.Value>
2573 | 
2574 |                             </Setter>
2575 | 
2576 |                         </Style>
2577 | 
2578 |                     </Button.Style>
2579 | 
2580 |                 </Button>
2581 | 
2582 |             </Grid>
2583 | 
2584 |         </Border>
2585 | 
2586 | 
2587 |     </ControlTemplate>
2588 | 
2589 |     <ControlTemplate x:Key="Card_6">
2590 | 
2591 |         <Border Grid.Row="3"
2592 |                 Grid.Column="0"
2593 |                 Grid.ColumnSpan="4"
2594 |                 Style="{StaticResource C6Style}">
2595 | 
2596 |             <Grid x:Name="statgrid">
2597 | 
2598 |                 <Grid.ColumnDefinitions>
2599 |                     <ColumnDefinition x:Name="cOne"
2600 |                                       Width="1*" />
2601 |                     <ColumnDefinition x:Name="cTwo"
2602 |                                       Width="1*" />
2603 |                     <ColumnDefinition x:Name="cThree"
2604 |                                       Width="1*" />
2605 |                 </Grid.ColumnDefinitions>
2606 | 
2607 |                 <Grid.RowDefinitions>
2608 |                     <RowDefinition x:Name="rowOne"
2609 |                                    Height="*" />
2610 |                     <RowDefinition x:Name="rowTwo"
2611 |                                    Height="0*" />
2612 |                     <RowDefinition x:Name="rowThree"
2613 |                                    Height="0*" />
2614 |                 </Grid.RowDefinitions>
2615 | 
2616 |                 <Border x:Name="stat"
2617 |                         Grid.Row="0"
2618 |                         Grid.Column="0"
2619 |                         Style="{StaticResource StatisticsStyle}">
2620 | 
2621 |                     <Grid>
2622 | 
2623 |                         <Image Style="{StaticResource Stat01Style}" />
2624 |                         <TextBlock Style="{StaticResource Stat02Style}" />
2625 | 
2626 |                     </Grid>
2627 | 
2628 |                 </Border>
2629 | 
2630 |                 <Border x:Name="rpt"
2631 |                         Grid.Row="0"
2632 |                         Grid.Column="1"
2633 |                         Style="{StaticResource ReportStyle}">
2634 | 
2635 |                     <Grid>
2636 | 
2637 |                         <Image Style="{StaticResource Rep01Style}" />
2638 |                         <TextBlock Style="{StaticResource Rep02Style}" />
2639 | 
2640 |                     </Grid>
2641 | 
2642 |                 </Border>
2643 | 
2644 |                 <Border x:Name="caldr"
2645 |                         Grid.Row="0"
2646 |                         Grid.Column="2"
2647 |                         Style="{StaticResource CalendarStyle}">
2648 | 
2649 |                     <Grid>
2650 | 
2651 |                         <Image Style="{StaticResource Cal01Style}" />
2652 |                         <TextBlock Style="{StaticResource Cal02Style}" />
2653 | 
2654 |                     </Grid>
2655 |                 </Border>
2656 | 
2657 |             </Grid>
2658 | 
2659 |         </Border>
2660 | 
2661 |     </ControlTemplate>
2662 | 
2663 |     <ControlTemplate x:Key="Card_6_Mobile">
2664 | 
2665 |         <Border Height="295"
2666 |                 Style="{StaticResource C6Style}">
2667 | 
2668 |             <Grid x:Name="statgrid">
2669 | 
2670 |                 <Grid.ColumnDefinitions>
2671 |                     <ColumnDefinition x:Name="cOne"
2672 |                                       Width="*" />
2673 |                 </Grid.ColumnDefinitions>
2674 | 
2675 |                 <Grid.RowDefinitions>
2676 |                     <RowDefinition x:Name="rowOne"
2677 |                                    Height="*" />
2678 |                     <RowDefinition x:Name="rowTwo"
2679 |                                    Height="*" />
2680 |                     <RowDefinition x:Name="rowThree"
2681 |                                    Height="*" />
2682 |                 </Grid.RowDefinitions>
2683 | 
2684 |                 <Border x:Name="stat"
2685 |                         Grid.Row="0"
2686 |                         Style="{StaticResource StatisticsStyle_Mobile}">
2687 | 
2688 |                     <Grid>
2689 | 
2690 |                         <Image Style="{StaticResource Stat01Style}" />
2691 |                         <TextBlock Style="{StaticResource Stat02Style}" />
2692 | 
2693 |                     </Grid>
2694 | 
2695 |                 </Border>
2696 | 
2697 |                 <Border x:Name="rpt"
2698 |                         Grid.Row="1"
2699 |                         Style="{StaticResource ReportStyle_Mobile}">
2700 | 
2701 |                     <Grid>
2702 | 
2703 |                         <Image Style="{StaticResource Rep01Style}" />
2704 |                         <TextBlock Style="{StaticResource Rep02Style}" />
2705 | 
2706 |                     </Grid>
2707 | 
2708 |                 </Border>
2709 | 
2710 |                 <Border x:Name="caldr"
2711 |                         Grid.Row="2"
2712 |                         Style="{StaticResource CalendarStyle_Mobile}">
2713 | 
2714 |                     <Grid>
2715 | 
2716 |                         <Image Style="{StaticResource Cal01Style}" />
2717 |                         <TextBlock Style="{StaticResource Cal02Style}" />
2718 | 
2719 |                     </Grid>
2720 |                 </Border>
2721 | 
2722 |             </Grid>
2723 | 
2724 |         </Border>
2725 | 
2726 |     </ControlTemplate>
2727 | 
2728 |     <ControlTemplate x:Key="Card_6_Desktop">
2729 | 
2730 |         <Border Height="295"
2731 |                 VerticalAlignment="Top"
2732 |                 Style="{StaticResource C6Style}">
2733 | 
2734 |             <Grid x:Name="statgrid">
2735 | 
2736 |                 <Grid.ColumnDefinitions>
2737 |                     <ColumnDefinition x:Name="cOne"
2738 |                                       Width="*" />
2739 |                 </Grid.ColumnDefinitions>
2740 | 
2741 |                 <Grid.RowDefinitions>
2742 |                     <RowDefinition x:Name="rowOne"
2743 |                                    Height="*" />
2744 |                     <RowDefinition x:Name="rowTwo"
2745 |                                    Height="*" />
2746 |                     <RowDefinition x:Name="rowThree"
2747 |                                    Height="*" />
2748 |                 </Grid.RowDefinitions>
2749 | 
2750 |                 <Border x:Name="stat"
2751 |                         Grid.Row="0"
2752 |                         Style="{StaticResource StatisticsStyle_Mobile}">
2753 | 
2754 |                     <Grid>
2755 | 
2756 |                         <Image Style="{StaticResource Stat01Style}" />
2757 |                         <TextBlock Style="{StaticResource Stat02Style}" />
2758 | 
2759 |                     </Grid>
2760 | 
2761 |                 </Border>
2762 | 
2763 |                 <Border x:Name="rpt"
2764 |                         Grid.Row="1"
2765 |                         Style="{StaticResource ReportStyle_Mobile}">
2766 | 
2767 |                     <Grid>
2768 | 
2769 |                         <Image Style="{StaticResource Rep01Style}" />
2770 |                         <TextBlock Style="{StaticResource Rep02Style}" />
2771 | 
2772 |                     </Grid>
2773 | 
2774 |                 </Border>
2775 | 
2776 |                 <Border x:Name="caldr"
2777 |                         Grid.Row="2"
2778 |                         Style="{StaticResource CalendarStyle_Mobile}">
2779 | 
2780 |                     <Grid>
2781 | 
2782 |                         <Image Style="{StaticResource Cal01Style}" />
2783 |                         <TextBlock Style="{StaticResource Cal02Style}" />
2784 | 
2785 |                     </Grid>
2786 |                 </Border>
2787 | 
2788 |             </Grid>
2789 | 
2790 |         </Border>
2791 | 
2792 |     </ControlTemplate>
2793 | 
2794 |     <ControlTemplate x:Key="Card_7_Vertical">
2795 | 
2796 |         <Border Grid.Row="0"
2797 |                 Grid.Column="4"
2798 |                 Grid.RowSpan="4"
2799 |                 Style="{StaticResource C7VerticalStyle}">
2800 | 
2801 |             <Grid>
2802 | 
2803 |                 <Grid.ColumnDefinitions>
2804 | 
2805 |                     <ColumnDefinition x:Name="cl1"
2806 |                                       Width="*" />
2807 |                     <ColumnDefinition x:Name="cl2"
2808 |                                       Width="0*" />
2809 | 
2810 |                 </Grid.ColumnDefinitions>
2811 | 
2812 |                 <Grid.RowDefinitions>
2813 | 
2814 |                     <RowDefinition x:Name="rw1"
2815 |                                    Height="0.35*" />
2816 |                     <RowDefinition x:Name="rw2"
2817 |                                    Height="1*" />
2818 |                     <RowDefinition x:Name="rw3"
2819 |                                    Height="1*" />
2820 |                     <RowDefinition x:Name="rw4"
2821 |                                    Height="1*" />
2822 |                     <RowDefinition x:Name="rw5"
2823 |                                    Height="1*" />
2824 | 
2825 |                 </Grid.RowDefinitions>
2826 | 
2827 |                 <TextBlock Grid.Row="0"
2828 |                            Style="{StaticResource C701Style}" />
2829 | 
2830 |                 <StackPanel x:Name="SP_User"
2831 |                             Orientation="Vertical"
2832 |                             Grid.Row="1"
2833 |                             Grid.RowSpan="4">
2834 | 
2835 |                     <Grid Grid.Row="1">
2836 | 
2837 |                         <Border Style="{StaticResource C702Style}">
2838 | 
2839 |                             <Grid>
2840 | 
2841 |                                 <TextBlock Style="{StaticResource C703Style}" />
2842 |                                 <TextBlock Style="{StaticResource C704Style}" />
2843 | 
2844 |                                 <Border Style="{StaticResource C705Style}">
2845 |                                     <Image Style="{StaticResource C706Style}" />
2846 |                                 </Border>
2847 | 
2848 |                             </Grid>
2849 | 
2850 |                         </Border>
2851 | 
2852 |                     </Grid>
2853 | 
2854 |                     <Grid Grid.Row="2">
2855 | 
2856 |                         <WrapPanel>
2857 |                             <TextBlock Style="{StaticResource C707Style}" />
2858 |                         </WrapPanel>
2859 | 
2860 |                     </Grid>
2861 | 
2862 |                 </StackPanel>
2863 | 
2864 |                 <StackPanel x:Name="SP_Del"
2865 |                             Grid.Row="3"
2866 |                             Grid.RowSpan="2"
2867 |                             Orientation="Vertical">
2868 | 
2869 |                     <Grid x:Name="deli1"
2870 |                           Grid.Row="3">
2871 | 
2872 |                         <Border Style="{StaticResource C708Style}">
2873 | 
2874 |                             <Grid>
2875 |                                 <TextBlock Style="{StaticResource C709Style}" />
2876 |                                 <TextBlock Style="{StaticResource C710Style}" />
2877 | 
2878 |                                 <Border Style="{StaticResource C711Style}">
2879 |                                     <Image Style="{StaticResource C712Style}" />
2880 |                                 </Border>
2881 |                             </Grid>
2882 | 
2883 |                         </Border>
2884 | 
2885 |                     </Grid>
2886 | 
2887 |                     <Grid Grid.Row="4">
2888 | 
2889 |                         <WrapPanel>
2890 |                             <TextBlock Style="{StaticResource C713Style}" />
2891 |                         </WrapPanel>
2892 | 
2893 |                     </Grid>
2894 | 
2895 |                 </StackPanel>
2896 | 
2897 |             </Grid>
2898 | 
2899 |         </Border>
2900 | 
2901 | 
2902 |     </ControlTemplate>
2903 | 
2904 |     <ControlTemplate x:Key="Card_7_Vertical_Mobile">
2905 | 
2906 |         <Border Height="460"
2907 |                 Style="{StaticResource C7VerticalStyle}">
2908 | 
2909 |             <Grid>
2910 | 
2911 |                 <Grid.ColumnDefinitions>
2912 | 
2913 |                     <ColumnDefinition x:Name="cl1"
2914 |                                       Width="*" />
2915 | 
2916 |                 </Grid.ColumnDefinitions>
2917 | 
2918 |                 <Grid.RowDefinitions>
2919 | 
2920 |                     <RowDefinition x:Name="rw1"
2921 |                                    Height="45" />
2922 |                     <RowDefinition x:Name="rw2"
2923 |                                    Height="100" />
2924 |                     <RowDefinition x:Name="rw3"
2925 |                                    Height="100" />
2926 |                     <RowDefinition x:Name="rw4"
2927 |                                    Height="100" />
2928 |                     <RowDefinition x:Name="rw5"
2929 |                                    Height="100" />
2930 | 
2931 |                 </Grid.RowDefinitions>
2932 | 
2933 |                 <TextBlock Grid.Row="0"
2934 |                            Style="{StaticResource C701Style}" />
2935 | 
2936 |                 <StackPanel x:Name="SP_User"
2937 |                             Orientation="Vertical"
2938 |                             Grid.Row="1"
2939 |                             Grid.RowSpan="4">
2940 | 
2941 |                     <Grid Grid.Row="1">
2942 | 
2943 |                         <Border Style="{StaticResource C702Style}">
2944 | 
2945 |                             <Grid>
2946 | 
2947 |                                 <TextBlock Style="{StaticResource C703Style}" />
2948 |                                 <TextBlock Style="{StaticResource C704Style}" />
2949 | 
2950 |                                 <Border Style="{StaticResource C705Style}">
2951 |                                     <Image Style="{StaticResource C706Style}" />
2952 |                                 </Border>
2953 | 
2954 |                             </Grid>
2955 | 
2956 |                         </Border>
2957 | 
2958 |                     </Grid>
2959 | 
2960 |                     <Grid Grid.Row="2">
2961 | 
2962 |                         <WrapPanel>
2963 |                             <TextBlock Style="{StaticResource C707Style}" />
2964 |                         </WrapPanel>
2965 | 
2966 |                     </Grid>
2967 | 
2968 |                 </StackPanel>
2969 | 
2970 |                 <StackPanel x:Name="SP_Del"
2971 |                             Grid.Row="3"
2972 |                             Grid.RowSpan="2"
2973 |                             Orientation="Vertical">
2974 | 
2975 |                     <Grid x:Name="deli1"
2976 |                           Grid.Row="3">
2977 | 
2978 |                         <Border Style="{StaticResource C708Style}">
2979 | 
2980 |                             <Grid>
2981 |                                 <TextBlock Style="{StaticResource C709Style}" />
2982 |                                 <TextBlock Style="{StaticResource C710Style}" />
2983 | 
2984 |                                 <Border Style="{StaticResource C711Style}">
2985 |                                     <Image Style="{StaticResource C712Style}" />
2986 |                                 </Border>
2987 |                             </Grid>
2988 | 
2989 |                         </Border>
2990 | 
2991 |                     </Grid>
2992 | 
2993 |                     <Grid Grid.Row="4">
2994 | 
2995 |                         <WrapPanel>
2996 |                             <TextBlock Style="{StaticResource C713Style}" />
2997 |                         </WrapPanel>
2998 | 
2999 |                     </Grid>
3000 | 
3001 |                 </StackPanel>
3002 | 
3003 |             </Grid>
3004 | 
3005 |         </Border>
3006 | 
3007 | 
3008 |     </ControlTemplate>
3009 | 
3010 |     <ControlTemplate x:Key="Card_7_Horizontal">
3011 | 
3012 |         <Border Style="{StaticResource C7HorizontalStyle}">
3013 | 
3014 |             <Grid>
3015 | 
3016 |                 <Grid.ColumnDefinitions>
3017 | 
3018 |                     <ColumnDefinition x:Name="cl1"
3019 |                                       Width="*" />
3020 |                     <ColumnDefinition x:Name="cl2"
3021 |                                       Width="*" />
3022 | 
3023 |                 </Grid.ColumnDefinitions>
3024 | 
3025 |                 <Grid.RowDefinitions>
3026 | 
3027 |                     <RowDefinition x:Name="rw1"
3028 |                                    Height="0.35*" />
3029 |                     <RowDefinition x:Name="rw2"
3030 |                                    Height="1*" />
3031 |                     <RowDefinition x:Name="rw3"
3032 |                                    Height="1*" />
3033 | 
3034 |                 </Grid.RowDefinitions>
3035 | 
3036 |                 <TextBlock Grid.Row="0"
3037 |                            Style="{StaticResource C701Style}" />
3038 | 
3039 |                 <StackPanel x:Name="SP_User"
3040 |                             Orientation="Vertical"
3041 |                             Grid.Row="1"
3042 |                             Grid.RowSpan="4">
3043 | 
3044 |                     <Grid Grid.Row="1">
3045 | 
3046 |                         <Border Style="{StaticResource C702Style}">
3047 | 
3048 |                             <Grid>
3049 | 
3050 |                                 <TextBlock Style="{StaticResource C703Style}" />
3051 |                                 <TextBlock Style="{StaticResource C704Style}" />
3052 | 
3053 |                                 <Border Style="{StaticResource C705Style}">
3054 |                                     <Image Style="{StaticResource C706Style}" />
3055 |                                 </Border>
3056 | 
3057 |                             </Grid>
3058 | 
3059 |                         </Border>
3060 | 
3061 |                     </Grid>
3062 | 
3063 |                     <Grid x:Name="UserText"
3064 |                           Grid.Row="2">
3065 | 
3066 |                         <WrapPanel>
3067 |                             <TextBlock Style="{StaticResource C707Style}" />
3068 |                         </WrapPanel>
3069 | 
3070 |                     </Grid>
3071 | 
3072 |                 </StackPanel>
3073 | 
3074 |                 <StackPanel x:Name="SP_Del"
3075 |                             Grid.Column="1"
3076 |                             Grid.Row="1"
3077 |                             Grid.RowSpan="2"
3078 |                             Orientation="Vertical">
3079 | 
3080 |                     <Grid x:Name="delGrid"
3081 |                           Grid.Row="3">
3082 | 
3083 |                         <Border Style="{StaticResource C708Style}">
3084 | 
3085 |                             <Grid>
3086 |                                 <TextBlock Style="{StaticResource C709Style}" />
3087 |                                 <TextBlock Style="{StaticResource C710Style}" />
3088 | 
3089 |                                 <Border Style="{StaticResource C711Style}">
3090 |                                     <Image Style="{StaticResource C712Style}" />
3091 |                                 </Border>
3092 |                             </Grid>
3093 | 
3094 |                         </Border>
3095 | 
3096 |                     </Grid>
3097 | 
3098 |                     <Grid x:Name="DelText"
3099 |                           Grid.Row="4">
3100 | 
3101 |                         <WrapPanel>
3102 |                             <TextBlock Style="{StaticResource C713Style}" />
3103 |                         </WrapPanel>
3104 | 
3105 |                     </Grid>
3106 | 
3107 |                 </StackPanel>
3108 | 
3109 |             </Grid>
3110 | 
3111 |         </Border>
3112 | 
3113 | 
3114 |     </ControlTemplate>
3115 | 
3116 |     <ControlTemplate x:Key="Card_7_Desktop">
3117 | 
3118 |         <Border Height="295"
3119 |                 Style="{StaticResource C7HorizontalStyle}"
3120 |                 VerticalAlignment="Top">
3121 | 
3122 |             <Grid>
3123 | 
3124 |                 <Grid.ColumnDefinitions>
3125 | 
3126 |                     <ColumnDefinition x:Name="cl1"
3127 |                                       Width="*" />
3128 |                     <ColumnDefinition x:Name="cl2"
3129 |                                       Width="*" />
3130 | 
3131 |                 </Grid.ColumnDefinitions>
3132 | 
3133 |                 <Grid.RowDefinitions>
3134 | 
3135 |                     <RowDefinition x:Name="rw1"
3136 |                                    Height="0.40*" />
3137 |                     <RowDefinition x:Name="rw2"
3138 |                                    Height="1*" />
3139 |                     <RowDefinition x:Name="rw3"
3140 |                                    Height="1*" />
3141 | 
3142 |                 </Grid.RowDefinitions>
3143 | 
3144 |                 <TextBlock Grid.Row="0"
3145 |                            Style="{StaticResource C701Style_Desktop}" />
3146 | 
3147 |                 <StackPanel x:Name="SP_User"
3148 |                             Orientation="Vertical"
3149 |                             Grid.Row="1"
3150 |                             Grid.RowSpan="4">
3151 | 
3152 |                     <Grid Grid.Row="1">
3153 | 
3154 |                         <Border Style="{StaticResource C702Style}">
3155 | 
3156 |                             <Grid>
3157 | 
3158 |                                 <TextBlock Style="{StaticResource C703Style}" />
3159 |                                 <TextBlock Style="{StaticResource C704Style}" />
3160 | 
3161 |                                 <Border Style="{StaticResource C705Style}">
3162 |                                     <Image Style="{StaticResource C706Style}" />
3163 |                                 </Border>
3164 | 
3165 |                             </Grid>
3166 | 
3167 |                         </Border>
3168 | 
3169 |                     </Grid>
3170 | 
3171 |                     <Grid x:Name="UserText"
3172 |                           Grid.Row="2">
3173 | 
3174 |                         <WrapPanel>
3175 |                             <TextBlock Style="{StaticResource C707Style_Desktop}" />
3176 |                         </WrapPanel>
3177 | 
3178 |                     </Grid>
3179 | 
3180 |                 </StackPanel>
3181 | 
3182 |                 <StackPanel x:Name="SP_Del"
3183 |                             Grid.Column="1"
3184 |                             Grid.Row="1"
3185 |                             Grid.RowSpan="2"
3186 |                             Orientation="Vertical">
3187 | 
3188 |                     <Grid x:Name="delGrid"
3189 |                           Grid.Row="3">
3190 | 
3191 |                         <Border Style="{StaticResource C708Style}">
3192 | 
3193 |                             <Grid>
3194 |                                 <TextBlock Style="{StaticResource C709Style}" />
3195 |                                 <TextBlock Style="{StaticResource C710Style}" />
3196 | 
3197 |                                 <Border Style="{StaticResource C711Style}">
3198 |                                     <Image Style="{StaticResource C712Style}" />
3199 |                                 </Border>
3200 |                             </Grid>
3201 | 
3202 |                         </Border>
3203 | 
3204 |                     </Grid>
3205 | 
3206 |                     <Grid x:Name="DelText"
3207 |                           Grid.Row="4">
3208 | 
3209 |                         <WrapPanel>
3210 |                             <TextBlock Style="{StaticResource C713Style_Desktop}" />
3211 |                         </WrapPanel>
3212 | 
3213 |                     </Grid>
3214 | 
3215 |                 </StackPanel>
3216 | 
3217 |             </Grid>
3218 | 
3219 |         </Border>
3220 | 
3221 |     </ControlTemplate>
3222 | 
3223 | 
3224 |     <!--#region Scrollbar Style -->
3225 | 
3226 |     <Style x:Key="ScrollThumbs"
3227 |            TargetType="{x:Type Thumb}">
3228 |         <Setter Property="Template">
3229 |             <Setter.Value>
3230 |                 <ControlTemplate TargetType="{x:Type Thumb}">
3231 |                     <Grid x:Name="Grid">
3232 |                         <Rectangle HorizontalAlignment="Stretch"
3233 |                                    VerticalAlignment="Stretch"
3234 |                                    Width="Auto"
3235 |                                    Height="Auto"
3236 |                                    Fill="Transparent" />
3237 |                         <Border x:Name="Rectangle1"
3238 |                                 CornerRadius="5"
3239 |                                 HorizontalAlignment="Stretch"
3240 |                                 VerticalAlignment="Stretch"
3241 |                                 Width="Auto"
3242 |                                 Height="Auto"
3243 |                                 Background="{TemplateBinding Background}" />
3244 |                     </Grid>
3245 |                     <ControlTemplate.Triggers>
3246 |                         <Trigger Property="Tag"
3247 |                                  Value="Horizontal">
3248 |                             <Setter TargetName="Rectangle1"
3249 |                                     Property="Width"
3250 |                                     Value="Auto" />
3251 |                             <Setter TargetName="Rectangle1"
3252 |                                     Property="Height"
3253 |                                     Value="7" />
3254 |                         </Trigger>
3255 |                     </ControlTemplate.Triggers>
3256 |                 </ControlTemplate>
3257 |             </Setter.Value>
3258 |         </Setter>
3259 |     </Style>
3260 | 
3261 |     <Style x:Key="{x:Type ScrollBar}"
3262 |            TargetType="{x:Type ScrollBar}">
3263 |         <Setter Property="Stylus.IsFlicksEnabled"
3264 |                 Value="false" />
3265 |         <Setter Property="Foreground"
3266 |                 Value="#8C8C8C" />
3267 |         <Setter Property="Background"
3268 |                 Value="Transparent" />
3269 |         <Setter Property="Width"
3270 |                 Value="8" />
3271 |         <Setter Property="Template">
3272 |             <Setter.Value>
3273 |                 <ControlTemplate TargetType="{x:Type ScrollBar}">
3274 |                     <Grid x:Name="GridRoot"
3275 |                           Width="8"
3276 |                           Background="{TemplateBinding Background}">
3277 |                         <Grid.RowDefinitions>
3278 |                             <RowDefinition Height="0.00001*" />
3279 |                         </Grid.RowDefinitions>
3280 |                         <Track x:Name="PART_Track"
3281 |                                Grid.Row="0"
3282 |                                IsDirectionReversed="true"
3283 |                                Focusable="false">
3284 |                             <Track.Thumb>
3285 |                                 <Thumb x:Name="Thumb"
3286 |                                        Background="{TemplateBinding Foreground}"
3287 |                                        Style="{DynamicResource ScrollThumbs}" />
3288 |                             </Track.Thumb>
3289 |                             <Track.IncreaseRepeatButton>
3290 |                                 <RepeatButton x:Name="PageUp"
3291 |                                               Command="ScrollBar.PageDownCommand"
3292 |                                               Opacity="0"
3293 |                                               Focusable="false" />
3294 |                             </Track.IncreaseRepeatButton>
3295 |                             <Track.DecreaseRepeatButton>
3296 |                                 <RepeatButton x:Name="PageDown"
3297 |                                               Command="ScrollBar.PageUpCommand"
3298 |                                               Opacity="0"
3299 |                                               Focusable="false" />
3300 |                             </Track.DecreaseRepeatButton>
3301 |                         </Track>
3302 |                     </Grid>
3303 |                     <ControlTemplate.Triggers>
3304 |                         <Trigger SourceName="Thumb"
3305 |                                  Property="IsMouseOver"
3306 |                                  Value="true">
3307 |                             <Setter Value="{DynamicResource ButtonSelectBrush}"
3308 |                                     TargetName="Thumb"
3309 |                                     Property="Background" />
3310 |                         </Trigger>
3311 |                         <Trigger SourceName="Thumb"
3312 |                                  Property="IsDragging"
3313 |                                  Value="true">
3314 |                             <Setter Value="{DynamicResource DarkBrush}"
3315 |                                     TargetName="Thumb"
3316 |                                     Property="Background" />
3317 |                         </Trigger>
3318 |                         <Trigger Property="IsEnabled"
3319 |                                  Value="false">
3320 |                             <Setter TargetName="Thumb"
3321 |                                     Property="Visibility"
3322 |                                     Value="Collapsed" />
3323 |                         </Trigger>
3324 |                         <Trigger Property="Orientation"
3325 |                                  Value="Horizontal">
3326 |                             <Setter TargetName="GridRoot"
3327 |                                     Property="LayoutTransform">
3328 |                                 <Setter.Value>
3329 |                                     <RotateTransform Angle="-90" />
3330 |                                 </Setter.Value>
3331 |                             </Setter>
3332 |                             <Setter TargetName="PART_Track"
3333 |                                     Property="LayoutTransform">
3334 |                                 <Setter.Value>
3335 |                                     <RotateTransform Angle="-90" />
3336 |                                 </Setter.Value>
3337 |                             </Setter>
3338 |                             <Setter Property="Width"
3339 |                                     Value="Auto" />
3340 |                             <Setter Property="Height"
3341 |                                     Value="8" />
3342 |                             <Setter TargetName="Thumb"
3343 |                                     Property="Tag"
3344 |                                     Value="Horizontal" />
3345 |                             <Setter TargetName="PageDown"
3346 |                                     Property="Command"
3347 |                                     Value="ScrollBar.PageLeftCommand" />
3348 |                             <Setter TargetName="PageUp"
3349 |                                     Property="Command"
3350 |                                     Value="ScrollBar.PageRightCommand" />
3351 |                         </Trigger>
3352 |                     </ControlTemplate.Triggers>
3353 |                 </ControlTemplate>
3354 |             </Setter.Value>
3355 |         </Setter>
3356 |     </Style>
3357 | 
3358 |     <!--#endregion-->
3359 | 
3360 | </ResourceDictionary>


--------------------------------------------------------------------------------