In the ever-evolving landscape of technology, tools and frameworks continuously evolve, and developers must stay ahead of the curve. One si...

Good Bye Xamarin Good Bye Xamarin

A blog about android developement

In the ever-evolving landscape of technology, tools and frameworks continuously evolve, and developers must stay ahead of the curve. One significant evolution in recent times is the transition from Xamarin.Forms to .NET MAUI (Multi-platform App UI). This shift brings about a series of changes and deadlines that developers must navigate skillfully. In this article, we'll simplify and explore the essential milestones and recommendations to smoothly transition from Xamarin to .NET MAUI.

Saying Farewell to Xamarin

Xamarin.Forms, the precursor to .NET MAUI, is reaching its twilight phase. Existing Xamarin.Forms projects now have the imperative of migrating to .NET MAUI, with Xamarin itself approaching its expiration date. It's vital to note that support for all Xamarin SDKs, including Xamarin.Forms, will come to an end after May 1, 2024.

For those seeking comprehensive insights into this transition, detailed information and guidelines are available in the official documentation.

Navigating the Transition to .NET 7

Complicating matters further is the impending end of support for .NET 7, scheduled for May 14, 2023. To mitigate potential challenges, it's wise to initiate migrations well in advance, allowing ample time to address any arising issues during the process. For detailed information, delve into the resources provided.

Embracing Visual Studio Code

As Visual Studio for Mac faces retirement by August 31, 2024, developers may find themselves at a crossroads. However, there's no cause for concern as the transition to .NET MAUI can seamlessly continue using Visual Studio Code. Learn how to implement the MAUI Extension for Visual Studio Code and access additional resources in the official documentation.

Understanding App Store Transition Deadlines

The transition timeline extends beyond development environments to app distribution platforms. It's anticipated that by April 2025, the Apple App Store will likely stop accepting submissions of Xamarin applications built with Xcode 15. Similarly, the Google Play Store is expected to cease supporting Xamarin apps targeting API 34 by August 2025.

For more information on these transitions, refer to the provided links.

Fostering Community Engagement

In the spirit of community collaboration, developers are encouraged to share their feedback with the Microsoft team through David Ortinau's facilitated platform. Your experiences are invaluable in enriching the community and streamlining the migration process from Xamarin to .NET MAUI. Participate in the feedback survey to contribute to this collective effort.

Showcasing Your .NET MAUI Creations

As .NET MAUI gains momentum, Microsoft eagerly seeks to showcase applications developed using this framework. Your contributions and feedback play a pivotal role in shaping the future of .NET MAUI. Keep an eye out for Microsoft events where .NET MAUI applications are celebrated and showcased.


In conclusion, transitioning from Xamarin to .NET MAUI signifies a significant milestone in the realm of cross-platform app development. By staying informed, proactive, and leveraging available resources, developers can navigate this transition with confidence and agility, propelling their projects into the future.


Certainly! Here's a tabulated overview of the key dates and their details:

Date Event Details
May 1, 2024 End of Xamarin Official Support Support for all Xamarin SDKs, including Xamarin.Forms, will cease after this date.
May 14, 2023 End of .NET 7 Official Support Support for .NET 7 will be terminated, urging developers to plan migration strategies well in advance.
August 31, 2024 Retirement of Visual Studio for Mac Visual Studio for Mac will be retired, prompting developers to transition to alternative environments such as Visual Studio Code.
April 2025 Apple App Store Transition Deadline The anticipated final deadline for the Apple App Store to accept submissions of Xamarin applications built with Xcode 15.
August 2025 Google Play Store Transition Deadline The expected final deadline for the Google Play Store to accept Xamarin apps targeting API 34.

These dates serve as crucial milestones for developers navigating the transition from Xamarin to .NET MAUI. It's essential to stay informed and plan accordingly to ensure a smooth and seamless transition process.

Introduction Imagine building an app that works on different devices like phones and computers using .NET MAUI. Sometimes, it'...

.NET MAUI - Base64 Image Encode/Decode .NET MAUI - Base64 Image Encode/Decode

A blog about android developement

Introduction

Imagine building an app that works on different devices like phones and computers using .NET MAUI. Sometimes, it's tricky to show images in your app, especially when they're encoded in Base64. This blog helps you figure out how to do that easily. We'll break down the steps, making it simple for 10th-grade students to follow along. By the end, you'll know how to make your app look cool with Base64 images in .NET MAUI!


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation

  • Open MainPage.xaml file and update the UI as per requirement. And below my screen design.
    <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MauiBase64Image.MainPage">
    
        <ScrollView>
            <VerticalStackLayout
                Spacing="25"
                Padding="30,0"
                VerticalOptions="Center">
    
                <Label
                    x:Name="base64Result"
                    Text=""
                    MaxLines="5"
                    SemanticProperties.HeadingLevel="Level1"
                    FontSize="12"
                    HorizontalOptions="Center" />
    
                <Button
                    x:Name="EncodeBtn"
                    Text="Base64 Encode"
                    Clicked="OnEncodeClicked"
                    HorizontalOptions="Center" />
    
                <Image
                    x:Name="imagePreview"
                    HeightRequest="200"
                    HorizontalOptions="Center" />
    
                <Button
                    x:Name="DecodeBtn"
                    Text="Base64 Decode"
                    Clicked="OnDecodeClicked"
                    HorizontalOptions="Center" />
    
            </VerticalStackLayout>
        </ScrollView>
    
    </ContentPage>

Base64 String to Image:

If you're into turning one thing into another, the Convert class in .NET is like a superhero! It helps change stuff, even binary files, into this special code called Base64.


Here's a little example code that shows how to use this superhero class to make a special picture show up in a .NET MAUI app. But here's the trick: don't use the word 'using' like we usually do when talking to the computer. If we do that, it might close the door too early before the picture is ready to show.


var imageBytes = Convert.FromBase64String(base64Result.Text);
MemoryStream imageDecodeStream = new(imageBytes);
imagePreview.Source = ImageSource.FromStream(() => imageDecodeStream);

Image to Base64 String:

Now, let's learn how to do the opposite – turning a picture into a base64 string! We use something called Convert.ToBase64String() in .NET MAUI, which is like a tool for this job.


As you might have guessed, the first step is changing our picture into something called a byte array, which is like breaking it into small pieces. In .NET MAUI, you can grab a file from your app (maybe in the Resources\Raw folder) using the FileSystem tools.


using var imageEncodeStream = await FileSystem.OpenAppPackageFileAsync("icon.png");
using var memoryStream = new MemoryStream();

imageEncodeStream.CopyTo(memoryStream);
base64Result.Text = Convert.ToBase64String(memoryStream.ToArray());

Here's how it works: we turn the picture into a Stream, put it in a special memory place called MemoryStream, and then change it into those small pieces, the byte array. Take a look at this code example to see how it's done.


See those 'using' words? They make sure everything is cleaned up nicely when we finish. Remember, there could be different ways to get files, but as long as you can turn your picture into a byte array, you're good to go in your .NET MAUI journey!


Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction Hey! Ever wanted to create cool apps for different devices like phones and computers? Well, .NET MAUI makes it super...

.NET MAUI - Video Player using Community Toolkit .NET MAUI - Video Player using Community Toolkit

A blog about android developement

Introduction

Hey! Ever wanted to create cool apps for different devices like phones and computers? Well, .NET MAUI makes it super easy. It's like a superhero for app creators! Now, imagine adding fun things like videos to your apps. That's where the Community Toolkit comes in – a toolbox that lots of developers work on together. Today, we're exploring the Video Player control, a cool feature powered by .NET MAUI and its friendly Community Toolkit. Get ready for an adventure in making your apps more exciting with videos!


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugin:

  • Open Terminal or Command Prompt: Open a terminal or command prompt window. You can usually find this on your computer by searching for "Command Prompt" (Windows) or "Terminal" (macOS/Linux).
  • Navigate to Your Project Folder: Use the cd command to navigate to your .NET MAUI project folder. For example:
  • Install Community Toolkit: Run the following command to install the CommunityToolkit.Maui package:
    dotnet add package Microsoft.Maui.CommunityToolkit
  • Restore Packages: After the installation, run the following command to restore the packages:
    dotnet restore

Implementation

  • First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library.
    using CommunityToolkit.Maui;
    .UseMauiCommunityToolkit()
    .UseMauiCommunityToolkitMediaElement()
  • Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you).
    xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
  • Then, remove the default content and add an instance of the Media Element class to the page.
    <toolkit:MediaElement Source="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
    ShouldShowPlaybackControls="True"
    BackgroundColor="AliceBlue"
    x:Name="mediaElement"/>
  • We can add other controls for custom video controls like play/pause and volume controls like below.
    <HorizontalStackLayout BindingContext="{x:Reference mediaElement}"
    					      HorizontalOptions="Center"
    					      Spacing="10">
    	
    	<Button Text="Play"
    		HorizontalOptions="CenterAndExpand"
    		Clicked="OnPlayPauseButtonClicked">
    	</Button>
    	<Button Text="Stop"
    		HorizontalOptions="CenterAndExpand"
    		Clicked="OnStopButtonClicked">
    	</Button>
    </HorizontalStackLayout>
    <Slider Maximum="1.0"
    		   Minimum="0.0"
    		   Value="{Binding Volume}"
    		   ValueChanged="Slider_ValueChanged"  
    		   Rotation="270"
    		   WidthRequest="100" />
  • Open Code behind and add the following which will be useful to controls media elements using custom controls.
    void OnPlayPauseButtonClicked(object sender, EventArgs args)
    {
    	if (mediaElement.CurrentState == MediaElementState.Stopped ||
    		mediaElement.CurrentState == MediaElementState.Paused)
    	{
    		mediaElement.Play();
    	}
    	else if (mediaElement.CurrentState == MediaElementState.Playing)
    	{
    		mediaElement.Pause();
    	}
    }
    
    void OnStopButtonClicked(object sender, EventArgs args)
    {
    	mediaElement.Stop();
    }
    
    private void Slider_ValueChanged(object sender, ValueChangedEventArgs e)
    {
    	mediaElement.Volume = e.NewValue;
    }

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

In this video, we will see the recap of .NET MAUI articles post on 2023. Supercharge your .NET MAUI projects by referring this articles. ...

.NET MAUI - 2023 Recap .NET MAUI - 2023 Recap

A blog about android developement

In this video, we will see the recap of .NET MAUI articles post on 2023. Supercharge your .NET MAUI projects by referring this articles.

DEV EXPRESS CHARTS IN .NET MAUI

December 04, 2023

Read More

Lottie animations in .NET MAUI

November 19, 2023

Read More

Transforming Labels into Hyperlinks with .NET MAUI

November 12, 2023

Read More

Mastering MVVM: A Deep Dive into .NET MAUI with MVVM Toolkit

October 28, 2023

Read More

Dev Express - Data Grid Control for .NET MAUI (Lifetime - Free plugin)

October 15, 2023

Read More

Data Grid Control for .NET MAUI (Free plugin to Sort, Filter & Show Data)

October 04, 2023

Read More

.NET MAUI - Swipe View

September 17, 2023

Read More

Flyout Page in .NET MAUI

July 21, 2023

Read More

.NET MAUI Barcode Scanner using IRONBARCODE

July 02, 2023

Read More

Dynamic Status Bar in .NET MAUI

June 18, 2023

Read More

Localisation in .NET MAUI

June 12, 2023

Read More

File Picker in .NET MAUI

May 29, 2023

Read More

Toast in .NET MAUI

May 21, 2023

Read More

Avatar View in .NET MAUI Community Toolkit

May 07, 2023

Read More

Signature Pad using .NET MAUI Community Toolkit

April 16, 2023

Read More

.Net MAUI - QR Code Generator

January 05, 2023

Read More

.Net MAUI - Zxing Barcode Scanner

January 10, 2023

Read More

Introduction Supercharge your .NET MAUI projects with Devexpress Charts! This blog will explain you how to implement the chart in...

DEV EXPRESS CHARTS IN .NET MAUI DEV EXPRESS CHARTS IN .NET MAUI

A blog about android developement

Introduction

Supercharge your .NET MAUI projects with Devexpress Charts! This blog will explain you how to implement the chart in .NET MAUI projects using Dev express, a life time free plugin. This plugin has many customisations and will directly skip into the implementation part.


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugin:

  • Library Requirement: The Dev express's nuget link should be mapped as a package source and we need to install "DevExpress.Maui.Charts" into our project.
  • Installation via NuGet: Obtain the Charts library by searching for "DevExpress.Maui.Charts" in the NuGet Package Manager.
  • User Interface Guidance: Open the NuGet Package Manager interface to facilitate the installation process.
  • Visual Confirmation: The library, once searched, should appear as "DevExpress.Maui.Charts" in the NuGet interface.

Implementation

  • First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Chart Library.
    using DevExpress.Maui;
    .UseDevExpress()
  • Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you).
    xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
  • Then, remove the default content and add an instance of the ChartView class to the page.
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
                 x:Class="ScatterChartGetStarted.MainPage">
        <dxc:ChartView/>
    </ContentPage>
  • Consider removing the event handlers from the code-behind for the default content. It is advisable to eliminate default styles (such as fonts, colors, and other settings) in the App.xaml file as well.
  • In this instance, the chart features line series displaying the annual GDP for three countries. Generate a ViewModel.cs file that includes the following classes:
    public class ViewModel {
        public CountryGdp GdpValueForUSA { get; }
        public CountryGdp GdpValueForChina { get; }
        public CountryGdp GdpValueForJapan { get; }
    
        public ViewModel() {
            GdpValueForUSA = new CountryGdp(
                "USA",
                new GdpValue(new DateTime(2020, 1, 1), 20.93),
                new GdpValue(new DateTime(2019, 1, 1), 21.43),
                new GdpValue(new DateTime(2018, 1, 1), 20.58),
                new GdpValue(new DateTime(2017, 1, 1), 19.391),
                new GdpValue(new DateTime(2016, 1, 1), 18.624),
                new GdpValue(new DateTime(2015, 1, 1), 18.121),
                new GdpValue(new DateTime(2014, 1, 1), 17.428),
                new GdpValue(new DateTime(2013, 1, 1), 16.692),
                new GdpValue(new DateTime(2012, 1, 1), 16.155),
                new GdpValue(new DateTime(2011, 1, 1), 15.518),
                new GdpValue(new DateTime(2010, 1, 1), 14.964)
            );
            GdpValueForChina = new CountryGdp(
                "China",
                new GdpValue(new DateTime(2020, 1, 1), 14.72),
                new GdpValue(new DateTime(2019, 1, 1), 14.34),
                new GdpValue(new DateTime(2018, 1, 1), 13.89),
                new GdpValue(new DateTime(2017, 1, 1), 12.238),
                new GdpValue(new DateTime(2016, 1, 1), 11.191),
                new GdpValue(new DateTime(2015, 1, 1), 11.065),
                new GdpValue(new DateTime(2014, 1, 1), 10.482),
                new GdpValue(new DateTime(2013, 1, 1), 9.607),
                new GdpValue(new DateTime(2012, 1, 1), 8.561),
                new GdpValue(new DateTime(2011, 1, 1), 7.573),
                new GdpValue(new DateTime(2010, 1, 1), 6.101)
            );
            GdpValueForJapan = new CountryGdp(
                "Japan",
                new GdpValue(new DateTime(2020, 1, 1), 4.888),
                new GdpValue(new DateTime(2019, 1, 1), 5.082),
                new GdpValue(new DateTime(2018, 1, 1), 4.955),
                new GdpValue(new DateTime(2017, 1, 1), 4.872),
                new GdpValue(new DateTime(2016, 1, 1), 4.949),
                new GdpValue(new DateTime(2015, 1, 1), 4.395),
                new GdpValue(new DateTime(2014, 1, 1), 4.850),
                new GdpValue(new DateTime(2013, 1, 1), 5.156),
                new GdpValue(new DateTime(2012, 1, 1), 6.203),
                new GdpValue(new DateTime(2011, 1, 1), 6.156),
                new GdpValue(new DateTime(2010, 1, 1), 5.700)
            );
        }
    }
    
    public class CountryGdp {
        public string CountryName { get; }
        public IList<GdpValue> Values { get; }
    
        public CountryGdp(string country, params GdpValue[] values) {
            this.CountryName = country;
            this.Values = new List<GdpValue>(values);
        }
    }
    
    public class GdpValue {
        public DateTime Year { get; }
        public double Value { get; }
    
        public GdpValue(DateTime year, double value) {
            this.Year = year;
            this.Value = value;
        }
    }
  • In the MainPage.xaml file, incorporate three LineSeries objects into the ChartView.Series collection. To establish a connection between the series and data, assign each LineSeries object's Data property to a SeriesDataAdapter object. Utilize the adapter's properties to indicate the data source and fields containing arguments and values for each series.
  • Additionally, define a local XAML namespace referring to a CLR namespace encompassing the view model. Subsequently, employ the page's BindingContext property to link the view model with the view.
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
                 xmlns:dxc="clr-namespace:DevExpress.Maui.Charts;assembly=DevExpress.Maui.Charts"
                 xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
                 ios:Page.UseSafeArea="True"
                 xmlns:local="clr-namespace:MauiDevExpress"
                 x:Class="MauiDevExpress.MainPage">
        <ContentPage.BindingContext>
            <local:ViewModel/>
        </ContentPage.BindingContext>
        <dxc:ChartView>
            <dxc:ChartView.Series>
                <dxc:LineSeries DisplayName="{Binding GdpValueForUSA.CountryName}">
                    <dxc:LineSeries.Data>
                        <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForUSA.Values}"
                                               ArgumentDataMember="Year">
                            <dxc:ValueDataMember Type="Value" Member="Value"/>
                        </dxc:SeriesDataAdapter>
                    </dxc:LineSeries.Data>
                </dxc:LineSeries>
    
                <dxc:LineSeries DisplayName="{Binding GdpValueForChina.CountryName}">
                    <dxc:LineSeries.Data>
                        <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForChina.Values}"
                                               ArgumentDataMember="Year">
                            <dxc:ValueDataMember Type="Value" Member="Value"/>
                        </dxc:SeriesDataAdapter>
                    </dxc:LineSeries.Data>
                </dxc:LineSeries>
    
                <dxc:LineSeries DisplayName="{Binding GdpValueForJapan.CountryName}">
                    <dxc:LineSeries.Data>
                        <dxc:SeriesDataAdapter DataSource="{Binding GdpValueForJapan.Values}"
                                               ArgumentDataMember="Year">
                            <dxc:ValueDataMember Type="Value" Member="Value"/>
                        </dxc:SeriesDataAdapter>
                    </dxc:LineSeries.Data>
                </dxc:LineSeries>
            </dxc:ChartView.Series>
        </dxc:ChartView>
    </ContentPage>
  • Configure the X-axis to display labels for years by assigning a DateTimeAxisX object with the specified settings to the ChartView.AxisX property.
    <dxc:ChartView> <dxc:ChartView.AxisX>
        <dxc:DateTimeAxisX MeasureUnit="Year" GridAlignment="Year"
        GridSpacing="2"/> </dxc:ChartView.AxisX> </dxc:ChartView>
  • Configure the title and labels on the Y-axis. Set the ChartView.AxisY property to a NumericAxisY object and specify this object’s Title and Label properties.
    <dxc:ChartView> 
    <!-- The X-axis config is here. -->
        <dxc:ChartView.AxisY>
            <dxc:NumericAxisY>
                <dxc:NumericAxisY.Title>
                    <dxc:AxisTitle Text="Trillions of US$">
                        <dxc:AxisTitle.Style>
                            <dxc:TitleStyle>
                                <dxc:TitleStyle.TextStyle>
                                    <dxc:TextStyle Size="16"/>
                                </dxc:TitleStyle.TextStyle>
                            </dxc:TitleStyle>
                        </dxc:AxisTitle.Style>
                    </dxc:AxisTitle>
                </dxc:NumericAxisY.Title>
                <dxc:NumericAxisY.Label>
                    <dxc:AxisLabel TextFormat="#.#" Position="Inside"/>
                </dxc:NumericAxisY.Label>
            </dxc:NumericAxisY>
        </dxc:ChartView.AxisY>
    </dxc:ChartView>
  • Configure the legend position and orientation. Set the ChartView.Legend property to a Legend object, and specify this object’s properties as follows:
    <dxc:ChartView>
        <dxc:ChartView.Legend>
            <dxc:Legend VerticalPosition="TopOutside" 
                        HorizontalPosition="Center" 
                        Orientation="LeftToRight"/>
        </dxc:ChartView.Legend>
    </dxc:ChartView>
  • Establish the chart to showcase a series point hint as a crosshair cursor by setting the ChartView.Hint property to a Hint object and assigning a CrosshairHintBehavior object to Hint.Behavior. Subsequently, define the hint's content, data format, and visibility options. Set the LineSeries.HintOptions property to a SeriesCrosshairOptions object with the specified settings.
    <ContentPage.Resources>
        <dxc:SeriesCrosshairOptions x:Key="lineSeriesHintOptions"
                                    PointTextPattern="{}{S}: {V}M"
                                    ShowInLabel="True"
                                    AxisLabelVisible="True"
                                    AxisLineVisible="True"/>
    </ContentPage.Resources>
    <dxc:ChartView>
        <dxc:ChartView.Hint>
            <dxc:Hint>
                <dxc:Hint.Behavior>
                    <dxc:CrosshairHintBehavior GroupHeaderTextPattern="{}{A$YYYY}" 
                                               MaxSeriesCount="3"/>
                </dxc:Hint.Behavior>
            </dxc:Hint>
        </dxc:ChartView.Hint>
    
        <dxc:ChartView.Series>
            <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
                <!--Series Data-->
            </dxc:LineSeries>
            <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
                <!--Series Data-->
            </dxc:LineSeries>
            <dxc:LineSeries HintOptions="{StaticResource lineSeriesHintOptions}">
                <!--Series Data-->
            </dxc:LineSeries>
        </dxc:ChartView.Series>    
    </dxc:ChartView>
  • Set the LineSeries.MarkersVisible property to True to display point markers. To change the line series appearance, set the LineSeries.Style property to a LineSeriesStyle object. This object’s Stroke, StrokeThickness, MarkerSize, and MarkerStyle properties allow you to configure the appearance of the series line and point markers.
    <dxc:LineSeries MarkersVisible="True">
        <!--Series Data-->
        <dxc:LineSeries.Style>
            <dxc:LineSeriesStyle Stroke="#7145a7" StrokeThickness="2" MarkerSize="8">
                <dxc:LineSeriesStyle.MarkerStyle>
                    <dxc:MarkerStyle Fill="#7145a7"/>
                </dxc:LineSeriesStyle.MarkerStyle>
            </dxc:LineSeriesStyle>
        </dxc:LineSeries.Style>
    </dxc:LineSeries>

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction Supercharge your .NET MAUI projects with Lottie animations! Imagine it as the magic wand for your app's visuals....

Lottie animations in .NET MAUI Lottie animations in .NET MAUI

A blog about android developement

Introduction

Supercharge your .NET MAUI projects with Lottie animations! Imagine it as the magic wand for your app's visuals. Thanks to Adobe After Effects, Lottie speaks a special language called JSON, making animations a breeze. Meet SkiaSharp, a Microsoft buddy that helps Lottie shine in .NET MAUI, making your app look cool without the complexity. Learn the ropes in our beginner-friendly guide! Add a dash of Lottie, sprinkle in some JSON magic, and watch your app come to life!


Top advantages of Lottie Animations:

  • Vector-based Adaptability: Lottie animations, being vector-based, ensure seamless scalability without compromising resolution.
  • Reduced File Size: Compared to formats like GIF or MP4, Lottie files boast significantly smaller sizes while maintaining top-notch quality.

Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugin:

  • Library Requirement: SkiaSharp library is essential for displaying Lottie animations.
  • Installation via NuGet: Obtain the SkiaSharp library by searching for "SkiaSharp.Extended.UI.Maui" in the NuGet Package Manager.
  • Enable Prerelease: Ensure the "Include prerelease" flag is enabled during installation, as MAUI support is currently in prerelease.
  • User Interface Guidance: Open the NuGet Package Manager interface to facilitate the installation process.
  • Visual Confirmation: The library, once searched, should appear as "SkiaSharp.Extended.UI.Maui" in the NuGet interface.

Implementation

  • First, we need to open "MauiProgram.cs" and include the following namespace and line to allow the app to use the Lottie Animations.
    using SkiaSharp.Views.Maui.Controls.Hosting;
    .UseSkiaSharp()
  • Open MainPage.xaml file and add the following namespace. (the page will be replaced according to you)
    xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"
  • Unlocking the magic of Lottie animations in your .NET MAUI app is a breeze! If you have JSON files, just add them to the Resources\Raw subfolder. For web-hosted animations, effortlessly consume them by passing the URI to the Lottie view. Explore the treasure trove of free and paid animations on Lottiefiles.com, a popular source for dynamic visuals. In our example, we'll use a JSON animation from the Lottie library repository, already included in the code for your convenience. Feel free to switch it up with your preferred animation!
  • We need to add the animation to the Raw folder: Go to Resources ➡ Raw ➡ Right click add ➡ Existing files ➡ animation.json (walking_batman.json in my sample).
  • <skia:SKLottieView RepeatCount="-1"
                               RepeatMode="Reverse"
                               Source="walking_batman.json" 
                               HeightRequest="400"
                               WidthRequest="400" />
  • <skia:SKLottieView>: This is the declaration of the SKLottieView, a specialized view for rendering Lottie animations using the SkiaSharp library.
  • RepeatCount="-1": The RepeatCount attribute determines how many times the animation should repeat. A value of -1 means it will repeat indefinitely.
  • RepeatMode="Reverse": The RepeatMode attribute sets the behavior of the animation when it repeats. In this case, "Reverse" means the animation will play in reverse each time it repeats.
  • Source="walking_batman.json": Specifies the source of the Lottie animation. In this example, the animation is loaded from a file named "Girl.json" located in the project.
  • HeightRequest="400" and WidthRequest="400": These attributes set the desired height and width of the SKLottieView, in this case, both set to 400. This property is very important to visualize Lottie animation.
  • This code essentially integrates a Lottie animation (from the "walking_batman.json" file) into your Xamarin.Forms application, configuring its repeat behavior and dimensions. Adjust these attributes based on your specific animation and layout requirements.


Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction Our phones and computers are like magic doors to the world, thanks to the apps we use every day. These apps show us ...

Transforming Labels into Hyperlinks with .NET MAUI Transforming Labels into Hyperlinks with .NET MAUI

A blog about android developement

Introduction

Our phones and computers are like magic doors to the world, thanks to the apps we use every day. These apps show us stuff using a mix of words, pictures, and special links that let us explore more. 🌐 Links, especially, make it easy for us to dive deep into things. In this guide, we'll learn how to add these special links to your .NET MAUI apps, making it more fun for people to check out what you have to share. Join us on this enlightening journey as we unravel the secrets of Transforming Labels into Hyperlinks with .NET MAUI.


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Implementation

  • In this step, we'll include two labels within the horizontal layout to position them closely to each other.
  • The first text will serve as regular text, representing the standard label.
  • The second text will function as a hyperlink, characterized by blue text color and underlined as text decoration.
  • The following code snippet will help in grasping the concept more clearly.
  • <HorizontalStackLayout>
    	<Label
    		Text="To know more about .NET MAUI "
    		SemanticProperties.HeadingLevel="Level1"
    		FontSize="Default"
    		HorizontalOptions="Center" />
    
    	<Label
    		Text="Visit Here"
    		TextDecorations="Underline"
    		TextColor="Blue"
    		SemanticProperties.HeadingLevel="Level1"
    		FontSize="Default"
    		HorizontalOptions="Center" >
    		<Label.GestureRecognizers>
    			<TapGestureRecognizer Tapped="OnUrlClicked"/>
    		</Label.GestureRecognizers>
    	</Label>
    </HorizontalStackLayout>
  • Incorporate the tap gesture event "OnUrlClicked" to open the specified URL link, as demonstrated below.
    private async void OnUrlClicked(object sender, TappedEventArgs e)
    {
    	await Launcher.OpenAsync("https://www.androidmads.info/search/label/.net%20maui");
    }

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

Introduction Welcome to our newest blog post, where we explore the vibrant realm of MVVM (Model-View-ViewModel) architecture usin...

Mastering MVVM: A Deep Dive into .NET MAUI with MVVM Toolkit Mastering MVVM: A Deep Dive into .NET MAUI with MVVM Toolkit

A blog about android developement

Introduction

Welcome to our newest blog post, where we explore the vibrant realm of MVVM (Model-View-ViewModel) architecture using the cutting-edge MVVM Toolkit in .NET MAUI. In this comprehensive guide, we will unravel the intricacies of MVVM and demonstrate how the MVVM Toolkit in .NET MAUI empowers developers to create robust, responsive, and easily maintainable cross-platform mobile applications. Join us on this enlightening journey as we unravel the secrets of mastering MVVM in the context of .NET MAUI.


Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugin:

In this steps, we will see the steps to install "MVVM Toolkit" in .NET MAUI project:
  • Access NuGet Package Manager: In Visual Studio, right-click on your .NET MAUI project in the Solution Explorer. From the context menu, select "Manage NuGet Packages."
  • Search for "CommunityToolkit.Mvvm": In the NuGet Package Manager, click on the "Browse" tab. In the search bar, type "CommunityToolkit.Mvvm" and hit Enter. The package should appear in the search results.
  • Select and Install the Package: Once you find "CommunityToolkit.Mvvm" in the search results, click on it to select it. Ensure you choose the appropriate version compatible with your .NET MAUI project. Click on the "Install" button to begin the installation process.
  • Accept License Agreement: During the installation, you may be prompted to accept the license agreement. Review the terms and conditions and click on the "Accept" button to proceed.
  • Wait for Installation to Complete: Visual Studio will download and install the package along with its dependencies. This process may take a few moments, depending on your internet connection speed.
  • Verify Installation: After the installation is complete, verify that there are no error messages in the Output window. This indicates a successful installation of the package.

Implementation

View Model

  • In this step, we create a ViewModel that inherits from the ObservableObject class. This inheritance is pivotal because ObservableObject implements the INotifyPropertyChanged interface. By doing so, we gain the ability to trigger the PropertyChanged event, a vital mechanism enabling the notification of property value changes to subscribers, primarily the UI. This synchronization is fundamental for effective data binding, ensuring seamless coordination between the user interface and the underlying ViewModel.

    For example:
    public partial class ItemEntryPageModel : ObservableObject
    {
        [ObservableProperty]
        private int _id;
        [ObservableProperty]
    	private string _name;
    	[ObservableProperty]
    	private string _description;
    
        [ICommand]
    	public async void Save()
    	{
            await Application.Current.MainPage.DisplayAlert("MAUI MVVM Sample", "Item Saved Successfully", "OK");
        }
    }
  • When we use the [ObservableProperty] attribute, properties can send automatic alerts when they change. This is important for connecting data and updating the user interface (UI) when properties change. When you apply the [ObservableProperty] attribute to a property, it does a lot of necessary coding work behind the scenes. It sets up the code needed to tell other parts of the program when a property changes. This attribute saves time because you don't have to write all this code manually. For Example: "_description" & "_name" produces "Description" & "Name" respectively.
  • The [ICommand] implementation is a way to connect methods or actions in the app with what the user sees on the screen. For instance, it can create a command called SaveCommand that's linked to the Save method. This linking is crucial for making sure that when a user does something, like clicking a button, the right action happens in the app.

View

  • Finally, we will design the View, where we create the user interface using XAML. Here, we connect the UI elements to the ViewModel properties using data binding expressions.
  • This connection enables the View to show and modify task data in real-time, ensuring a dynamic and responsive user experience.
  • <?xml version="1.0" encoding="utf-8" ?>
    <ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 x:Class="MauiMVVM.Views.ItemEntryPage"
                 Title="Item Entry">
        <StackLayout Margin="20"
                     Spacing="10">
            <VerticalStackLayout>
                <Label Text="Name:"
                       FontSize="16"/>
                <Entry Text="{Binding Name}" 
                       Placeholder="Item Name"/>
            </VerticalStackLayout>
    
            <VerticalStackLayout>
                <Label Text="Description:"
                       FontSize="16"/>
                <Entry Text="{Binding Description}" 
                       Placeholder="Item Description"/>
            </VerticalStackLayout>
    
    
            <Button x:Name="btn_save" 
                    Text="Save"
                    Command="{Binding SaveCommand}"/>
        </StackLayout>
    </ContentPage>
  • In .NET MAUI, data binding makes sure that data stays in sync between the ViewModel and the View without manual intervention.
  • For instance, we can link a task's title in the ViewModel to a label in the View. When the title changes, it instantly updates in the UI.
  • This automatic synchronization simplifies UI updates and eliminates the need for handling events manually.

Wire-up View and View Model

  • The created view and view model should be added in MauiProgram.cs like below.
    var builder = MauiApp.CreateBuilder();
    		builder
    			.UseMauiApp<App>()
    			.ConfigureFonts(fonts =>
    			{
    				fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
    				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    			});
    
    #if DEBUG
    		builder.Logging.AddDebug();
    #endif
            builder.Services.AddTransient<ItemEntryPage>();
            builder.Services.AddTransient<ItemEntryPageModel>();
    
            return builder.Build();

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

References

To learn more about Data binding and MVVM

Introduction Welcome to our newest blog post, where we explore the vibrant realm of app development with .NET MAUI! In this deta...

Dev Express - Data Grid Control for .NET MAUI (Lifetime - Free plugin) Dev Express - Data Grid Control for .NET MAUI (Lifetime - Free plugin)

A blog about android developement

Introduction

Welcome to our newest blog post, where we explore the vibrant realm of app development with .NET MAUI! In this detailed guide, we dive into the intricacies of the "DataGrid Control for .NET MAUI," an outstanding free plugin crafted to simplify your data management process. Uncover how this plugin enables developers to effortlessly sort, filter, and present data, elevating user experiences across cross-platform applications.


Telerik, SyncFusion, and DevExpress offer paid licenses, often accompanied by trial versions or community licenses under specific terms. However, DevExpress stands out by providing a set of controls that you can use absolutely free!. As the demand for seamless data visualization and interaction grows, this free plugin emerges as a game-changer for .NET MAUI enthusiasts.


How can I obtain a free license for DevExpress?

  • Visit the following link FREE Xamarin UI Controls
  • Click "GET IT FREE" button in the screen, will redirect to another page.
  • In this page, you need to enter your details and valid mail id.
  • After the successful submission, the DevExpress team will send the nuget api link to the entered email id.

Quick Links:


Project Setup:

  • Launch Visual Studio 2022, and in the start window click Create a new project to create a new project.
  • In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:
  • In the configure your new project window, name your project, choose a suitable location for it, and click the Next button:
  • In the Additional information window, click the Create button:
  • Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugin:

In this steps, we will see the steps to install "DevExpress Grid" in Visual Studio 2022:
  • Access NuGet Package Manager: In Visual Studio, right-click on your .NET MAUI project in the Solution Explorer. From the context menu, select "Manage NuGet Packages."
  • Search for "DevExpress.XamarinForms.DataGrid": In the NuGet Package Manager, click on the "Browse" tab. In the search bar, type "DevExpress.XamarinForms.DataGrid" and hit Enter. The package should appear in the search results.
  • Select and Install the Package: Once you find "DevExpress.XamarinForms.DataGrid" in the search results, click on it to select it. Ensure you choose the appropriate version compatible with your .NET MAUI project. Click on the "Install" button to begin the installation process.
  • Accept License Agreement: During the installation, you may be prompted to accept the license agreement. Review the terms and conditions and click on the "Accept" button to proceed.
  • Wait for Installation to Complete: Visual Studio will download and install the package along with its dependencies. This process may take a few moments, depending on your internet connection speed.
  • Verify Installation: After the installation is complete, verify that there are no error messages in the Output window. This indicates a successful installation of the package.

Implementation

Open MauiProgram.cs file, and add ".UseDevExpress()" in builder like below

var builder = MauiApp.CreateBuilder();
builder
.UseMauiApp<App>()
.UseDevExpress()
.ConfigureFonts(fonts =>
{
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
});

Add Namespace in XAML:

In your .NET MAUI XAML files where you intend to use the Dev Express - DataGrid, make sure to add the appropriate XML namespace. For example:

xmlns:dxg="clr-namespace:DevExpress.Maui.DataGrid;assembly=DevExpress.Maui.DataGrid"
xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
xmlns:dxc="clr-namespace:DevExpress.Maui.Controls;assembly=DevExpress.Maui.Controls"

Adjust the namespace and assembly name based on the specifics of the DataGrid component you installed.


Implement DataGrid in Your XAML:

You can now implement the DataGrid control in your XAML files using the namespace you added. For example:

<dg:DataGrid RefreshingEnabled="True"
             BackgroundColor="White"
                     IsRefreshing="{Binding Refreshing}"
                     PullToRefreshCommand="{Binding OnDataGridRefreshCommand}"
                     SelectionEnabled="True"
                     SelectedItem="{Binding SelectedItem}"
                     RowHeight="70"
                     HeaderHeight="70"
                     ItemsSource="{Binding Items}"
                     HeaderBackground="Red">

    <dg:DataGrid.NoDataView>
        <Label Text="Nothing to see here" HorizontalOptions="Center" VerticalOptions="Center" />
    </dg:DataGrid.NoDataView>
    <dg:DataGrid.Columns>
        <dg:DataGridColumn Title="Image" PropertyName="Image" Width="150" SortingEnabled="False">
            <dg:DataGridColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding}" HorizontalOptions="Center" VerticalOptions="Center"
                           Aspect="AspectFit" HeightRequest="60" />
                </DataTemplate>
            </dg:DataGridColumn.CellTemplate>
        </dg:DataGridColumn>
        <dg:DataGridColumn Title="Name" PropertyName="Name" Width="100"/>
        <dg:DataGridColumn Title="Location" PropertyName="Location"  Width="100"/>
        <dg:DataGridColumn Title="Population" PropertyName="Population"  Width="100"/>
        <dg:DataGridColumn Title="Latitude" PropertyName="Latitude"  Width="100"/>
        <dg:DataGridColumn Title="Longitude" PropertyName="Longitude"  Width="100"/>
    </dg:DataGrid.Columns>
    <dg:DataGrid.RowsBackgroundColorPalette>
        <dg:PaletteCollection>
            <Color>#e1e1e1</Color>
            <Color>#ffffff</Color>
        </dg:PaletteCollection>
    </dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>

The above code snippet represents a DataGrid component in .NET MAUI application. Let's break down the properties and their meanings in the context of this DataGrid:

  • ItemsSource="{Binding Items}": Binds the DataGrid to a collection of items represented by the "Items" property in the ViewModel. Each item in this collection corresponds to a row in the DataGrid.
  • dxg:DataGridView.Columns: Specifies the columns to be displayed in the DataGrid.
  • dxg:TemplateColumn: We can use the custom templated column
  • dxg:TextColumn: Used to display the values in the column
  • dxg:DateColumn: Used to display the date values with datepicker selection in the column
  • dxg:ComoboxColumn: Used to display the values with dropdown selection in the column
  • dxg:CheckBoxColumn : Used to display the boolen selection with checkbox in the column

The below code snippet configures a DataGrid component with specific properties and templates, allowing users to view and interact with data in a visually appealing manner.


The Code Behind or MVVM view model properties are similar to listview control and no specific code required

using System.Collections.ObjectModel;
using System.Net.Http;
using System.Net.Http.Json;

namespace MauiDevExpress
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            BindingContext = this;
            InitializeComponent();
        }

        protected override async void OnAppearing()
        {
            base.OnAppearing();
            await Task.Delay(2000);
            LoadData();
        }

        private void LoadData()
        {
            var monkeys = new List<Monkey>
            {
                new Monkey
                {
                    Name = "Chimpanzee",
                    Location = "Africa",
                    Details = "Chimpanzees are intelligent primates known for their problem-solving abilities.",
                    Image = "chimpanzee.jpg",
                    Population = 150000,
                    Latitude = -1.2921f,
                    Longitude = 36.8219f,
                    BirthDate = new DateTime(2000, 1, 15),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Orangutan",
                    Location = "Borneo",
                    Details = "Orangutans are great apes native to the rainforests of Borneo and Sumatra.",
                    Image = "orangutan.jpg",
                    Population = 70000,
                    Latitude = 1.3521f,
                    Longitude = 110.4647f,
                    BirthDate = new DateTime(2005, 3, 20),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Gorilla",
                    Location = "Africa",
                    Details = "Gorillas are the largest primates and share about 98.3% of their DNA with humans.",
                    Image = "gorilla.jpg",
                    Population = 100000,
                    Latitude = -0.2280f,
                    Longitude = 15.8277f,
                    BirthDate = new DateTime(1998, 7, 10),
                    AccessLevel = AccessLevel.Admin
                },
                // Add more monkey instances with BirthDate and AccessLevel properties
                new Monkey
                {
                    Name = "Howler Monkey",
                    Location = "South America",
                    Details = "Howler monkeys are known for their loud vocalizations that can be heard up to 3 miles away.",
                    Image = "howler_monkey.jpg",
                    Population = 50000,
                    Latitude = -14.2350f,
                    Longitude = -51.9253f,
                    BirthDate = new DateTime(2002, 5, 3),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Capuchin Monkey",
                    Location = "Central and South America",
                    Details = "Capuchin monkeys are highly intelligent and are often used in scientific research.",
                    Image = "capuchin_monkey.jpg",
                    Population = 30000,
                    Latitude = 4.7100f,
                    Longitude = -74.0721f,
                    BirthDate = new DateTime(2007, 9, 18),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Spider Monkey",
                    Location = "Central and South America",
                    Details = "Spider monkeys are known for their long limbs and prehensile tail, which they use to swing through trees.",
                    Image = "spider_monkey.jpg",
                    Population = 25000,
                    Latitude = 14.634915f,
                    Longitude = -90.506882f,
                    BirthDate = new DateTime(1999, 11, 7),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Mandrill",
                    Location = "Africa",
                    Details = "Mandrills are colorful monkeys found in the rainforests of Central Africa.",
                    Image = "mandrill.jpg",
                    Population = 10000,
                    Latitude = 0.2280f,
                    Longitude = 14.8277f,
                    BirthDate = new DateTime(2004, 2, 14),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Tarsier",
                    Location = "Southeast Asia",
                    Details = "Tarsiers are small primates known for their big eyes and unique hunting skills.",
                    Image = "tarsier.jpg",
                    Population = 5000,
                    Latitude = 9.3275f,
                    Longitude = 123.3076f,
                    BirthDate = new DateTime(2001, 8, 22),
                    AccessLevel = AccessLevel.User
                },
                new Monkey
                {
                    Name = "Golden Lion Tamarin",
                    Location = "Brazil",
                    Details = "Golden lion tamarins are endangered primates with striking orange fur and manes.",
                    Image = "golden_lion_tamarin.jpg",
                    Population = 1500,
                    Latitude = -22.9068f,
                    Longitude = -43.1729f,
                    BirthDate = new DateTime(2006, 12, 5),
                    AccessLevel = AccessLevel.Admin
                },
                new Monkey
                {
                    Name = "Proboscis Monkey",
                    Location = "Borneo",
                    Details = "Proboscis monkeys have large noses and are excellent swimmers.",
                    Image = "proboscis_monkey.jpg",
                    Population = 700,
                    Latitude = 2.4604f,
                    Longitude = 115.3502f,
                    BirthDate = new DateTime(2003, 4, 30),
                    AccessLevel = AccessLevel.User
                },
                // Add more monkey instances as needed
                // ...
            };

            dxg.ItemsSource = new ObservableCollection<Monkey>(monkeys);
        }


        public class Monkey
        {
            public string Name { get; set; }
            public string Location { get; set; }
            public string Details { get; set; }
            public string Image { get; set; }
            public int Population { get; set; }
            public float Latitude { get; set; }
            public float Longitude { get; set; }
            public AccessLevel AccessLevel { get; set; }
            public DateTime BirthDate { get; set; }
        }
        public enum AccessLevel
        {
            Admin,
            User
        }
    }

}

Full Code:

Demo

Download Code:

You can download the code from GitHub. If you have any doubts, feel free to post a comment. If you liked this article, and it is useful to you, do like, share the article & star the repository on GitHub.

References

To learn more about DevExpress DataGrid