Three Dashboard Designs

Today I am designing three different dashboard designs:

  1. Simple Dashboard
  2. Colorful Dashboard
  3. Dashboard with image
Create custom control
  1. FrameView
  2. GridImage
FramView.Xaml
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinLesson1.Controls.FrameView">
  <ContentView.Content>
        <Grid  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image x:Name="imgBG" Source="login_bg.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>
            <Frame x:Name="frame" HasShadow="True">
                <StackLayout  VerticalOptions="CenterAndExpand"  HorizontalOptions="CenterAndExpand">
                    <Label x:Name="lblName" VerticalOptions="Center"/>
                    <Image x:Name="img" HorizontalOptions="Center"></Image>
                </StackLayout>
            </Frame>
        </Grid> 
  </ContentView.Content>
</ContentView>
FrameView.cs


     public string Text
        {
            get
            {
                return lblName.Text;
            }
            set
            {
                lblName.Text = value;
            }
        }

        public ImageSource Icon
        {
            get
            {
                return img.Source;
            }
            set
            {
                img.Source = value;
            }
        }

        public Color BGColor
        {
            get
            {
                return frame.BackgroundColor;
            }
            set
            {
                frame.BackgroundColor = value;
            }
        }

        public ImageSource BackGroundImage
        {
            get
            {
                return imgBG.Source;
            }
            set
            {
                imgBG.Source = value;
            }
        }

GridImage.xaml
     <Grid  VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Image x:Name="imgBG" Source="login_bg.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill"></Image>
            <StackLayout  VerticalOptions="CenterAndExpand"  HorizontalOptions="CenterAndExpand">
                <Label x:Name="lblName" TextColor="White" VerticalOptions="Center"/>
                <Image x:Name="img" HorizontalOptions="Center"></Image>
            </StackLayout>
     </Grid>
GridImage.cs
        public string Text
        {
            get
            {
                return lblName.Text;
            }
            set
            {
                lblName.Text = value;
            }
        }

        public ImageSource Icon
        {
            get
            {
                return img.Source;
            }
            set
            {
                img.Source = value;
            }
        }

        public ImageSource BackGroundImage
        {
            get
            {
                return imgBG.Source;
            }
            set
            {
                imgBG.Source = value;
            }
        }
 Simple Dashboard
Simple dashboard in xamarin form for mobile developer


SimpleDashboard.xaml
            
  <Grid RowSpacing="5" ColumnSpacing="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="1" Icon="icon.png"></control:FrameView>
    </Grid>
Colorful Dashboard

Colorfull and image dashboard in xamarin form for mobile developer



Colorful Dahboard.xaml


<Grid RowSpacing="5" ColumnSpacing="5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <control:FrameView WidthRequest="100" BGColor="#66B460" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" BGColor="#F8BB48" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" BGColor="#854E9B" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" BGColor="#E95A38" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" BGColor="#F09543" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" BGColor="#B3CE5B" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="1" Icon="icon.png"></control:FrameView>

        <control:FrameView WidthRequest="100" BGColor="#17ACE4" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="0" Icon="icon.png"></control:FrameView>
        <control:FrameView WidthRequest="100" BGColor="#22B5BD" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="1" Icon="icon.png"></control:FrameView>
    </Grid>



Dashbord With Image

Image dashboard in xamarin form for mobile developer



DashboardWithImage.xaml

     <Grid RowSpacing="0" ColumnSpacing="0">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"></ColumnDefinition>
            <ColumnDefinition Width="*"></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
            <RowDefinition Height="*"></RowDefinition>
        </Grid.RowDefinitions>
        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_0.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="0" Icon="icon.png"></control:GridImage>
        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_1.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="0" Grid.Column="1" Icon="icon.png"></control:GridImage>

        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_2.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="0" Icon="icon.png"></control:GridImage>
        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_3.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="1" Grid.Column="1" Icon="icon.png"></control:GridImage>

        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_4.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="0" Icon="icon.png"></control:GridImage>
        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_5.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="2" Grid.Column="1" Icon="icon.png"></control:GridImage>

        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_6.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="0" Icon="icon.png"></control:GridImage>
        <control:GridImage WidthRequest="100" BackGroundImage="dashboard_thumbnail_7.jpg" HeightRequest="100" Text="xamarin 1" Grid.Row="3" Grid.Column="1" Icon="icon.png"></control:GridImage>
    </Grid>
        

Conclusion:
Today we have learn three different type of dashboard.
-

Comments

Post a Comment

Popular posts from this blog

The Hidden Bug in .NET MAUI Android Layouts (and How to Fix It Cleanly)

Image
📱 Fixing Layout Overlap in .NET MAUI on Android API 35+: A Developer’s Guide Have you ever opened your beautiful .NET MAUI app on a modern Android device, only to find your layout sneaking under the status bar or navigation bar ? Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. This is a common frustration—especially when targeting Android 15 (API 35) , where edge-to-edge layouts and gesture navigation are the new normal. In this post, we’ll walk through the root cause and a clean, production-grade solution using custom layout handling and AndroidX window insets —all without disrupting your cross-platform codebase. 🚨 The Problem: UI Elements Overlapping System Bars Starting from Android 10 (API 29) , Google began promoti...
Read more

Push Notifications in .NET MAUI: A Comprehensive Guide

Image
Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What are Push Notifications? Push notifications are messages sent directly to a user's mobile device from a server, even when the app is not actively being used. They are a crucial part of mobile app development, enabling real-time communication with users. Notifications can inform users about new content, updates, reminders, or other important information, thus enhancing user engagement and retention. Watch video to understand code: Implementing Push Notifications in Android and iOS using .NET MAUI In this blog, we'll explore how to implement push notifications in a .NET MAUI application for both Android and iOS platforms. We'll start by setting up a Firebase ...
Read more

Flutter Falls Behind? .NET MAUI Nails Liquid Glass on iOS 26 – Here’s How

Image
Flutter Falls Behind? .NET MAUI Nails Liquid Glass on iOS 26 – Here’s How Introduction Apple shook the developer world with iOS 26's new UI design system: Liquid Glass . A stunning blend of blur, translucency, and motion-responsive effects, it transforms the user interface into a living, breathing visual experience. While most cross-platform frameworks are scrambling to replicate it, .NET MAUI developers have a secret weapon: native handler access . In this blog, we’ll explore: What is Liquid Glass? Why Flutter struggles with it How .NET MAUI makes it possible Real working example of Liquid Glass UI in .NET MAUI for iOS 26 Join our exclusive WhatsApp group for Xamarin and .NET MAUI developers to connect with experts, share insights, and get help with your projects. Whether you're a beginner or an experienced developer, this group is the perfect place to enhance your skills and collaborate with the community. What is Liquid ...
Read more