📱 .

NET MAUI
Mobile App Development
Mid-Term Exam Comprehensive Study Guide

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

1 What is Mobile App Development & .NET MAUI

1️⃣
Mobile app development means creating software applications that run on mobile devices. Your
course uses .NET MAUI as the core technology.

What is .NET MAUI?

MAUI stands for Multi-platform App UI. It is a cross-platform framework developed by Microsoft
that allows developers to build apps for multiple operating systems using a single codebase.

Core Philosophy: Write Once – Run Everywhere

• Android
• iOS
• Windows
• macOS

💡 You do NOT need to write separate apps for each platform. One MAUI project generates
apps for all platforms automatically.

Real-World Example
If you build a Student Registration App in MAUI:
• It runs on an Android smartphone
• It runs on an iPhone
• It runs on a Windows laptop
• All from the same code!

2️⃣ What is XAML

XAML stands for: Extensible Application Markup Language
XAML is the UI design language used in .NET MAUI to define what the screen looks like —
buttons, labels, text fields, layouts, etc.

Key Concept: Declarative Programming

XAML is a declarative language. This means:
• You declare WHAT you want on the screen
• The system figures out HOW to draw it

Approach You Say System Does

Declarative (XAML) "Show a Submit button" Draws the button, handles touch
events, positions it
Imperative (C#) You write every step You control exactly how
everything works

XAML Code Examples

<Label Text="Hello World" />
👆 This one line creates a text label saying 'Hello World' on the screen.

<Button Text="Submit" />

👆 This creates a button. You don't tell the system HOW to draw the button — you just declare
you want one.

<Entry Placeholder="Enter your name" x:Name="txtName" />

👆 This creates a text input field where users can type.

3️⃣ Separation of UI and Logic

In MAUI, the code is split into two separate files for every screen. This is called Separation of
Concerns.

Part File Type Language Purpose

UI Design [Link] XAML What the screen looks like
Business Logic [Link] C# What happens when user
interacts
Example in Practice
XAML side (UI)
<Button Text="Submit" Clicked="OnSubmitClicked" />

C# side (Logic)
void OnSubmitClicked(object sender, EventArgs e)
{
// Code runs when user taps the button
DisplayAlert("Success", "Form submitted!", "OK");
}

Benefits of Separation
• Code is clean and organized
• Easy debugging — UI bugs vs logic bugs are separate
• Team collaboration — designers work on XAML, developers on C#

4️⃣ MAUI Project Structure

When you create a new .NET MAUI project in Visual Studio, it generates these important folders
and files:

Item Type Contains

Platforms/ Folder Platform-specific code for Android, iOS, Windows
Resources/ Folder Images, fonts, icons, app styles
[Link] File Global styles for the entire app (colors, themes)
[Link] File The main screen of the app (first screen user sees)
[Link] File App startup and configuration

💡 The Platforms folder handles OS-specific differences automatically. You rarely need to
touch it.

5️⃣ ContentPage — The Screen

In .NET MAUI, every screen of your app is a ContentPage. Think of it as one page/screen the
user sees.
Critical Rule: One Direct Child Only
A ContentPage can only have ONE direct child element inside it.

❌ WRONG — Multiple direct children:

<ContentPage>
<Label Text="Name"/>
<Button Text="Submit"/>
</ContentPage>

✅ CORRECT — Wrap in a Layout:

<ContentPage>
<StackLayout>
<Label Text="Name"/>
<Button Text="Submit"/>
</StackLayout>
</ContentPage>

💡 This is why Layouts are essential in MAUI — they act as the single container that holds all
your elements.

6️⃣ Layouts — Arranging Elements on Screen

A Layout controls how elements are arranged and positioned on the screen. Your syllabus
covers three main layouts:

Layout Best Used For

Grid Forms, registration pages, login screens — structured rows &
columns
StackLayout Simple lists, vertical menus, linear content
FlexLayout Responsive UIs, dynamic content that should wrap
automatically

7️⃣ Grid Layout (VERY IMPORTANT)

Grid creates a table-like layout with rows and columns. It is ideal for forms and structured
screens.
Visual Concept
A login form using Grid looks like:

Column 0 (Labels) Column 1 (Inputs)

Name [TextBox]
Email [TextBox]
Password [TextBox]

Grid XAML Syntax

<Grid>
<[Link]>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</[Link]>
<[Link]>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</[Link]>

<Label Text="Name" [Link]="0" [Link]="0"/>

<Entry x:Name="txtName" [Link]="0" [Link]="1"/>
</Grid>

Height & Width Values

Value Meaning When to Use
Auto Size matches the content inside Labels, buttons with fixed text
* Takes all remaining space Input fields, main content areas
Fixed (e.g. Fixed pixel size When you need exact dimensions
100)

[Link] and [Link]

These properties tell an element WHICH cell it belongs to. Counting always starts from 0.
<Label Text="Email" [Link]="1" [Link]="0"/>
<Entry [Link]="1" [Link]="1"/>

💡 Exam Tip: If asked to design a login form → Use Grid. Reason: labels on left, inputs on
right = structured table layout.
8️⃣ StackLayout
StackLayout arranges elements in a straight line, either vertically or horizontally.

VerticalStackLayout
Elements are arranged from top to bottom.
<VerticalStackLayout>
<Label Text="Welcome"/>
<Entry Placeholder="Username"/>
<Button Text="Login"/>
</VerticalStackLayout>

HorizontalStackLayout
Elements are arranged side by side, left to right.
<HorizontalStackLayout>
<Button Text="Home"/>
<Button Text="Profile"/>
<Button Text="Settings"/>
</HorizontalStackLayout>

💡 Best for: simple lists, forms with one item per row, navigation menus.

9️⃣ FlexLayout
FlexLayout is like CSS Flexbox — it arranges items and automatically wraps them if there's not
enough space. It is used for responsive UI design.

Key Property: Wrap

<FlexLayout Wrap="Wrap" Direction="Row">
<Button Text="Math"/>
<Button Text="Science"/>
<Button Text="English"/>
<Button Text="History"/>
<Button Text="Art"/>
<Button Text="Music"/>
</FlexLayout>
How Wrap Works
On a wide screen: all buttons appear in one row side by side.
On a narrow screen: buttons automatically move to the next line.

💡 Best for: course selection screens, tag clouds, button grids that need to adapt to screen
size.

🔟 Margin vs Padding
Both Margin and Padding add space, but in different places.

Property Where Space is Added Visual Effect

Margin OUTSIDE the element Space between this element and
neighboring elements
Padding INSIDE the element Space between the element's border and
its content

Code Examples
<Button Text="Click Me" Margin="20"/>
👆 Adds 20 units of space around the outside of the button.

<StackLayout Padding="20">
👆 Adds 20 units of space inside the StackLayout, pushing content away from the edges.

1️⃣1️⃣ x:Name Property

x:Name gives a control a unique name so you can reference it in C# code.

XAML — Naming the Control

<Entry x:Name="txtName" Placeholder="Enter Name"/>
<Label x:Name="lblMessage" Text=""/>

C# — Accessing the Control

string userInput = [Link]; // Read what user typed
[Link] = "Hello " + userInput; // Update label text
 💡 Without x:Name, you cannot access UI controls in your C# logic. Always name controls
you need to interact with.

1️⃣2️⃣ Event-Driven Programming

Mobile apps are event-driven. This means: code runs ONLY when something happens (an
event), not continuously.

User Action (Event) What Triggers

Tap a button Clicked event
Type in a field TextChanged event
Select from dropdown SelectedIndexChanged event
Page loads OnAppearing event

Full Example
XAML:
<Button Text="Submit" Clicked="OnSubmitClicked"/>

C#:
private void OnSubmitClicked(object sender, EventArgs e)
{
string name = [Link];
[Link] = "Welcome, " + name;
}

💡 The method name in Clicked='...' must EXACTLY match the method name in C#. Case-
sensitive!

1️⃣3️⃣ Validation Logic

Validation means checking that the user has entered correct and complete data before
processing it.

Common Validations
• Empty field check — did the user fill in required fields?
• Format check — is the email properly formatted?
• Range check — is age between 1 and 120?
 • Password match — do both password fields match?

Example Validation Code (C#)

private void OnSubmitClicked(object sender, EventArgs e)
{
if ([Link]([Link]))
{
[Link] = "Name is required!";
return; // Stop processing
}
if ([Link]([Link]))
{
[Link] = "Email is required!";
return;
}
// All valid — proceed
[Link] = "";
SaveData();
}

1️⃣4️⃣ API — Application Programming Interface

An API is a bridge that allows your mobile app to communicate with a server or external service.

How API Communication Works

The flow is:

Step What Happens

1 Mobile app sends an HTTP Request to the API endpoint
2 API receives the request and queries the database
3 API sends back the data (usually in JSON format)
4 App receives the response and displays the data

Common HTTP Methods

Method CRUD Operation Purpose
GET Read Fetch data from server
POST Create Send new data to server
 PUT / PATCH Update Modify existing data
DELETE Delete Remove data from server

Example API Call (C#)

HttpClient client = new HttpClient();
var response = await
[Link]("[Link]
string json = await [Link]();

1️⃣5️⃣1️⃣
&6️⃣1️⃣6️⃣ Database & CRUD Operations
A database stores your application's data permanently — users, students, products, orders, etc.

CRUD = The Four Basic Database Operations

Letter Operation SQL Equivalent Example
C Create INSERT Add a new student record
R Read SELECT View all students
U Update UPDATE Change student email
D Delete DELETE Remove a student

CRUD in a Student App — Example Scenarios

• Create: Student fills registration form → data saved to database
• Read: App displays list of all students from database
• Update: Student updates their phone number → database record changed
• Delete: Admin removes a student → record deleted from database

1️⃣7️⃣ LINQ Queries

LINQ stands for Language Integrated Query. It is a way to query databases using C# syntax
instead of SQL.

Why LINQ?
• Write database queries directly in C# — no separate SQL files
• Type-safe — compiler catches errors at compile time, not runtime
• IntelliSense support in Visual Studio
Common LINQ Examples
Fetch all enabled users:
var users = [Link](u => [Link] == true).ToList();

Fetch students sorted by name:

var students = [Link](s => [Link]).ToList();

Count total students:

int count = [Link]();

Get specific student by ID:

var student = [Link](s => [Link] == 5).FirstOrDefault();

1️⃣8️⃣ First() vs FirstOrDefault()

Both methods retrieve the first matching record from a query, but they behave differently when
no match is found.

Method If Record Found If No Record Found Use When

First() Returns the Throws an Exception You're 100% certain
record (crash!) record exists
FirstOrDefault() Returns the Returns null (safe) You're not sure if
record record exists

Best Practice
// SAFE — always use FirstOrDefault for user lookups
var user = [Link](u => [Link] == [Link]);

if (user == null)
{
[Link] = "User not found!";
}
💡 Exam Tip: Almost always prefer FirstOrDefault() over First() to prevent app crashes.
1️⃣9️⃣ Authentication — Login System
Authentication is the process of verifying a user's identity. In simple terms — it's your login
system.

Login Flow — Step by Step

Step Action
1 User enters username and password in the app
2 App sends credentials to the server/database
3 Database checks if a user with that username exists
4 If found: check if the password matches
5 If both match: Login successful — navigate to home screen
6 If no match: Show error message 'Invalid credentials'

Authentication Code Example (C#)

var user = [Link](
u => [Link] == [Link] &&
[Link] == [Link]
);

if (user != null)
{
// Login successful
await [Link](new HomePage());
}
else
{
[Link] = "Invalid username or password!";
}

20
2️⃣
0️⃣Connection String
A connection string is a piece of text that tells your application HOW and WHERE to connect to
a database.

Connection String Format

Server=myServerName;
Database=myDatabaseName;
 User Id=admin;
Password=yourPassword;

Connection String Components

Component Meaning Example
Server Database server location localhost or [Link]
Database Name of the database StudentDB
User Id Username for database sa or admin
Password Password for database Pass@1234

💡 In MAUI apps, the connection string is usually stored in a config file or constants class,
not hardcoded in every page.

⭐ Scenario-Based Exam Questions

These are the most common scenario questions. Memorize the answers and reasons!

Scenario / Question Answer Reason

Design a login form with Use Grid Layout Labels in left column, inputs in right
labels and inputs column — structured table layout
Display 6 buttons stacked Use Linear arrangement from top to
vertically VerticalStackLayout bottom
Show course buttons that Use FlexLayout with Elements wrap to next line when
adapt to screen size Wrap='Wrap' space runs out
Fetch a user that might not Use FirstOrDefault() Returns null safely instead of
exist crashing with exception
Define XAML in one XAML is a declarative Describes what to show, not how to
sentence XML-based UI draw it
language for .NET
MAUI
Difference: Grid vs Grid = rows+columns; Grid for forms; StackLayout for
StackLayout StackLayout = linear simple lists

📋 Final Revision Cheat Sheet

Term One-Line Definition
.NET MAUI Cross-platform framework — Write Once, Run Everywhere
XAML XML-based language to design UI — declarative approach
C# Programming language for app logic and events
ContentPage One screen in a MAUI app — allows only 1 direct child
Grid Table-based layout with rows and columns — best for forms
StackLayout Linear layout — vertical or horizontal arrangement
FlexLayout Responsive layout — wraps elements like CSS Flexbox
x:Name Names a UI control so C# code can reference it
Clicked='Method' Event binding — triggers C# method on button tap
CRUD Create Read Update Delete — four database operations
LINQ C# way to query databases — Where(), OrderBy(), etc.
FirstOrDefault() Fetch first match or return null — safe for user lookups
API Bridge between mobile app and server/database
Authentication Login system — verify username + password against
database
Connection String Text that tells app how to connect to database
Separation of Concerns UI in XAML, Logic in C# — keeps code clean and organized

Good Luck on Your Exam! 🎯