MSDEVBUILD Blog by Suthahar Jegatheesan, here I am sharing Cloud, Mobile, and Microsoft AI-related real-time use of video, the language is English and Tamil. Find Microsoft MVP here
📰 English: https://www.youtube.com/channel/UCwoWf6zryMFwEyOh2UYLSwA
📰 Tamil : https://www.youtube.com/channel/UCPwZsK00EZDfIrj5DCYyuPA
📄 Website: https://www.msdevbuild.com
👨💻 GitHub: https://github.com/jssuthahar
🦜 Twitter: https://twitter.com/jssuthahar
🦜 About me - http://suthahar.msdevbuild.com/
Managing images, icons, and splash screens cross-platform is more challenging since we need to manage assert and resource folders specific to each platform, as well as image folders for each resolution.
During testing, we received feedback from our QA friends that the images were not working on this device or at this resolution. Hopefully, all of you have encountered this problem in the past, and MAUI application has released great solutions for this issue.
In your .NET MAUI application, managing your resources is much simpler than in Xamarin and other hybrid applications, as it is not as complicated. Resources refers to the main topic of managing images. With NET MAUI, you can stop worrying about scaling and resizing your images to fit every platform and screen resolution. Better yet, you won't need to keep track of the website that generates everything for you. .NET MAUI will take care of the process for you at build time; just add your images to your project and make sure the build actions are set up. The purpose of this article is to demonstrate how the MAUI application manages its resources. The ultimate design goal of one single project for all supported platforms the way to manage resources from one place. Be it fonts, images, splash screen, or raw assets. It is an incredible feature that MAUI introduced using SVG files and PNG files and have them automatically resized for all the different resolutions when they are uploaded. Regardless if you've already used ResizetizerNT in your Xamarin project, MAUI will do the same internally while the build process is running in the background. Resource files should be placed in the Resources folder of your. NET MAUI app project, or in child folders of the Resources folder, and their build action should be correctly set. The following sections will be explained one by one as we go along.
Android resource naming rules is that image filenames must start with a letter character, end with a letter character, and contain only alphanumeric characters or underscores, so make sure your image name follows the same rules
The .NET MAUI app converts SVG files to PNG files. When adding an SVG file, reference it from XAML or C# with a .png extension. You should reference the SVG file in your project file as a best practice.
The values for the Foreground Color and Background Color can be specified either in hexadecimal or as a .NET MAUI color. For example, Color="Green" is valid.
MAUI Images
Images can be specified in one location in your app project, and at build time they are automatically resized and added to your app package. By doing this, you avoid manually duplicating and naming images per platform.
First Step, You can add images to your app project by dragging them into the Resources/Images folder of the app project which will allow you to add them to the project.
In the next step, you will be able to ensure that MauiImage build action is set automatically, if not set, you can ensure that the build action should be MAUIImage by selecting it from the Image Property.
MAUI Image Guideline
The default MAUIImage tag, which includes all images, can be found in the.csproj file, and you can also specify the image name. The wildcard character (*) indicates that all files in the folder are considered to be of the specified resource type.
You can also add images to other folders(not only Image folder). In this scenario, MauiImage must be manually set in the Properties window.
MAUI Image Property
The base size is specified with the BaseSize="W,H" attribute, where W is the width of the icon and H is the height of the icon. The value specified as the base size must be divisible by 8. The following example sets the base size.
A foreground image can be tinted, i.e., by specifying a color with the TintColor attribute, a color will be applied to the foreground image. Here is an example of how the foreground image can be tinted using the following code:
The background image used in composing the app icon can be recolored using the Color attribute on the <MauiImage>. The following example sets the background color of the app icon to red
You can make use of your icon, image, and splash screen in the above property as specified above, so take note of that information.
MAUI Icon
In most apps, there is a logo icon that represents the app, and that icon appears in different places. on iOS the app icon appears on the Home screen and throughout the system, such as in Settings, notifications, and search results, and in the App Store. On Android, the app icon appears as a launcher icon and throughout the system, such as on the action bar, notifications, and in the Google Play Store. On Windows, the app icon appears in the app list in the start menu, the taskbar, the app's tile, and in the Microsoft Store. In a .NET Multi-platform App UI (.NET MAUI) app project, an app icon can be specified in a single location in your app project. At build time, this icon can be automatically resized to the correct resolution for the target platform and device, and added to your app package. This avoids having to manually duplicate and name the app icon on a per platform basis
MAUI Icon Include & ForgroundFile
On the .csproj file, the app icon can be composed of two images, one image representing the background and another representing the foreground.
Include attribute represents the icon background image( must specify)
Foreground attribute represents the foreground image (optional)
Platform specific configuration for MAUI App icon
The project file declares what resources make up the app icon, but you must update the individual platform configurations to reference these icon references. On iPhone, Mac, and Android, the following settings need to be made in the configuration, but Windows does not require any specific configuration
Info.Plist This configuration will be automatically updated in Info.plist if you don't change app icon names, but if you change app icon names, make sure you update the configuration in Info.plist.
The Info.plist file contains a <key>XSAppIconAssets</key> entry, with a corresponding <string> node defined after it. The value of this <string> node follows this format: Assets.xcassets/{image file name}.appiconset The value for { image file name } is derived from the .NET MAUI project file's <MauiIcon> item, specifically the file name defined by the Include attribute, without its path or extension.
Android Manifest The following Android configuration is defined by default, so all you need to do is migrate the application or make any modifications. Make sure the configuration is set correctly.
Use a different MAUI icon per platform
If you want to use different icon resources or settings per platform, add the Condition attribute to the <MauiIcon> item, and query for the specific platform. If the condition is met, the <MauiIcon> item is processed.
Only the first valid <MauiIcon> item is used by .NET MAUI, so all conditional items should be declared first, followed by a default <MauiIcon> item without a condition.
For example, a condition that targets Android would be Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'".
The following XML demonstrates declaring a specific icon for Windows and a fallback icon for all other platforms:
In your project file, the <MauiIcon> item designates the icon to use for your app. You may only have one icon defined for your app. Any subsequent <MauiIcon> items are ignored.
After changing the icon file, you may need to clean the project in Visual Studio. To clean the project, right-click on the project file in the Solution Explorer pane, and select Clean. You also may need to uninstall the app from the target platform you're testing with.
If you don't clean the project and uninstall the app from the target platform, you may not see your new icon.
MAUI Splash Screen
On Android and iOS, .NET Multi-platform App UI (.NET MAUI) apps can display a splash screen while their initialization process completes. The splash screen is displayed immediately when an app is launched, providing immediate feedback to users while app resources are initialized:
In a .NET MAUI app project, a splash screen can be specified in a single location in your app project, and at build time it can be automatically resized to the correct resolution for the target platform and device and added to your app package. This avoids having to manually duplicate and name the splash screen on a per platform basis.
A splash screen can be added to your app project by dragging an image into the Resources\Splash folder of the project, where its build action will automatically be set to MauiSplashScreen. This creates a corresponding entry in your project file as like below screen
At build time, the splash screen can be resized to the correct resolution for the target platform and device. The resulting splash screen is then added to your app package.
Platform specific configuration
The code that's specific to a platform automatically gets added to the code base, but you have to know where it goes and why, it'll help you with the migration process
On Android
the splash screen is added to your app package as Resourcs/values/maui_colors.xml and Resources/drawable/maui_splash_image.xml.
.NET MAUI apps use the Maui.SplashTheme by default, which ensures that a splash screen will be displayed if present. Therefore, you should not specify a different theme in your manifest file or in your MainActivity class
using Android.App; using Android.Content.PM; using Android.OS; namespace NewProjectFile7._0;
On iOS It is not necessary for you to do iOS-specific settings because the build will automatically take care of this for you. the splash screen is added to the app package as a storyboard named MauiSplash.storyboard, which is set as value of the UILaunchStoryboardName key in the app package's Info.plist automatically add UILaunchStoryboardName as a key and string value is MauiSplash
Summary
If you have any further questions regarding MAUI app icon, MAUI splash screen, or MAUI image, please don't hesitate to let me know in the comment section. I hope that this article can help you to understand MAUI app icon, MAUI splash screen, and MAUI image to different mobile platforms. . In case you missed my previous article, you can refer to the links below.
The name MAUI stands for .NET Multi-platform App UI. Many IT companies struggle with deciding whether to migrate from XAMARIN or to start from scratch with a new hybrid application. You should not make any mistakes, better choose to move to MAUI. Prior to migration, you must understand what the main project file and platform specific changes are that differ from XAMARIN. It is not the purpose of this article to explain migration, but you should know before you migrate what the main changes have been to the project files in MAUI. To gain a deeper understanding of MAUI project files, let's follow me one by one in this article Prerequisites Visual Studio 2022 with the MAUI workload installed Xamarin, MAUI Support for Visual Studio Mac As we all know, Microsoft supports MAUI from Visual Studio 2022 latest version in Macs and Windows. Several people asked me if I could install Visual 2022 from my Mac, and if so, could it keep creating/modify Xamarin Forms, and the answer is yes, which means Microsoft continues to support Xamarin for now, so the latest Visual studio 2022 has both Xamairn and MAUI project templates, so if you are starting a new project, choose MAUI as the template, because it has wonderful features.
MAUI Project File A user can build a .NET MAUI application for Android, iOS, macOS, and Windows in one project file. Xamarin Forms uses different project files for Individual platforms. the .NET MAUI application is focused on Android, iOS, macOS, and Windows, simplifying and standardizing the cross-platform development experience for all four platforms. MAUI SDK-style format The .NET SDK is the base SDK for .NET. Projects associated with the other SDKs have access to all the .NET SDK properties. The default .Net Framework project is not SDK style and the default .Net Core, MAUI and .Net Standard project will be SDK style by default, Right click on your project and see the project file Below is the code for the MAUI project file, which is an XML file. The Sdk attribute defines which SDK is targeted. All project-level properties are enclosed within the PropertyGroup node. ItemGroup node holds dependencies, such as Project(s) referenced, NuGet package(s) added, Resource definitions, etc, will check line by line here Multiple Target Platform MAUI is multi-targeting by design, hence the TargetFrameworks list (which is separated by a semicolon).The Target Framework Monikers are all prefixed with net7.0-.The reason for this is that there is only one BCL.The actual platform is then specified (iOS, Android, MacCatalyst, and Windows). Use MAUI & Output Type
OutPutType : This MAUI project will produce an executable (an App) on each of the platforms as the output type.
UseMAUI: UseWPF introduced in .NET Core 3 is familiar to developers with WinForms/WPF backgrounds.Whether or not to include references to MAUI libraries is controlled by the UseMAUI property.The MSBuild pipeline is also altered to correctly process a MAUI project and related files. Instead of referencing NuGet packages, set the UseMAUI property to true to add MAUI packages SingleProject The SingleProject tag represents .NET MAUI's main design goal, multi-targeting. RootNamespace RootNamespace, the root namespace for the types contained within this project.(My Project name - NewProjectFile7._0) ImplicitUsings .NET 6 introduces implicit namespace support for C# projects. To reduce the amount of using directives boilerplate in .NET C# project templates, namespaces are implicitly included by utilizing the global using feature introduced in C# 10. When you create a new .NET 6 and above project it will enable this new property Mobile App Shared Configuration (App manifest) Since we only have one project, we don't have to manage different platform configurations. We are able to configure in one project and we are not required to manage different platform configurations. MAUI Image
MAUI Image is a newly introduced node, which helps in including SVG images and is based on the popular resize component, which resizes the images internally based on the platform.Provides developers with a much easier process for including images across multiple platforms.
In a .NET Multi-platform App UI (.NET MAUI) app project, images can be specified in a single location in your app project, and at build time they can be automatically resized to the correct resolution for the target platform and device, and added to your app package. This avoids having to manually duplicate and name images on a per platform basis. By default, bitmap (non-vector) image formats, including animated GIFs, are not automatically resized by .NET MAUI.
.NET MAUI images can use any of the standard platform image formats, including Scalable Vector Graphics (SVG) files MAUI Icon An app icon can be specified in a single location in your .NET Multi-platform App UI (.NET MAUI) project. Your app package can automatically resize this icon to the appropriate resolution for the target platform and device at build time.
By doing this, it will be possible to avoid having to duplicate and name app icons on a platform-by-platform basis. .NET MAUI does not automatically resize bitmap (non-vector) image formats.
Maui Splash Screen At build time, a splash screen can be automatically resized to the correct resolution for the target platform and device, and added to the app package for a .NET MAUI app project. This eliminates having to duplicate and name splash screens on a platform-by-platform basis.
SVG Image convert to PNG SVG files are converted to PNG files by NET MAUI. When adding an SVG file to your .NET MAUI app project, it should be referenced from XAML or C# with a .png extension. SVG files should only be referenced in project files.
MAUI Mobile Target Version I'll explain this part of the configuration UI screen, select your Root project from solutions and click the Properties afterward.
The Target platform shows all the basic details of a mobile app platform, such as Target .Net Run time, Target mobile OS version, and the Min mobile OS version. You can choose your app's Min and Max target mobile OS version.
MAUI Shared Application Setting On the below screen, you will see that .NET MAUI project settings are shared among all target mobile platforms.
Application Title - It is the name that appears as the Title in installed apps.
Application ID - the unique identifier of the application in reverse domain name format, for example com.msdevbuild.maui.
Application ID (GUID) - The identifier of the application in GUID format.
Application Display Version - The version of the application. This should be a single digit integer. Defaults to 1.
Platform Specific Configuration You can add all your platform specific configurations for iOS, Android, Windows and Mac by selecting the section. This was previously done in a platform-specific project in an target project, but now it can be done in a shared project configuration.
Platform-specific code A .NET MAUI app project contains a Platforms folder, with each child folder representing a platform that .NET MAUI can target, The folders for each platform contain platform-specific resources, and code that starts the app on each platform and there are platform-specific configuration files for every platform, like the App manifest, info.plist, and other configuration files.
Summary I hope that this article helps you to understand how you can create one project for multiple platforms. In case you missed my previous article, you can refer to the links below.
.NET MAUI provides different techniques for local storage, in my previous article, explain preferences. This article will explain how to use secure storage in your mobile iOS, Android, and windows applications.
Secure storage is like a shared preference. It stores data in key and value pairs. The data is encrypted and users a key made from a unique device key to encrypt and decrypt the data stored. The data is stored in a secure storage directory where only the OS can access it.
You must keep in mind Do and Don’t Do things about Secure Storage.
There are no storage limitations for secure storage, best practices, and performance, secure storage may be impacted if you store large amounts of text, as the API was designed to store small amounts of text.
You can store an unlimited number of keys inside
The data gets deleted once the app is uninstalled.
Best practice, you can choose to disable Auto Backup for your entire application, or You can create a custom rule set to exclude Secure Store items from being backed up.
Don’t Do in Secure Storage
Secure storage to store data that should be encrypted and hidden from the user. That data should store only store users' sensitive data such as their API keys and not your server private keys and server connection string. Although data stored in secure storage are encrypted, it isn't entirely secure. Users can root/jailbreak their devices which gives them full control of the OS. There are tools that can intercept keys as they are provided and use them to decrypt the data. The only way to prevent that is to never save the server details and non-user-related data to the user device. You should store it on a server that you can control.
When you try to save the max length string into the Preferences and secure storage to your device, it throws a Memory Exception when Preferences and secure storage data exceed 1.42 MB so don’t try to save a large amount of text, so if you have more than 1.42 MB data size to save it’s better to save use File storage or SQLite database.
Secure Storage VS. preferences
You probably already know about preferences, which is very useful when you want to save non-private information, but where you need to use secure storage, the following key difference will help you to understand.
Getting started with MAUI Secure Storage
The following steps are to create/get / Clear secure storage using.Net MAUI application. The .Net MAUI Secure Storage and ISecureStorage types are available in Microsoft.Maui.Storage namespace.
Secure storage will work on all the platforms iOS, macOS, Android, and windows, Only iOS simulator debugging require extra setup will explain in the last section.
Create New project
You can open visual studio 2022 from your Windows / Mac machine. You must follow the below 3 steps to create a new MAUI application.
Step 1: Select Create a new project
Step 2: Search the MAUI project template or choose Project Type > MAUI from the drop-down.
Step 3: Provide the configuration Details as a project name, Location, and Solutions name.
Namespace
Secure storage is storing data in key-value pairs and can be easily managed via the secure storage class from Microsoft.Maui.Storage namespace, so accesses secure storage add the Microsoft.MAUI. storage namespace
Save Secure Storage
SetAsync method, providing the key and value. it supports strings only. If you want to store other types of data, you can encode them as a string. The most convenient way to do that is probably JSON. You can use JSON serialize and deserialize.
The Mobile Secure storage will work as per the platform-specific; the below section will show how different platforms store the secure storage in the device.
Android Device Secure Storage
Secure Storage uses the preference API and follows the same data persistence with a filename
[YOUR APP Package name ID].microsoft.maui.essential.preferences
However, data is encrypted with the Android EncryptedSharedPreference Class, and the secure storage value is encrypted with AES-256 GCM.
iOS Device Secure Storage
Key Chain is used to store values securely on iOS devices. The SecRecord used to store the value has a Service value set to
DataProtectionProvider is used to encrypt values securely on Windows devices.Encrypted values are stored in ApplicationData.Current.LocalSettings, inside a container with a name of
In the above code snippets, you understood the saved the secure storage string value, in the below statement will get the value from existing secure storage.
await SecureStorage.GetAsync("Existing save Key");
Here you don’t have the option to check the key already available or not, but you can check values there or not using strining.IsnullorEmpty.
Remove and Remove all will use for dropping the Secure Storage key and value, suppose if you are doing any logout or switching to a different user this will help to clear all the Secure storage from your device.
Remove will give the confirmation with the bool return type, this will help us for navigation after confirmation. bool isremoved = SecureStorage.Remove("UserPassword");
Suppose, User tries to log out or switch to different users, the best way to use remove all secure storage
SecureStorage.RemoveAll();
IOS Specific Secure Storage Setup
You must follow the below steps for only IOS simulator
Secure Storage Setup for IOS Simulator
I have received this question from many of them, “I want to use Secure Storage on iOS and Android mobile phones and tablets, but I get this error message on iOS simulator but it works well in Android emulator, devices and IOS devices”
The above issue is common for Xamarin and MAUI, you can follow the below steps will work in IOS simulator.
When developing on the iOS simulator, enable the Keychain entitlement and add a keychain access group for the application's bundle identifier. Step 1: Create or open the Entitlements.plist in the project and This will automatically add the application's identifier as a group Step 2: In the project properties, under iOS Bundle Signing set the Custom Entitlements to Entitlements.plist.
Export compliance documentation for encryption, while Uploading AppStore
Complying with Encryption Export Regulations screen when uploading to the apple store, suppose you app makes calls to a web service via HTTPS and MAUI Xamarin Secure Storage to store secure information, in this case, you don’t worry about Encryption export Regulation, as per Apple documentation No documentation required.
If you do the below steps, next time you won’t get the above Dialog wizard.
Add the ITSAppUsesNonExemptEncryption key to your app’s Info.plist file with a Boolean value that indicates whether your app uses encryption. Set the value to NO if your app using only Secure Storage and https API call, next
Summary
The Secure Storage class is intended to store small pieces of secure storage information. If you need to locally save and retrieve more complex and structured data, a good option is to use a local database.
.NET MAUI provides 4 techniques for local storage options for storing data in locally on a device, depending on the nature, structure, and size of the data. The most used following 4 ways to store the local data on mobile devices.
Preferences
Local File Storage
Local Database
Secure Storage.
In this article, will share about the .Net MAUI Preference storage technique. Preferences is stores data in key-value pairs and can be easily managed via the Preferences class from Microsoft.Maui.Storage namespace and if you do Uninstall the app will also remove all local preferences, but if you are close and open the application still local preference can able to retrieve the old data.
The Preferences class stores preferences in the native local storage, more specifically
For Android, in the SharedPreferences.
For iOS, in the NSUserDefaults.
For UWP, in the ApplicationDataContainer.
On each platform, preferences are key/value pairs. The value can be of one of the primitive .NET types. Before understanding how preferences work, it is important to list the methods exposed by the Preferences class
Create a new MAUI Application
You can open visual studio 2022 from your Windows or Mac machine. You must follow the below 3 steps to create a new MAUI application
Step 1: Select Create a new project
Step 2: Search the MAUI project template or choose Project Type > MAUI from the drop-down.
Step 3: Provide the configuration Details as a project name, Location, and Solutions name.
Save Preferences
Save/ Set Preference will store simple value, preference having different key and value, preference key always string type, the value of preference must be one of the following types
Boolean
Double
Int32
Single
Int64
String
DateTime
Preferences are set by calling the Preferences. Set method, providing the key and value
Preferences.Set(“KEY”,” Value”).
Get/ Default Preferences
In this example already saved the two-preference value, in the below statement will the get the value from existing preference or if preference value is not there automatic or return the default value.
The following code confirmed already saved preference key is available or not
Clear Preferences
Clear and remove will use for dropping the preference key and value, suppose if you are doing any log out or switching to a different user this will help to clear all the preference key and value.
Preferences.Clear();
Suppose if you want to remove a particular key preference in the mobile, you can use remove preference as like below
Preferences.Remove(“Name”);
Summary
The Preferences class is intended to store small pieces of information represented by primitive .NET types. If you need to locally save and retrieve more complex and structured data, a good option is to use a local database like SQL lite and you can refer below screen output for the preference sample application.
Screen 1: Show the first screen and display the default Date Time preference value in the label
Screen 2: After clicking on Register store the user name and the latest time in the preference
Screen 3: Display the existing preference value, if the user clicks on the logout option, the preference value becomes clear.
Microsoft Azure is a cloud service that is constantly expanding to help your organization meet business challenges. You can build, and manage to deploy applications using the following Azure management options.
Azure Portal
Azure PowerShell and CLI
Azure Cloud Shell
Azure Mobile app
I have received many messages from users,” Want to learn Azure. But do not have an Azure subscription. Are there any tools? Simulators? etc” in this article, will elaborate and share how you can learn Azure without paying Subscriptions.
You can activate free Azure benefits with the following different options,
Azure Free Subscription
Microsoft Learn Azure Sandbox subscription.
Visual Studio subscription benefits (Formerly MSDN Subscriptions)
Azure free Subscription
The Azure free account includes access to a number of Azure products that are free for 12 months, ₹13, 300 credit to spend for the first 30 days of SignUp and access to more than 25 products that are always free.
You can learn from here more about the Azure free account.
Microsoft Learn Azure Sandbox subscription Microsoft Learn is an online learning platform where you can gain practical knowledge about Azure by completing a bunch of courses and hands-on labs. Unlike the other learning platforms, it provides a free sandbox (dedicated subscription) that you can use to complete the courses
Visual Studio subscription benefits [MCT, MVP, FTE, MPN, NFR] Visual Studio subscribers can use Microsoft Azure at no extra charge. With your monthly Azure DevTest individual credit, Azure is your personal sandbox for dev and test. You can create virtual machines, cloud services, and other Azure resources. Credit amounts vary based on subscription level.
Microsoft no longer offers Visual Studio Professional Annual subscriptions and Visual Studio Enterprise Annual subscriptions in Cloud Subscriptions. There will be no change to existing customers' experience and ability to renew, increase, decrease, or cancel their subscriptions.
If someone in your organization purchases, subscriptions for your organization, contact your Visual Studio subscription administrator and request a subscription that provides the monthly credit that you need.
You can sign in in your visual studio benefits https://my.visualstudio.com/benefits. and see the Azure credit . You can find below the table for Azure credit eligibility.
Visual Studio Enterprise Standard
$150 monthly credit
Visual Studio Enterprise with GitHub Enterprise
$150 monthly credit
Visual Studio Enterprise monthly
NA
Visual Studio Professional Standard
$150 monthly credit
Visual Studio Professional with GitHub Enterprise
$150 monthly credit
Visual Studio Professional monthly
Not Available
Visual Studio Test Pro
50 monthly credit
MSDN Platforms
100 monthly credit
Visual Studio Enterprise – Not For ReSale[NFR]
$150 monthly credit
Visual Studio Enterprise – FTE
$150 monthly credit
Visual Studio Enterprise - Microsoft Partner Network
$150 monthly credit
Visual Studio Professional - Microsoft Partner Network
NA
Visual Studio Enterprise – Imagine (Standard)
NA
Visual Studio Enterprise – Imagine (Premium)
NA
Visual Studio Enterprise – BizSpark
$150 monthly credit
Visual Studio Enterprise – MCT Software & Services
100 monthly credit
Visual Studio Enterprise – MCT Software & Services Developer
$150 monthly credit
This article provides an understanding of VerticalStacklayout and HorzontalStackLayout using .NET Multi-platform APP UI (MAUI), which is a cross-platform framework for creating native mobile and desktop apps with C# and XAML
A StackLayout organizes child views in a vertically oriented or horizontally one-dimensional stack, but the Microsoft team introduced VerticalStacklayout and HorzontalStackLayout same as stack layout with improved a lot more performance and avoided unnecessary layout calculations being performed. this article will show a quick demo of VerticalStacklayout and HorzontalStackLayout.
Environment Setup
I have shared a details explanation of the MAUI Development environment setup and getting started with the first MAUI application in my previous article. Microsoft MAUI team continuously releases changes, so make sure you have updated the latest visual studio 2022 preview version.
Create a new MAUI Application
You can open visual studio 2022 from your windows machine. You must follow the below 3 steps to create a new MAUI application
Step 1: Select Create a new project
Step 2: Search the MAUI project template or choose Project Type > MAUI from the dropdown.
Step 3: Provide the configuration Details as a project name, Location, and Solutions name.
The generated templates contain one project with Android, IOS, Windows, Mac and Tizen.
HorizontalStackLayout
The Xamarin forms already have StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. The HorizontalStackLayout organizes child views in a one-dimensional horizontal stack and is a more performant alternative to a StackLayout.
In this example, we have a design registration screen with 3 important sections label control, an entry box, and an error label.
Add the HorizontalStacklayout instead of Stacklayout with orientation.
Many of them asked questions like, How to align a label and entry box horizontally same line label at the start and Entry at the end? You could set VerticalOptions of that two control to Start/Centre, then the control would align horizontally .
Label, Entry, and Error label add same as Xamarin Forms Design
Once you did the design, the output looks like below
VerticalStacklayout
The VerticalStackLayout organizes child views in a one-dimensional vertical stack and is a more performant alternative to a StackLayout with a vertical. Position and size of views is based on the HeightRequest, WidthRequest, HorizontalOptions and Vertical Options. The following example we used VerticalStackLayout for designs the screen. VerticalStackLayout used for displaying your control one by one.
The LayoutOptions is set via the HorizontalOptions or VerticalOptions properties on any View. They can be set to any of the following options: Start, Center, End, Fill, StartAndExpand, CenterAndExpand, EndAndExpand, FillAndExpand and you can add the following code as per below
The layout looks like the below with 3 controls
Nested VerticalStackLayout/HorizontalStackLayout
A VerticalStackLayou and HorizontalStackLayout can be used as a parent layout that contains nested child of both objects, and other child layouts.
You can see the below example XAML for nested layout, the more the nested layouts will impact your performance., if you are trying to add multiple levels, you can try choosing the correct layout control.
In this example, the parent VerticalStackLayout contains nested HorizontalStackLayout objects and adds the control set.
Summary
In this article, you have seen the demo .NET MAUI VerticalStackLayout and HorizontalStackLayout Layout and how different from stack layout using Visual Studio 2022, Thanks for reading, will share more Dotnet MAUI related articles in the upcoming days.
The Microsoft certification is become more trend because of a lot of job openings for whose completed certification, same time most employees searching the internet “Free Azure dumps”,” Free Training “and free certification Voucher, I will share great information for who’s looking to do certification and some company learning team still not may aware this info, still they are asking to submit the bill for refund the certification expenses reimbursement.
Microsoft provides the Microsoft Enterprise Skills Initiative (ESI) for free. The ESI program includes multiple courses, a Certificate practice exam, free certification voucher for developers, administrators, or engineers, with one-time retakes.
How to know your Company's eligibility for ESI Benefits
Microsoft does not mention in public about criteria for approval. If your employer has a nontrivial Azure subscription with Microsoft and bulks MSDN business with Microsoft, your company may qualify. Most major companies fit into this so you can log on to the ESI website with your company email id. Some companies won’t allow you to log in to your personal computer so log in with your company computer.
SignUp Enterprise Skill Initiative
You can follow the below steps for the Signup Enterprise skill initiative
Step 1: Redirect to https://esi.microsoft.com/, if you have a company laptop use the same because some company not allowed to login into personal computers.
Step 2: Provide your company email id. For example, some company has multiple email id like employeeid@domain.com or employeename@domain.com, so you have tried with your base email id or try one by one.
Step3: Next steps, it will redirect to the Microsoft default login page to provide login details, or if already logged in, automatically redirect to the home page.
Suppose if your company is eligible for enterprise skill, not initiated, you will get the following error message.
Profile Setting
After the login is successful and if you are logging in for the first time, then you will see a profile settings menu where it will ask you which role you are interested to train yourself, your language, and your country.
ESI user benefits
The ESI program's main intention is to share the knowledge and give the support for complete certification with good learning and try to avoid third-party fake promises for dumps and training. Let’s understand the benefits of the below steps
Microsoft Learning
Microsoft Learning Live Training
Microsoft certificate practice training
Microsoft certification practice exam simulation with 247 questions
Microsoft Free Exam Voucher
After login, you will be able to see the below screen.
Free Virtual Live Training
The ESI program provides all the Azure developer, Azure Admin, DevOps, Security, and Office 365 courses, The course is available for beginners to experts. My company has ESI benefits and most of my certification is done through the ESI program.
The courses are delivered over Microsoft Teams and conduct labs on Azure. The tutors are Microsoft's internal trainers. I will give a 5-star rating for all the training, it will be more useful.
Free Exam Practice test
MeasureUp is the leading provider of Microsoft certification practice tests and assessments for professionals. Written by subject matter experts, the practice tests cover all objectives of the exam in-depth, so you'll be ready for anything. In fact, so you'll pass your certification exam after successfully passing its MeasureUp Practice Test, The cost is around 99$.
The Great news, is the above practice exam is also free for you, you can follow the below steps for the free practice test.
Step 3: Select your exam and click on the practice test.
Step 4: The practice test simulation will start with around 245 questions. The question will get shuffled and shown the question at a time of 45. As per my experience, if you cleared the practice test, 100% will pass the main exam as well. The practice exam will show answers and clear explanations as well.
Free Exam Voucher
Microsoft certification cost is around $99 USD. The Microsoft ESI program offers a 100% discount voucher to apply at checkout on the Pearson Vue site for the exam. You can follow the below steps to schedule an exam with a free voucher code.
Step 2: Search and select the exam for which you want to schedule the exam
Step 3: After selecting, you will get the following screen, select your country and click on the Schedule exam button.
Personal Microsoft Account Link to ESI Account
You will be asked to sign in or create a new personal email account. If you have an existing registered personal Microsoft account, use it to sign in. If you do not currently have a personal Microsoft account, create a new account with your personal information and your personal email address or your @gmail.com, @hotmail.com email address. Follow the screen prompts and complete the required fields until you are told that you successfully created your account.
The following screen shows the link to the ESI account if you don’t have the link account tab ignore it for now, if you have already click on the linked account and provide your Company ESI account email ID and provide the login details.
If you have already linked your accounts, you will see the option to claim a 100% by your employee discount, if it's not visible provide the company email id and check the eligibility, after verifying eligibility you will be able to see the like below screen.
You click on the Claim button, then proceed the all the steps for the scheduled date and accept all agreements, then submit the scheduled exam. The payment will display zero, so it won’t ask for any credit card information.
Video Demo
Summary
Hope you all understand the process and it is useful for you. I have explained the same info on all the sessions in Malaysia, Germany, and India, everyone enjoyed and utilized the process, I don’t know which country and the company you are from, please try it yourself, Hope your company is eligible for ESI benefits and you can also utilize, learn and save money 😊
Posts
