<Window x:Class="Restraurant_POS.Dashboard"
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:Wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:Icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Restraurant_POS"
mc:Ignorable="d"
Title="Dashboard" Height="780" Width="1280" AllowsTransparency="True" WindowState="Maximized" WindowStyle="None">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisConv"/>
</Window.Resources>
<Grid Background="#f7f6f4" Margin="20,20,20,20">
<Grid Width="Auto" Height="Auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Menu-->
<Border Grid.RowSpan="4" CornerRadius="25">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#01a0fe" Offset="0"/>
<GradientStop Color="#2ec091" Offset="0.8"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel>
<!--Logo-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 30 0 10">
<Grid>
<Border Background="#ffffff" Width="35" Height="35" CornerRadius="50"/>
<Border Width="35" Height="35" BorderBrush="#ffffff" BorderThickness="3" CornerRadius="50">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.3"/>
</Border.Effect>
<!--Icon-->
<Icon:PackIconMaterial Kind="SendOutline" Width="15" Height="15" Foreground="#01A0FE" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="3 0 0 2">
<Icon:PackIconMaterial.LayoutTransform>
<RotateTransform Angle="-45"/>
</Icon:PackIconMaterial.LayoutTransform>
</Icon:PackIconMaterial>
</Border>
</Grid>
<!--Title Text-->
<TextBlock Text="Data" Foreground="#ffffff" FontSize="30" Margin="10 0 0 3">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.3"/>
</TextBlock.Effect>
</TextBlock>
</StackPanel>
<!--Menu Items-->
<TextBlock Text="Main" Style="{StaticResource menuTitle}"/>
<Button Name="btnDashboard" Style="{StaticResource menuButton}" Background="#f7f6f4" Foreground="#000000" Click="btnDashboard_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="ViewDashboard" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Dashboard" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnMaster" Style="{StaticResource menuButton}" Click="btnMaster_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="AccountCheckOutline" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Master" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnInventory" Style="{StaticResource menuButton}" Click="btnInventory_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="BasketPlusOutline" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Inventory" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnPayroll" Style="{StaticResource menuButton}" Click="btnPayroll_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="ProgressClock" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Payroll" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnReports" Style="{StaticResource menuButton}" Click="btnReports_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="SourceRepository" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Reports" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnSettings" Style="{StaticResource menuButton}" Click="btnSettings_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="StarSettings" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Settings" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<!--Search Bar-->
<Border Style="{StaticResource whiteBorder}" CornerRadius="30" Margin="10,10,10,10" Grid.Column="1" >
<Grid VerticalAlignment="Bottom">
<Button Name="btnPower" Style="{StaticResource topButton}" Width="30" Height="25" BorderBrush="{x:Null}" Foreground="White" Background="Black" Margin="40,3,6,4" Click="btnPower_Click">
<materialDesign:PackIcon Kind="Power"/>
</Button>
</Grid>
</Border>
</Grid>
</Grid>
</Window>
What I have tried:
<Window x:Class="Restraurant_POS.Dashboard"
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:Wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:Icon="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:local="clr-namespace:Restraurant_POS"
mc:Ignorable="d"
Title="Dashboard" Height="780" Width="1280" AllowsTransparency="True" WindowState="Maximized" WindowStyle="None">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="boolToVisConv"/>
</Window.Resources>
<Grid Background="#f7f6f4" Margin="20,20,20,20">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="220"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<!--Menu-->
<Border Grid.RowSpan="4" CornerRadius="25">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#01a0fe" Offset="0"/>
<GradientStop Color="#2ec091" Offset="0.8"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel>
<!--Logo-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0 30 0 10">
<Grid>
<Border Background="#ffffff" Width="35" Height="35" CornerRadius="50"/>
<Border Width="35" Height="35" BorderBrush="#ffffff" BorderThickness="3" CornerRadius="50">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.3"/>
</Border.Effect>
<!--Icon-->
<Icon:PackIconMaterial Kind="SendOutline" Width="15" Height="15" Foreground="#01A0FE" VerticalAlignment="Center"
HorizontalAlignment="Center" Margin="3 0 0 2">
<Icon:PackIconMaterial.LayoutTransform>
<RotateTransform Angle="-45"/>
</Icon:PackIconMaterial.LayoutTransform>
</Icon:PackIconMaterial>
</Border>
</Grid>
<!--Title Text-->
<TextBlock Text="Data" Foreground="#ffffff" FontSize="30" Margin="10 0 0 3">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="10" Opacity="0.3"/>
</TextBlock.Effect>
</TextBlock>
</StackPanel>
<!--Menu Items-->
<TextBlock Text="Main" Style="{StaticResource menuTitle}"/>
<Button Name="btnDashboard" Style="{StaticResource menuButton}" Background="#f7f6f4" Foreground="#000000" Click="btnDashboard_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="ViewDashboard" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Dashboard" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnMaster" Style="{StaticResource menuButton}" Click="btnMaster_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="AccountCheckOutline" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Master" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnInventory" Style="{StaticResource menuButton}" Click="btnInventory_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="BasketPlusOutline" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Inventory" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnPayroll" Style="{StaticResource menuButton}" Click="btnPayroll_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="ProgressClock" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Payroll" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnReports" Style="{StaticResource menuButton}" Click="btnReports_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="SourceRepository" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Reports" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
<Button Name="btnSettings" Style="{StaticResource menuButton}" Click="btnSettings_Click">
<StackPanel Orientation="Horizontal">
<Icon:PackIconMaterial Kind="StarSettings" Style="{StaticResource menuButtonIcon}"/>
<TextBlock Text="Settings" Style="{StaticResource menuButtonIText}" FontSize="16"/>
</StackPanel>
</Button>
</StackPanel>
</Border>
<!--Search Bar-->
<Border Style="{StaticResource whiteBorder}" CornerRadius="30" Margin="10,10,10,10" Grid.Column="1" >
<Grid VerticalAlignment="Bottom">
<Button Name="btnPower" Style="{StaticResource topButton}" Width="30" Height="25" BorderBrush="{x:Null}" Foreground="White" Background="Black" Margin="40,3,6,4" Click="btnPower_Click">
<materialDesign:PackIcon Kind="Power"/>
</Button>
</Grid>
</Border>
</Grid>
<Grid Margin="230,80,10,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<materialDesign:Card Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" Padding="8" Margin="10 10 10 10" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="225">
<materialDesign:Card.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#5E057E" Offset="0"/>
<GradientStop Color="#143D59" Offset="1"/>
</LinearGradientBrush>
</materialDesign:Card.Background>
<TextBlock Margin="239.667,66,0,0">
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFE5F01" Offset="0"/>
<GradientStop Color="#FFFE01A0" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</materialDesign:Card>
<Label x:Name="label" Content="Today Sales" Margin="20,20,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="#DDFFFFFF" FontWeight="Bold" FontSize="14" />
<Label x:Name="label1" Content="47,624" Margin="30,65,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Foreground="#DDFFFFFF" FontWeight="Bold" FontSize="14"/>
<Image Source="Images/rupee.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,63,45,567" Height="30"/>
</Grid>
<Grid Grid.Column="1">
<materialDesign:Card Padding="8" Margin="10 10 10 10" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="225">
<materialDesign:Card.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="#FFA781" Offset="0"/>
<GradientStop Color="#5B0E2D" Offset="1"/>
</LinearGradientBrush>
</materialDesign:Card.Background>
</materialDesign:Card>
<Label x:Name="label3" Content="Today Expenses" Height="30" Margin="17,20,0,0" VerticalAlignment="Top" Foreground="#DDF7F7F7" FontWeight="Bold" HorizontalAlignment="Left" Width="138" FontSize="14"/>
<Label x:Name="label4" Content="47,624" Height="27" Margin="30,65,0,0" VerticalAlignment="Top" Foreground="#DDFFFFFF" FontWeight="Bold" HorizontalAlignment="Left" Width="65" RenderTransformOrigin="0.768,0.481" FontSize="14"/>
<Image Source="Images/rupee.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,63,45,567" Height="30"/>
</Grid>
<Grid Grid.Column="2">
<materialDesign:Card Padding="8" Margin="10 10 10 10" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="225">
<materialDesign:Card.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="#FFB60D" Offset="0"/>
<GradientStop Color="#372800" Offset="1"/>
</LinearGradientBrush>
</materialDesign:Card.Background>
</materialDesign:Card>
<Label x:Name="label6" Content="Swiggy Sales" HorizontalAlignment="Left" Margin="17.333,20.333,0,0" VerticalAlignment="Top" FontWeight="Bold" Foreground="#DDFFFFFF" FontSize="14" />
<Label x:Name="label7" Content="47,624" HorizontalAlignment="Left" Margin="30,65,0,0" VerticalAlignment="Top" Foreground="#DDFFFFFF" FontWeight="Bold" RenderTransformOrigin="0.109,0.5" FontSize="14" />
<Image Source="Images/rupee.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,58,46,573" Height="29"/>
</Grid>
<Grid Grid.Column="3">
<materialDesign:Card Foreground="{DynamicResource PrimaryHueDarkForegroundBrush}" Padding="8" Margin="10 10 10 10" Height="100" VerticalAlignment="Top" HorizontalAlignment="Left" Width="225">
<materialDesign:Card.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" >
<GradientStop Color="#99EEDF" Offset="0"/>
<GradientStop Color="#008970" Offset="1"/>
</LinearGradientBrush>
</materialDesign:Card.Background>
<TextBlock Margin="0,0,55.666,501">
<TextBlock.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF36B670" Offset="0"/>
<GradientStop Color="#FFB34A39" Offset="1"/>
</LinearGradientBrush>
</TextBlock.Background>
</TextBlock>
</materialDesign:Card>
<Label x:Name="label9" Content="Purchase" HorizontalAlignment="Left" Margin="18,20,0,0" VerticalAlignment="Top" Foreground="#DDFFFFFF" FontWeight="Bold" FontSize="14" />
<Label x:Name="label10" Content="47,624" HorizontalAlignment="Left" Margin="30,66,0,0" VerticalAlignment="Top" Foreground="#DDFFFFFF" FontWeight="Bold" FontSize="14" />
<Image Source="Images/rupee.png" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,60,46,570" Height="30" />
</Grid>
</Grid>
<Grid Margin="230,215,344,0" HorizontalAlignment="Stretch">
<materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Background="White" >
<Wpf:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" Margin="0,0,0,100">
<Wpf:CartesianChart.AxisY>
<Wpf:Axis Title="Ventas del Mes" LabelFormatter="{Binding yFormatter}"/>
</Wpf:CartesianChart.AxisY>
<Wpf:CartesianChart.AxisX>
<Wpf:Axis Title="Ventas del Mes" Labels="{Binding Labels}"/>
</Wpf:CartesianChart.AxisX>
</Wpf:CartesianChart>
</materialDesign:Card>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Width="55" Height="55" VerticalAlignment="Bottom" HorizontalAlignment="Center" Background="#FF0E9CEE" Margin="0,0,255.516,40" >
<ToggleButton.Content>
<materialDesign:PackIcon Kind="Sale"/>
</ToggleButton.Content>
</ToggleButton>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="55" Width="55" Margin="120.833,0,174.167,40" VerticalAlignment="Bottom" HorizontalAlignment="Center" Background="Red">
<ToggleButton.Content>
<materialDesign:PackIcon Kind="Shopping"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="Shopping"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="55" Width="55" Margin="0,0,-139.683,40" VerticalAlignment="Bottom" Background="#FFFFAE02" >
<ToggleButton.Content>
<materialDesign:PackIcon Kind="PartyPopper"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="PartyPopper"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
</Grid>
<Grid HorizontalAlignment="Right" Width="330" Margin="0,215,0,0">
<materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Padding="32" VerticalAlignment="Top" HorizontalAlignment="Right" Width="329" Height="525">
<Wpf:PieChart LegendLocation="Bottom" Margin="-30,-33,-31,156" Hoverable="False" DataClick="PieChart_DataClick">
<Wpf:PieChart.Series>
<Wpf:PieSeries Title="DineIn" Values="25" DataLabels="True" LabelPoint="{Binding PointLabel}"/>
<Wpf:PieSeries Title="Take Away" Values="25" DataLabels="True" LabelPoint="{Binding PointLabel}"/>
<Wpf:PieSeries Title="Party Order" Values="25" DataLabels="True" LabelPoint="{Binding PointLabel}"/>
<Wpf:PieSeries Title="Swiggy" Values="25" DataLabels="True" LabelPoint="{Binding PointLabel}"/>
</Wpf:PieChart.Series>
</Wpf:PieChart>
</materialDesign:Card>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="54" Margin="0,0,255.516,40" Width="55" HorizontalAlignment="Right" VerticalAlignment="Bottom" Background="#FF008BFF" RenderTransformOrigin="0.418,1.1" Grid.Column="1" Grid.Row="2" d:LayoutOverrides="VerticalAlignment">
<ToggleButton.Content>
<materialDesign:PackIcon Kind="Sale"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="Sale"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="55" Width="55" Margin="120.833,0,174.167,40" Background="Red" VerticalAlignment="Bottom" d:LayoutOverrides="HorizontalAlignment, Height">
<ToggleButton.Content>
<materialDesign:PackIcon Kind="Shopping"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="Shopping"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="54" Width="55" Margin="0,0,99.683,40" VerticalAlignment="Bottom" Background="#FFFFAE02" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="2" d:LayoutOverrides="VerticalAlignment">
<ToggleButton.Content>
<materialDesign:PackIcon Kind="PartyPopper"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="PartyPopper"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
<ToggleButton Style="{StaticResource MaterialDesignActionAccentToggleButton}" ToolTip="MaterialDesignActionLightToggleButton" Height="54" Width="56" Margin="0,0,26.683,40" VerticalAlignment="Bottom" HorizontalAlignment="Right" Grid.Column="1" Grid.Row="2" d:LayoutOverrides="VerticalAlignment" Background="#FF787C6D">
<ToggleButton.Content>
<materialDesign:PackIcon Kind="Reproduction"/>
</ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon Kind="Reproduction"/>
</materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton>
</Grid>
</Grid>
</Window>