Designing a dashboard in wpf
Designing a dashboard in wpf
Hello friend’s this is Rashid Hussain come with another video tutorial. In this tutorial I’ll show you how to design a modern flat dashboard in wpf. Simply follow the steps below to accomplish this.
First open visual studio and create wpf Application.
Copy and code below
Source code
<Window x:Class="WPFDashboard.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:WPFDashboard" mc:Ignorable="d" Title="MainWindow" Height="698.19" Width="1256.267" ResizeMode="NoResize" WindowStartupLocation="CenterScreen" WindowStyle="None"> <Grid> <Grid HorizontalAlignment="Left" Height="698" VerticalAlignment="Top" Width="189" Background="#FF0045A5"> <Button Content="Home" HorizontalAlignment="Left" Margin="0,138,0,0" VerticalAlignment="Top" Width="189" Height="63" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" BorderBrush="{x:Null}" Click="Button_Click_1"> <Button.Background> <ImageBrush/> </Button.Background> </Button> <Button Content="Events" HorizontalAlignment="Left" Margin="0,210,0,0" VerticalAlignment="Top" Width="189" Height="63" Background="{x:Null}" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" BorderBrush="{x:Null}" Click="Button_Click"/> <Button Content="Setting" HorizontalAlignment="Left" Margin="0,359,0,0" VerticalAlignment="Top" Width="189" Height="63" Background="{x:Null}" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" BorderBrush="{x:Null}"/> <Button Content="Notify" HorizontalAlignment="Left" Margin="0,284,0,0" VerticalAlignment="Top" Width="189" Height="63" Background="{x:Null}" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" RenderTransformOrigin="0.458,1.651" BorderBrush="{x:Null}"/> <Button Content="About" HorizontalAlignment="Left" Margin="0,436,0,0" VerticalAlignment="Top" Width="189" Height="63" Background="{x:Null}" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" BorderBrush="{x:Null}"/> <Button Content="Home" HorizontalAlignment="Left" Margin="0,138,0,0" VerticalAlignment="Top" Width="189" Height="63" FontFamily="Century Gothic" FontSize="20" Foreground="#FFFBFBFB" BorderBrush="{x:Null}" Click="Button_Click_1"> <Button.Background> <ImageBrush/> </Button.Background> </Button> </Grid> <Grid HorizontalAlignment="Left" Height="67" Margin="189,0,0,0" VerticalAlignment="Top" Width="1067" Background="#FF0045A5" MouseLeftButtonDown="Grid_MouseLeftButtonDown"> <Image HorizontalAlignment="Left" Height="32" Margin="853,16,0,0" VerticalAlignment="Top" Width="35" Source="F:\Youtube\projects\WPFDashboard\WPFDashboard\icon\icons8_contacts_24px.png" RenderTransformOrigin="0.031,0.355"/> <Image HorizontalAlignment="Left" Height="32" Margin="802,16,0,0" VerticalAlignment="Top" Width="35" Source="icon/icons8_notification_26px.png" RenderTransformOrigin="0.031,0.355"/> <Image HorizontalAlignment="Left" Height="32" Margin="751,16,0,0" VerticalAlignment="Top" Width="35" Source="icon/icons8_group_message_24px.png" RenderTransformOrigin="0.031,0.355"/> <Button Content="X" HorizontalAlignment="Left" Margin="1013,3,0,0" VerticalAlignment="Top" Width="54" Height="64" FontSize="40" FontWeight="Bold" Background="{x:Null}" Foreground="White" Click="Button_Click_2"/> </Grid> <DataGrid HorizontalAlignment="Left" Height="190" Margin="206,120,0,0" VerticalAlignment="Top" Width="334" SelectionChanged="DataGrid_SelectionChanged" Background="#FF15AC53"/> <DataGrid HorizontalAlignment="Left" Height="190" Margin="552,120,0,0" VerticalAlignment="Top" Width="335" Background="#FF2F9BA0"/> <DataGrid HorizontalAlignment="Left" Height="190" Margin="901,120,0,0" VerticalAlignment="Top" Width="335" Background="#FF15AC53"/> <Label Content="Total Customers" HorizontalAlignment="Left" Margin="264,137,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="25" FontWeight="Medium" Background="Transparent" Foreground="#FFFFFBFB"/> <Label Content="New Customers" HorizontalAlignment="Left" Margin="613,137,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="25" FontWeight="Medium" Background="Transparent" Foreground="#FFFFFBFB"/> <Label Content="Total Products" HorizontalAlignment="Left" Margin="971,137,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="25" FontWeight="Medium" Background="Transparent" Foreground="#FFFFFBFB"/> <Label Content="1110" HorizontalAlignment="Left" Margin="319,210,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="40" FontWeight="Bold" Background="Transparent" Foreground="#FFFFFBFB" RenderTransformOrigin="1.311,0.442"/> <Label Content="110" HorizontalAlignment="Left" Margin="673,210,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="40" FontWeight="Bold" Background="Transparent" Foreground="#FFFFFBFB" RenderTransformOrigin="1.311,0.442"/> <Label Content="5000" HorizontalAlignment="Left" Margin="1036,210,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="40" FontWeight="Bold" Background="Transparent" Foreground="#FFFFFBFB" RenderTransformOrigin="1.311,0.442"/> <Grid HorizontalAlignment="Left" Height="308" Margin="194,364,0,0" VerticalAlignment="Top" Width="1062" Background="#FFE4DEDE"/> <Label Content="RashiCode" HorizontalAlignment="Left" Margin="210,364,0,0" VerticalAlignment="Top" FontFamily="Century Gothic" FontSize="50" FontWeight="Bold" Background="Transparent" Foreground="#FFFFFBFB" RenderTransformOrigin="1.311,0.442"/> </Grid> </Window>
Video tutorial
Thank you for reading this article. Please don’t forget to subscribe our official YouTube Channel RashiCode