Editing: maui_base

maui_base

I'll scan the entire project to analyze the structure and document common MAUI controls and patterns used.

Now I'll create a comprehensive guide document for you.

.NET MAUI Project Structure & Control Reference Guide

Project Overview

Project Name: CERS (Candidate Expenditure Reporting System)
Framework: .NET 8.0 MAUI
Platforms: Android, iOS, Windows, MacCatalyst
Key Dependencies: SQLite, Newtonsoft.Json

📁 Project Structure

cers-maui-base/
├── App.xaml                    # Global resources & styles
├── App.xaml.cs                 # App initialization logic
├── AppShell.xaml               # Shell navigation container
├── MauiProgram.cs              # Dependency injection setup
├── Pages (XAML files):
│   ├── LoginPage.xaml          # Login with OTP
│   ├── DashboardPage.xaml      # Main dashboard
│   ├── AddExpenditureDetailsPage.xaml
│   ├── EditExpenditureDetailsPage.xaml
│   ├── ViewExpenditureDetailsPage.xaml
│   ├── MorePage.xaml           # Settings/About
│   └── ChangeLanguagePage.xaml
├── Models/                     # Data models & SQLite databases
├── Observer/                   # Observer-specific logic
├── WebApi/                     # API communication
└── Resources/
    ├── Images/                 # PNG/SVG images
    ├── Fonts/                  # Custom fonts
    └── Styles/                 # Additional styles

🎨 Global Resources (App.xaml)

Colors Defined

<!-- Light Theme -->
Light_Btn_Background_Color: #0f0f0f
Light_Grid_Background_tab_Color: #90a3f0

<!-- Dark Theme -->
Dark_Btn_Background_Color: #0f0f0f
Dark_Grid_Background_Color: #4F4B4B

Key Styles

ButtonStyle - Standard buttons
Danger_ButtonStyle - Delete/danger buttons
LabelStyle - Standard labels
LabelStyle_TabMenu - Bottom tab labels
FooterGridStyle - Bottom navigation bar
NavigationLabelColor - Platform-specific title colors

🧩 Common MAUI Controls & Usage

1. ContentPage (Root Container)

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CERS.YourPage"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true">

Key Properties: BackgroundColor, Title, Padding

2. Grid (Layout Container)

<Grid RowDefinitions="Auto,*,Auto" ColumnDefinitions="*,2*">
    <Label Grid.Row="0" Grid.Column="0" Text="Header"/>
    <Label Grid.Row="1" Grid.Column="1" Text="Content"/>
</Grid>

Key Properties: - RowDefinitions: Auto (fit content), * (fill space), 100 (fixed) - ColumnDefinitions: Same as rows - RowSpacing, ColumnSpacing, Margin, Padding

3. StackLayout (Vertical/Horizontal Stack)

<StackLayout Orientation="Vertical" Spacing="10" Margin="15">
    <Label Text="Item 1"/>
    <Label Text="Item 2"/>
</StackLayout>

Key Properties: Orientation (Vertical/Horizontal), Spacing, Padding

4. ScrollView (Scrollable Content)

<ScrollView VerticalOptions="FillAndExpand">
    <StackLayout>
        <!-- Long content here -->
    </StackLayout>
</ScrollView>

Key Properties: Orientation, VerticalScrollBarVisibility

5. Label (Text Display)

<Label Text="Hello World"
       FontSize="16"
       FontAttributes="Bold"
       TextColor="Navy"
       HorizontalOptions="Center"
       HorizontalTextAlignment="Center"
       TextDecorations="Underline"
       LineBreakMode="WordWrap"/>

Key Properties: Text, FontSize, FontAttributes (Bold/Italic), TextColor, HorizontalTextAlignment, VerticalTextAlignment

6. Entry (Single-line Input)

<Entry x:Name="entry_mobileno"
       Placeholder="Enter Mobile No."
       PlaceholderColor="Gray"
       TextColor="Black"
       Keyboard="Numeric"
       MaxLength="10"
       IsPassword="False"/>

Key Properties: Placeholder, Keyboard (Numeric/Email/Text), MaxLength, IsPassword

7. Editor (Multi-line Input)

<Editor x:Name="entry_remarks"
        Placeholder="Enter Remarks"
        AutoSize="TextChanges"
        FontSize="16"
        MaxLength="200"/>

Key Properties: AutoSize (TextChanges), MaxLength, Placeholder

8. Button

<Button x:Name="btn_save"
        Text="Save"
        FontSize="18"
        FontAttributes="Bold"
        BackgroundColor="Navy"
        TextColor="White"
        CornerRadius="25"
        Clicked="btn_save_Clicked"
        Padding="15,10"/>

Key Properties: Text, Clicked (event handler), CornerRadius, BackgroundColor, Command (MVVM)

9. DatePicker

<DatePicker x:Name="datepicker_expdate"
            Format="dd/MM/yyyy"
            DateSelected="datepicker_expdate_DateSelected"
            FontSize="16"/>

Key Properties: Format, DateSelected (event), MinimumDate, MaximumDate

10. Picker (Dropdown)

<Picker x:Name="picker_payMode"
        Title="Select Payment Mode"
        FontSize="16"
        SelectedIndexChanged="picker_payMode_SelectedIndexChanged"/>

In Code-Behind:

picker_payMode.ItemsSource = new List<string> { "Cash", "Cheque", "Online" };
picker_payMode.SelectedIndex = 0;

11. RadioButton

<RadioButton x:Name="rb_exptype"
             Content="By Type"
             IsChecked="true"
             GroupName="expgroup"
             CheckedChanged="rb_exp_CheckedChanged"
             FontSize="16"/>

Key Properties: GroupName (groups buttons), IsChecked, Content

12. ListView (Scrollable List)

<ListView x:Name="listView_expendituredetails"
          HasUnevenRows="True"
          SeparatorColor="Transparent"
          SelectionMode="None"
          ItemTapped="listView_ItemTapped">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <Grid Margin="4">
                    <Label Text="{Binding displaytitle}" FontSize="16"/>
                    <Label Text="{Binding amount}" FontSize="16"/>
                </Grid>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Key Properties: ItemsSource (set in code), HasUnevenRows, SelectionMode

13. CollectionView (Modern List)

<CollectionView x:Name="listView_expendituredetails"
                SelectionMode="None">
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Border Stroke="Navy" StrokeThickness="1" BackgroundColor="White">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="20"/>
                </Border.StrokeShape>
                <StackLayout Padding="15">
                    <Label Text="{Binding ExpTypeName}" FontSize="14"/>
                </StackLayout>
            </Border>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

Better performance than ListView

14. Border (Modern Container with Rounded Corners)

<Border BackgroundColor="White"
        Stroke="#07a6db"
        StrokeThickness="2"
        Padding="15"
        Shadow="{Shadow Brush=Black, Offset='0,2', Radius=10, Opacity=0.3}">
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="15"/>
    </Border.StrokeShape>
    <!-- Content here -->
</Border>

Key Properties: Stroke (border color), StrokeThickness, Shadow

15. Frame (Legacy Container)

<Frame CornerRadius="10"
       BorderColor="Silver"
       Padding="10"
       Margin="5">
    <!-- Content -->
</Frame>

Note: Border is preferred in modern MAUI

16. Image

<Image Source="ic_launcher.png"
       HeightRequest="120"
       Aspect="AspectFit"
       HorizontalOptions="Center"/>

Key Properties: Source, Aspect (AspectFit/AspectFill/Fill), HeightRequest, WidthRequest

17. SearchBar

<SearchBar x:Name="searchbar_expendituredetails"
           Placeholder="Search"
           CancelButtonColor="Red"
           TextChanged="searchbar_TextChanged"/>

18. ActivityIndicator (Loading Spinner)

<ActivityIndicator IsVisible="true"
                   IsRunning="true"
                   Color="Navy"/>

19. BoxView (Colored Rectangle/Line)

<BoxView BackgroundColor="SkyBlue"
         HeightRequest="2"
         HorizontalOptions="Fill"/>

Common Use: Divider lines

20. TapGestureRecognizer (Make Any Element Tappable)

<Grid>
    <Grid.GestureRecognizers>
        <TapGestureRecognizer Tapped="Tab_Home_Tapped"/>
    </Grid.GestureRecognizers>
    <Label Text="Tap Me"/>
</Grid>

🎯 Common Patterns in This Project

1. Navigation Title Bar

<NavigationPage.TitleView>
    <Grid ColumnDefinitions="Auto,*">
        <Image Grid.Column="0" Source="seclogo.png" HeightRequest="40"/>
        <Label Grid.Column="1" Text="Title" Style="{StaticResource NavigationLabelColor}"/>
    </Grid>
</NavigationPage.TitleView>

2. Bottom Tab Navigation

<Grid Style="{StaticResource FooterGridStyle}" ColumnDefinitions="*,*,*">
    <Grid Grid.Column="0">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Tapped="Tab_Home_Tapped"/>
        </Grid.GestureRecognizers>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Image Grid.Row="0" Source="ic_homewhite.png" HeightRequest="20"/>
        <Label Grid.Row="1" Text="Home" Style="{StaticResource LabelStyle_TabMenu}"/>
    </Grid>
    <!-- Repeat for other tabs -->
</Grid>

3. Loading Overlay

<Grid x:Name="Loading_activity"
      Grid.RowSpan="4"
      BackgroundColor="#C0808080"
      IsVisible="false"
      ZIndex="1000">
    <Border BackgroundColor="White" Padding="20">
        <HorizontalStackLayout Spacing="10">
            <ActivityIndicator IsRunning="true" Color="Navy"/>
            <Label Text="Please Wait..." FontAttributes="Bold"/>
        </HorizontalStackLayout>
    </Border>
</Grid>

In Code-Behind:

Loading_activity.IsVisible = true;  // Show
Loading_activity.IsVisible = false; // Hide

4. Popup/Modal Dialog

<ContentView x:Name="popupDetails"
             BackgroundColor="#C0808080"
             IsVisible="false"
             AbsoluteLayout.LayoutBounds="0,0,1,1"
             AbsoluteLayout.LayoutFlags="All">
    <Frame BorderColor="#0596f7" CornerRadius="15" Padding="10">
        <!-- Popup content -->
        <Button Text="Close" Clicked="ClosePopup_Clicked"/>
    </Frame>
</ContentView>

🔧 Code-Behind Common Patterns

Accessing Controls

entry_mobileno.Text = "1234567890";
lbl_heading.Text = "Dashboard";
btn_save.IsEnabled = false;
Loading_activity.IsVisible = true;

Event Handlers

private void btn_save_Clicked(object sender, EventArgs e)
{
    string mobile = entry_mobileno.Text;
    // Your logic
}

private void datepicker_expdate_DateSelected(object sender, DateChangedEventArgs e)
{
    DateTime selected = e.NewDate;
}

ListView Binding

listView_expendituredetails.ItemsSource = myDataList;

📝 How to Edit Generated Code

To Add a New Field:

Add Label + Entry in XAML:

<Label x:Name="lbl_newfield" Text="New Field*" FontSize="16" FontAttributes="Bold"/>
<Entry x:Name="entry_newfield" Placeholder="Enter value" FontSize="16"/>

Access in Code-Behind:

string value = entry_newfield.Text;

To Remove Functionality:

Find the control by x:Name in XAML
Delete the XAML block
Remove event handlers in .xaml.cs file
Remove related code that references the control

To Change Styling:

Inline: Modify properties directly in XAML

<Button BackgroundColor="Red" TextColor="White"/>

Global: Edit App.xaml styles

<Style x:Key="MyButtonStyle" TargetType="Button">
    <Setter Property="BackgroundColor" Value="Navy"/>
</Style>

🎨 Layout Options Reference

HorizontalOptions / VerticalOptions:

Start - Align left/top
Center - Center
End - Align right/bottom
Fill - Stretch to fill
FillAndExpand - Fill and take extra space

TextAlignment:

Start, Center, End

🔗 Data Binding Syntax

<!-- One-way binding -->
<Label Text="{Binding PropertyName}"/>

<!-- Two-way binding -->
<Entry Text="{Binding PropertyName, Mode=TwoWay}"/>

<!-- Visibility binding -->
<StackLayout IsVisible="{Binding IsVisible}"/>

✅ Summary

Grid: Best for complex layouts with rows/columns
StackLayout: Simple vertical/horizontal stacking
ScrollView: Wrap content that might overflow
Border: Modern rounded containers with shadows
ListView/CollectionView: Display lists of data
Entry/Editor: User input (single/multi-line)
Button: Actions with Clicked events
Label: Display text

Key Files to Edit: - .xaml - UI structure - .xaml.cs - Logic and event handlers - App.xaml - Global styles and colors

This structure allows you to copy controls, modify properties, and understand where each piece fits in the application.