.NET MAUI

## 1. Create the Reusable Component Files 🧱 First, add a new item to your project. Choose the .NET MAUI ContentView (XAML) template. Name it something descriptive, like FeaturedCarouselView.xaml. ## 2. UI code sample of the ContentView FeaturedCarouselView.xaml: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 <?xml version="1.0" encoding="utf-8" ?> <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:YourMauiProjectName" x:Class="YourMauiProjectName.FeaturedCarouselView"> <ContentView.Resources> <ResourceDictionary> <Color x:Key="CardBackgroundColor">#F9FAFB</Color> <Color x:Key="ForegroundColor">#111827</Color> <Color x:Key="MutedForegroundColor">#6B7280</Color> <Color x:Key="BorderColor">#E5E7EB</Color> <Color x:Key="PrimaryColor">#4A90E2</Color> <Style x:Key="CardBorderStyle" TargetType="Border"> <Setter Property="Stroke" Value="{StaticResource BorderColor}" /> <Setter Property="StrokeThickness" Value="1" /> <Setter Property="BackgroundColor" Value="{StaticResource PageBackgroundColor}" /> <Setter Property="StrokeShape" Value="RoundRectangle 8" /> <Setter Property="Padding" Value="0" /> <Setter Property="Shadow"> <Shadow Brush="Black" Offset="2,2" Radius="5" Opacity="0.1" /> </Setter> </Style> <Style x:Key="PrimaryButtonStyle" TargetType="Button"> <Setter Property="BackgroundColor" Value="{StaticResource PrimaryColor}" /> <Setter Property="TextColor" Value="{StaticResource PrimaryTextColor}" /> <Setter Property="FontAttributes" Value="Bold" /> <Setter Property="HeightRequest" Value="48" /> <Setter Property="CornerRadius" Value="8" /> <Setter Property="Padding" Value="24,0" /> </Style> </ResourceDictionary> </ContentView.Resources> <VerticalStackLayout Spacing="16" BackgroundColor="{StaticResource CardBackgroundColor}"> <CarouselView x:Name="FeaturedCarousel" IndicatorView="FeaturedIndicator" HeightRequest="500"> <CarouselView.ItemTemplate> <DataTemplate x:DataType="local:CarouselItem"> <VerticalStackLayout Padding="16,0" Spacing="24"> <Border Style="{StaticResource CardBorderStyle}" StrokeShape="RoundRectangle 12" HeightRequest="300"> <Image Source="{Binding ImageUrl}" Aspect="AspectFill" /> </Border> <VerticalStackLayout Spacing="16" HorizontalOptions="Center" Padding="16,0"> <Label Text="{Binding Title}" TextColor="{StaticResource ForegroundColor}" FontSize="24" FontAttributes="Bold" HorizontalTextAlignment="Center" /> <Label Text="{Binding Description}" TextColor="{StaticResource MutedForegroundColor}" FontSize="16" HorizontalTextAlignment="Center" /> <Button Text="Discover More →" Style="{StaticResource PrimaryButtonStyle}" HorizontalOptions="Center" /> </VerticalStackLayout> </VerticalStackLayout> </DataTemplate> </CarouselView.ItemTemplate> </CarouselView> <IndicatorView x:Name="FeaturedIndicator" IndicatorColor="{StaticResource BorderColor}" SelectedIndicatorColor="{StaticResource PrimaryColor}" HorizontalOptions="Center" Margin="0,0,0,16"/> </VerticalStackLayout> </ContentView> ## 3. Logic to the Component’s Code-Behind Important: We use the Loaded and Unloaded events to start and stop the timer. ...

Create Custom Entry Control 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 namespace WaterReminder.CFDControl; public class CfdEntry :Entry { protected override void OnHandlerChanged() { base.OnHandlerChanged(); SetBorderlessBackground(); } protected override void OnPropertyChanged([CallerMemberName] string propertyName = null) { base.OnPropertyChanged(propertyName); if (propertyName == nameof(BackgroundColor)) { SetBorderlessBackground(); } } private void SetBorderlessBackground() { #if ANDROID if (Handler is IEntryHandler entryHandler) { if (BackgroundColor == null) { entryHandler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(Colors.Transparent.ToPlatform()); } else { entryHandler.PlatformView.BackgroundTintList = Android.Content.Res.ColorStateList.ValueOf(BackgroundColor.ToPlatform()); } } #endif } } Step uses Import Name Spaces. in Xaml and so on … ...

Code Snippet 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <AbsoluteLayout> <Grid AbsoluteLayout.LayoutBounds="0,0,1,1" AbsoluteLayout.LayoutFlags="All" > <Grid> <Border StrokeShape="RoundRectangle 30" HeightRequest="60" WidthRequest="60" BackgroundColor="Black" AbsoluteLayout.LayoutBounds="1, 1, AutoSize, AutoSize" AbsoluteLayout.LayoutFlags="PositionProportional" TranslationX="-30" TranslationY="-30" > <Border.GestureRecognizers> <TapGestureRecognizer Tapped="AddButton_Clicked" /> </Border.GestureRecognizers> <Label Text="➕" TextColor="White" VerticalOptions="Center" HorizontalOptions="Center" FontSize="25"/> </Border> </AbsoluteLayout>

Implementation Steps Install/ Add Microsoft.EntityFrameworkCore.Sqlite to Project 1 <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="9.0.7" /> Register App db Context before var app = builder.Build(); in MauiProgram.cs 1 2 3 var dbPath = Path.Combine(FileSystem.AppDataDirectory, "waterreminder.db3"); builder.Services.AddDbContext<AppDbContext>(options => options.UseSqlite($"Filename={dbPath}")); Just Before app run add this Command 1 2 3 4 5 6 7 8 // Initialize the database using (var scope = app.Services.CreateScope()) { var dbContext = scope.ServiceProvider.GetRequiredService<AppDbContext>(); dbContext.Database.EnsureCreated(); } return app; Create Add Db Context 1 2 3 4 5 6 namespace WaterReminder.Data; public class AppDbContext(DbContextOptions<AppDbContext> options) : DbContext(options) { public DbSet<Reminder> Reminders { get; set; } } Below is service or uses 1 2 3 4 5 6 7 8 9 10 11 public class ReminderService : IReminderService { private readonly AppDbContext _context; public ReminderService(AppDbContext context) { _context = context; } public Task<List<Reminder>> GetRemindersAsync() => _context.Reminders.ToListAsync(); }