Hey Q! Make Me A Cool Mobile App
Welcome to the Hey Q! blog series where we build fun apps using Amazon Q Developer and learn about the code along the way!
The scope of the sample apps created in this series are small 1-2 page applications that are fun, well designed and properly architected following best practices. And, the best part, the code is all open-source allowing you to grab it and use it for your apps!
Here's the link to the completed open-source project: https://github.com/thecodetraveler/moodboost
Note: Responses from LLMs are non-deterministic which can result in different outputs despite asking the same question. You may receive slightly different responses from Q Developer when trying to replicate the same steps below.
This week we are building a Mobile App for iOS + Android in C# using .NET MAUI. For this app, I have a few goals:
- The app must compile and run on a mobile device
- The app must have a nice, highly polished, professional User Interface (UI)
- The app must have a fun name that relates to its use
- The code must created by first using the latest version of the .NET MAUI template in the latest version of Visual Studio
- The code must use the MVVM Architecture
- The code must follow best practices
- The code must use the most-recent versions for all dependencies
The Completed App
Note: If you're interested in learning more about prompt engineering and want to see the steps I used to guide Q Developer CLI, scroll down to the Appendix.
First, let's take a look at the completed app:
Not bad! The UI could use some small improvements, but overall, the app works.
Things to Watch Out For
When vibe coding this app, I spotted a few items that .NET MAUI Developers should be aware of when using Claude Sonnet 4.0 with Amazon Q Developer:
- Used outdated NuGet Pacakages
- Used .NET 8 instead of .NET 9
- Used
DateTimeinstead ofDateTimeOffset - Used a
stringto store date/time information instead ofDateTimeOffset - Nested UI Layouts inside of UI Layouts (e.g. put a
VerticalStackLayoutinside aGrid) - Used obsolete UI elements, like
StackLayoutandFrame - Failed to create the
/Platforms/folder - Used the wrong SupportedOSPlatformVersion for iOS
- Incompatible NuGet Dependencies
- Did not add
/Platforms/iOS/Program.cs - Used obsolete
Application.MainPage - Did not include Debug/Release build configurations
- Implemented Nullable Warnings
- CollectionView.DataTemplate displayed no data (incorrect bindings)
- Used TapGestureRecognizer inside a DataTemplate instead of using CollectionView.SelectionChanged event
The one big blocker is that the agentic workflow did not add /Platforms/ folder and the necessary files specific to iOS and Android. Without this folder, the app will not compile.
Appendix
For anyone out there who is interested in learning more about prompt engineering, this section contains the steps I followed to craete this app.
I've already installed Q Developer CLI on my Mac, so let's begin by opening the macOS Terminal and begin chatting with Q using the following command:
q chatNext, I will help Q out a bit by giving Q a profile. This reduces the scope of the datasets that Q will reference helps Q better understand the problem we are trying to solve together:
Prompt
Hey Q! You are a senior. NET MAUI Developer who is an expert in C# and always follows C#, Mobile and .NET MAUI best practices. You always reference the official C# documentation on https://learn.microsoft.com/dotnet/csharp/ when writing your code and you always reference the official .NET MAUI documentation when writing your code https://learn.microsoft.com/dotnet/maui/. You always write code the uses the recommended libraries CommunityToolkit. MVVM and CommunityToolkit. Maui. The User Interface for your apps are always highly polished and professional, giving the appearance that it was created by a Senior Designer. In addition to the reference domains above, you are also allowed to reference the open-source NET runtime code on GitHub, https://github.com/dotnet/runtime, and
the open-source .NET MAUI code on GitHub https://github.com/dotnet/maui.
Done! Now let's ask it to start building us an app and see what happens!
Prompt
Starting first using the latest version of the NET MAUI template in the latest version of Visual Studio, create a fun one-page NET MAUI app that adheres to the following rules: 1. The app must compile and run on a mobile device, 2. The app must have a nice, highly polished, professional User Interface (UI), 3. The app must have a fun name that relates to its use, 4. The code must created by first using the latest version of the . NET MAUI template in the latest version of Visual Studio, 5. The code must use the MVVM Architecture, 6. The code must follow best practices, 7. The code must use the most-recent versions for all.
Response
Starting first using the latest version of the NET MAUI template in the latest version of Visual Studio, create a fun one-page NET MAUI app that adheres to the following rules: 1. The app must compile and run on a mobile device, 2. The app must have a nice, highly polished, professional User Interface (UI), 3. The app must have a fun name that relates to its use, 4. The code must created by first using the latest version of the . NET MAUI template in the latest version of Visual Studio, 5. The code must use the MVVM Architecture, 6. The code must follow best practices, 7. The code must use the most-recent versions for all.
I'll create a fun, polished .NET MAUI app called "MoodBoost" - a daily mood tracker and motivational quote generator. Let me build this step by step using the
latest .NET MAUI template with MVVM architecture.
+ 1: <Project Sdk="Microsoft.NET.Sdk">
+ 2:
+ 3: <PropertyGroup>
+ 4: <TargetFrameworks>net8.0-android;net8.0-ios</TargetFrameworks>
+ 5: <OutputType>Exe</OutputType>
+ 6: <RootNamespace>MoodBoost</RootNamespace>
+ 7: <UseMaui>true</UseMaui>
+ 8: <SingleProject>true</SingleProject>
+ 9: <ImplicitUsings>enable</ImplicitUsings>
+ 10: <Nullable>enable</Nullable>
+ 11:
+ 12: <!-- Display Version -->
+ 13: <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+ 14: <ApplicationVersion>1</ApplicationVersion>
+ 15:
+ 16: <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
+ 17: <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">11.0</SupportedOSPlatformVersion>
+ 18: </PropertyGroup>
+ 19:
+ 20: <ItemGroup>
+ 21: <!-- App Icon -->
+ 22: <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
+ 23:
+ 24: <!-- Splash Screen -->
+ 25: <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
+ 26:
+ 27: <!-- Images -->
+ 28: <MauiImage Include="Resources\Images\*" />
+ 29: <MauiImage Update="Resources\Images\dotnet_bot.png" Resize="True" BaseSize="300,185" />
+ 30:
+ 31: <!-- Custom Fonts -->
+ 32: <MauiFont Include="Resources\Fonts\*" />
+ 33:
+ 34: <!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
+ 35: <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
+ 36: </ItemGroup>
+ 37:
+ 38: <ItemGroup>
+ 39: <PackageReference Include="Microsoft.Maui.Controls" Version="8.0.91" />
+ 40: <PackageReference Include="Microsoft.Maui.Controls.Compatibility" Version="8.0.91" />
+ 41: <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="8.0.0" />
+ 42: <PackageReference Include="CommunityToolkit.Mvvm" Version="8.2.2" />
+ 43: <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
+ 44: </ItemGroup>
+ 45:
+ 46: </Project>
It looks like the it is starting with the CSPROJ file; not a bad place to begin! However, it still using older .NET Frameworkds (net8.0) and older NuGet Packages. Let's ask it to use the latest versions and remove unneeded package references.
Prompt
Please use .NET 9. Please remove the PackageReference to Microsoft.Maui.Controls. Please remove the PackageReference to Microsoft.Maui.Controls.Compatiblity. Please use the latest version of CommunityToolkit.Maui, 12.0.0. Please use the latest version of CommunityToolkit.Mvvm, 8.4.0. Please use the latest version of Microsoft.Extensions.Logging.Debug, 9.0.6.
Response
+ 1: <Project Sdk="Microsoft.NET.Sdk">
+ 2:
+ 3: <PropertyGroup>
+ 4: <TargetFrameworks>net9.0-android;net9.0-ios</TargetFrameworks>
+ 5: <OutputType>Exe</OutputType>
+ 6: <RootNamespace>MoodBoost</RootNamespace>
+ 7: <UseMaui>true</UseMaui>
+ 8: <SingleProject>true</SingleProject>
+ 9: <ImplicitUsings>enable</ImplicitUsings>
+ 10: <Nullable>enable</Nullable>
+ 11:
+ 12: <!-- Display Version -->
+ 13: <ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
+ 14: <ApplicationVersion>1</ApplicationVersion>
+ 15:
+ 16: <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">21.0</SupportedOSPlatformVersion>
+ 17: <SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">11.0</SupportedOSPlatformVersion>
+ 18: </PropertyGroup>
+ 19:
+ 20: <ItemGroup>
+ 21: <!-- App Icon -->
+ 22: <MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#FF6B35" />
+ 23:
+ 24: <!-- Splash Screen -->
+ 25: <MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#FF6B35" BaseSize="128,128" />
+ 26:
+ 27: <!-- Images -->
+ 28: <MauiImage Include="Resources\Images\*" />
+ 29:
+ 30: <!-- Custom Fonts -->
+ 31: <MauiFont Include="Resources\Fonts\*" />
+ 32:
+ 33: <!-- Raw Assets -->
+ 34: <MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
+ 35: </ItemGroup>
+ 36:
+ 37: <ItemGroup>
+ 38: <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.6" />
+ 39: <PackageReference Include="CommunityToolkit.Mvvm" Version="8.4.0" />
+ 40: <PackageReference Include="CommunityToolkit.Maui" Version="12.0.0" />
+ 41: </ItemGroup>
+ 42:
+ 43: </Project>
Much better! Let's enter y to accept this CSPROJ and continue. Approved ✅
After accepting the CSPROJ file, it next offers to create MauiProgram.cs:
+ 1: using CommunityToolkit.Maui;
+ 2: using Microsoft.Extensions.Logging;
+ 3: using MoodBoost.ViewModels;
+ 4: using MoodBoost.Views;
+ 5:
+ 6: namespace MoodBoost;
+ 7:
+ 8: public static class MauiProgram
+ 9: {
+ 10: public static MauiApp CreateMauiApp()
+ 11: {
+ 12: var builder = MauiApp.CreateBuilder();
+ 13: builder
+ 14: .UseMauiApp<App>()
+ 15: .UseMauiCommunityToolkit()
+ 16: .ConfigureFonts(fonts =>
+ 17: {
+ 18: fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+ 19: fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
+ 20: });
+ 21:
+ 22: // Register ViewModels and Views
+ 23: builder.Services.AddSingleton<MainPageViewModel>();
+ 24: builder.Services.AddSingleton<MainPage>();
+ 25:
+ 26: #if DEBUG
+ 27: builder.Services.AddLogging(configure => configure.AddDebug());
+ 28: #endif
+ 29:
+ 30: return builder.Build();
+ 31: }
+ 32: }
Approved ✅
Next it offered to create the App.xaml file
+ 1: <?xml version="1.0" encoding="UTF-8" ?>
+ 2: <Application x:Class="MoodBoost.App"
+ 3: xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ 5: xmlns:local="clr-namespace:MoodBoost">
+ 6: <Application.Resources>
+ 7: <ResourceDictionary>
+ 8: <ResourceDictionary.MergedDictionaries>
+ 9: <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
+ 10: <ResourceDictionary Source="Resources/Styles/Styles.xaml" />
+ 11: </ResourceDictionary.MergedDictionaries>
+ 12: </ResourceDictionary>
+ 13: </Application.Resources>
+ 14: </Application>
Approved ✅
Unsuprisingly, it next offered to create the associated code-behind file, App.xaml.cs
+ 1: using MoodBoost.Views;
+ 2:
+ 3: namespace MoodBoost;
+ 4:
+ 5: public partial class App : Application
+ 6: {
+ 7: public App()
+ 8: {
+ 9: InitializeComponent();
+ 10: MainPage = new AppShell();
+ 11: }
+ 12: }
Approved ✅
Next, it offrers to create AppShell.xaml:
+ 1: <?xml version="1.0" encoding="UTF-8" ?>
+ 2: <Shell x:Class="MoodBoost.AppShell"
+ 3: xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ 5: xmlns:local="clr-namespace:MoodBoost.Views"
+ 6: Shell.FlyoutBehavior="Disabled"
+ 7: Title="MoodBoost">
+ 8:
+ 9: <ShellContent Title="Home"
+ 10: ContentTemplate="{DataTemplate local:MainPage}"
+ 11: Route="MainPage" />
+ 12:
+ 13: </Shell>
Approved ✅
And, like last time, it offers to create the code-behind file, App.xaml.cs:
+ 1: namespace MoodBoost;
+ 2:
+ 3: public partial class AppShell : Shell
+ 4: {
+ 5: public AppShell()
+ 6: {
+ 7: InitializeComponent();
+ 8: }
+ 9: }
Approved ✅
Next, it creates the Model:
+ 1: namespace MoodBoost.Models;
+ 2:
+ 3: public record MoodEntry(
+ 4: string Emoji,
+ 5: string Name,
+ 6: string Description,
+ 7: Color Color
+ 8: );
+ 9:
+ 10: public static class MoodData
+ 11: {
+ 12: public static readonly List<MoodEntry> Moods = new()
+ 13: {
+ 14: new("😄", "Fantastic", "I'm feeling amazing today!", Color.FromArgb("#4CAF50")),
+ 15: new("😊", "Happy", "Things are going well!", Color.FromArgb("#8BC34A")),
+ 16: new("😐", "Neutral", "Just an ordinary day", Color.FromArgb("#FFC107")),
+ 17: new("😔", "Down", "Not my best day", Color.FromArgb("#FF9800")),
+ 18: new("😢", "Sad", "Feeling quite low today", Color.FromArgb("#F44336"))
+ 19: };
+ 20:
+ 21: public static readonly List<string> MotivationalQuotes = new()
+ 22: {
+ 23: "Every day is a new beginning. Take a deep breath and start again.",
+ 24: "You are stronger than you think and more capable than you imagine.",
+ 25: "Small steps every day lead to big changes over time.",
+ 26: "Your current situation is not your final destination.",
+ 27: "Believe in yourself and all that you are.",
+ 28: "The only way to do great work is to love what you do.",
+ 29: "Success is not final, failure is not fatal: it is the courage to continue that counts.",
+ 30: "You don't have to be perfect, just be yourself.",
+ 31: "Every moment is a fresh beginning.",
+ 32: "You are exactly where you need to be right now."
+ 33: };
+ 34: }
It's great to see it following the MVVM architecture, as I previously requested. However, I'd like to use immutable data, so let's ask it to use an IReadOnlyList<T> instead of a List<T>. And to follow best practices, these public static fields in MoodData should be Properties.
Prompt
Let's use immutable models for MoodData; please change List to IReadOnlyList. Please also use a read-only Property instead of public fields
+ 1: namespace MoodBoost.Models;
+ 2:
+ 3: public record MoodEntry(
+ 4: string Emoji,
+ 5: string Name,
+ 6: string Description,
+ 7: Color Color
+ 8: );
+ 9:
+ 10: public static class MoodData
+ 11: {
+ 12: public static IReadOnlyList<MoodEntry> Moods { get; } = new List<MoodEntry>
+ 13: {
+ 14: new("😄", "Fantastic", "I'm feeling amazing today!", Color.FromArgb("#4CAF50")),
+ 15: new("😊", "Happy", "Things are going well!", Color.FromArgb("#8BC34A")),
+ 16: new("😐", "Neutral", "Just an ordinary day", Color.FromArgb("#FFC107")),
+ 17: new("😔", "Down", "Not my best day", Color.FromArgb("#FF9800")),
+ 18: new("😢", "Sad", "Feeling quite low today", Color.FromArgb("#F44336"))
+ 19: }.AsReadOnly();
+ 20:
+ 21: public static IReadOnlyList<string> MotivationalQuotes { get; } = new List<string>
+ 22: {
+ 23: "Every day is a new beginning. Take a deep breath and start again.",
+ 24: "You are stronger than you think and more capable than you imagine.",
+ 25: "Small steps every day lead to big changes over time.",
+ 26: "Your current situation is not your final destination.",
+ 27: "Believe in yourself and all that you are.",
+ 28: "The only way to do great work is to love what you do.",
+ 29: "Success is not final, failure is not fatal: it is the courage to continue that counts.",
+ 30: "You don't have to be perfect, just be yourself.",
+ 31: "Every moment is a fresh beginning.",
+ 32: "You are exactly where you need to be right now."
+ 33: }.AsReadOnly();
+ 34: }
Much better! Approved ✅
Next, it has generated the ViewModel for MainPageViewModel.cs:
+ 1: using CommunityToolkit.Mvvm.ComponentModel;
+ 2: using CommunityToolkit.Mvvm.Input;
+ 3: using MoodBoost.Models;
+ 4: using System.Collections.ObjectModel;
+ 5:
+ 6: namespace MoodBoost.ViewModels;
+ 7:
+ 8: public partial class MainPageViewModel : ObservableObject
+ 9: {
+ 10: private readonly Random _random = new();
+ 11:
+ 12: [ObservableProperty]
+ 13: private string currentQuote = string.Empty;
+ 14:
+ 15: [ObservableProperty]
+ 16: private MoodEntry? selectedMood;
+ 17:
+ 18: [ObservableProperty]
+ 19: private string todayDate = string.Empty;
+ 20:
+ 21: [ObservableProperty]
+ 22: private bool hasSelectedMood;
+ 23:
+ 24: public ObservableCollection<MoodEntry> Moods { get; }
+ 25:
+ 26: public MainPageViewModel()
+ 27: {
+ 28: Moods = new ObservableCollection<MoodEntry>(MoodData.Moods);
+ 29: TodayDate = DateTimeOffset.UtcNow.ToString("dddd, MMMM dd, yyyy");
+ 30: GenerateNewQuote();
+ 31: }
+ 32:
+ 33: [RelayCommand]
+ 34: private void SelectMood(MoodEntry mood)
+ 35: {
+ 36: SelectedMood = mood;
+ 37: HasSelectedMood = true;
+ 38: GenerateNewQuote();
+ 39: }
+ 40:
+ 41: [RelayCommand]
+ 42: private void GenerateNewQuote()
+ 43: {
+ 44: var quotes = MoodData.MotivationalQuotes;
+ 45: var randomIndex = _random.Next(quotes.Count);
+ 46: CurrentQuote = quotes[randomIndex];
+ 47: }
+ 48:
+ 49: [RelayCommand]
+ 50: private void ResetMood()
+ 51: {
+ 52: SelectedMood = null;
+ 53: HasSelectedMood = false;
+ 54: GenerateNewQuote();
+ 55: }
+ 56: }
I appreciate that it is using [RelayCommand] and [ObservableProperty], however, I prefer to use Partial Properties instead of private fields for my [ObservableProperty]. I also prefer it to use Random.Shared instead of creating a new instance of Random. Finally, we should be using DateTimeOffset to store date/time data, not string.
Prompt
Please use a partial property for each [ObservableProperty] instead of using fields. Please also use Random.Shared instead of creating a new instance of Random. The proeprty TodayDate is using a string. Please change its type to DateTimeOffset.
+ 1: using CommunityToolkit.Mvvm.ComponentModel;
+ 2: using CommunityToolkit.Mvvm.Input;
+ 3: using MoodBoost.Models;
+ 4: using System.Collections.ObjectModel;
+ 5:
+ 6: namespace MoodBoost.ViewModels;
+ 7:
+ 8: public partial class MainPageViewModel : ObservableObject
+ 9: {
+ 10: public MainPageViewModel()
+ 11: {
+ 12: Moods = [.. MoodData.Moods];
+ 13: TodayDate = DateTimeOffset.Now;
+ 14: GenerateNewQuote();
+ 15: }
+ 16:
+ 17: public ObservableCollection<MoodEntry> Moods { get; }
+ 18:
+ 19: [ObservableProperty]
+ 20: public partial string CurrentQuote { get; set; } = string.Empty;
+ 21:
+ 22: [ObservableProperty]
+ 23: public partial MoodEntry? SelectedMood { get; set; }
+ 24:
+ 25: [ObservableProperty]
+ 26: public partial DateTimeOffset TodayDate { get; set; }
+ 27:
+ 28: [ObservableProperty]
+ 29: public partial bool HasSelectedMood { get; set; }
+ 30:
+ 31: [RelayCommand]
+ 32: private void SelectMood(MoodEntry mood)
+ 33: {
+ 34: SelectedMood = mood;
+ 35: HasSelectedMood = true;
+ 36: GenerateNewQuote();
+ 37: }
+ 38:
+ 39: [RelayCommand]
+ 40: private void GenerateNewQuote()
+ 41: {
+ 42: var quotes = MoodData.MotivationalQuotes;
+ 43: var randomIndex = Random.Shared.Next(quotes.Count);
+ 44: CurrentQuote = quotes[randomIndex];
+ 45: }
+ 46:
+ 47: [RelayCommand]
+ 48: private void ResetMood()
+ 49: {
+ 50: SelectedMood = null;
+ 51: HasSelectedMood = false;
+ 52: GenerateNewQuote();
+ 53: }
+ 54: }
Much better! Approved ✅
Next, it generated a UI in XAML
+ 1: <?xml version="1.0" encoding="utf-8" ?>
+ 2: <ContentPage x:Class="MoodBoost.Views.MainPage"
+ 3: xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ 5: xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+ 6: xmlns:vm="clr-namespace:MoodBoost.ViewModels"
+ 7: x:DataType="vm:MainPageViewModel"
+ 8: Title="MoodBoost"
+ 9: BackgroundColor="{StaticResource Primary}">
+ 10:
+ 11: <ScrollView>
+ 12: <Grid RowDefinitions="Auto,*,Auto"
+ 13: Padding="20"
+ 14: RowSpacing="30">
+ 15:
+ 16: <!-- Header Section -->
+ 17: <StackLayout Grid.Row="0" Spacing="10">
+ 18: <Label Text="MoodBoost"
+ 19: FontSize="32"
+ 20: FontAttributes="Bold"
+ 21: TextColor="White"
+ 22: HorizontalOptions="Center" />
+ 23:
+ 24: <Label Text="{Binding TodayDate, StringFormat='{0:dddd, MMMM dd, yyyy}'}"
+ 25: FontSize="16"
+ 26: TextColor="White"
+ 27: Opacity="0.8"
+ 28: HorizontalOptions="Center" />
+ 29: </StackLayout>
+ 30:
+ 31: <!-- Main Content -->
+ 32: <StackLayout Grid.Row="1" Spacing="25">
+ 33:
+ 34: <!-- Mood Selection Section -->
+ 35: <Frame BackgroundColor="White"
+ 36: CornerRadius="20"
+ 37: HasShadow="True"
+ 38: Padding="20">
+ 39: <StackLayout Spacing="15">
+ 40: <Label Text="How are you feeling today?"
+ 41: FontSize="18"
+ 42: FontAttributes="Bold"
+ 43: TextColor="{StaticResource Gray900}"
+ 44: HorizontalOptions="Center" />
+ 45:
+ 46: <CollectionView ItemsSource="{Binding Moods}"
+ 47: SelectionMode="None">
+ 48: <CollectionView.ItemsLayout>
+ 49: <LinearItemsLayout Orientation="Horizontal"
+ 50: ItemSpacing="15" />
+ 51: </CollectionView.ItemsLayout>
+ 52:
+ 53: <CollectionView.ItemTemplate>
+ 54: <DataTemplate>
+ 55: <Grid>
+ 56: <Frame BackgroundColor="{Binding Color}"
+ 57: CornerRadius="25"
+ 58: HasShadow="True"
+ 59: Padding="0"
+ 60: HeightRequest="80"
+ 61: WidthRequest="80">
+ 62: <Frame.GestureRecognizers>
+ 63: <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}, Path=SelectMoodCommand}"
+ 64: CommandParameter="{Binding .}" />
+ 65: </Frame.GestureRecognizers>
+ 66:
+ 67: <StackLayout VerticalOptions="Center"
+ 68: HorizontalOptions="Center"
+ 69: Spacing="5">
+ 70: <Label Text="{Binding Emoji}"
+ 71: FontSize="24"
+ 72: HorizontalOptions="Center" />
+ 73: <Label Text="{Binding Name}"
+ 74: FontSize="10"
+ 75: TextColor="White"
+ 76: FontAttributes="Bold"
+ 77: HorizontalOptions="Center" />
+ 78: </StackLayout>
+ 79: </Frame>
+ 80: </Grid>
+ 81: </DataTemplate>
+ 82: </CollectionView.ItemTemplate>
+ 83: </CollectionView>
+ 84: </StackLayout>
+ 85: </Frame>
+ 86:
+ 87: <!-- Selected Mood Display -->
+ 88: <Frame BackgroundColor="White"
+ 89: CornerRadius="20"
+ 90: HasShadow="True"
+ 91: Padding="20"
+ 92: IsVisible="{Binding HasSelectedMood}">
+ 93: <StackLayout Spacing="15">
+ 94: <Label Text="Your Current Mood"
+ 95: FontSize="16"
+ 96: FontAttributes="Bold"
+ 97: TextColor="{StaticResource Gray900}"
+ 98: HorizontalOptions="Center" />
+ 99:
+ 100: <StackLayout Orientation="Horizontal"
+ 101: HorizontalOptions="Center"
+ 102: Spacing="10">
+ 103: <Label Text="{Binding SelectedMood.Emoji}"
+ 104: FontSize="32" />
+ 105: <StackLayout VerticalOptions="Center">
+ 106: <Label Text="{Binding SelectedMood.Name}"
+ 107: FontSize="18"
+ 108: FontAttributes="Bold"
+ 109: TextColor="{StaticResource Gray900}" />
+ 110: <Label Text="{Binding SelectedMood.Description}"
+ 111: FontSize="14"
+ 112: TextColor="{StaticResource Gray600}" />
+ 113: </StackLayout>
+ 114: </StackLayout>
+ 115: </StackLayout>
+ 116: </Frame>
+ 117:
+ 118: <!-- Motivational Quote Section -->
+ 119: <Frame BackgroundColor="White"
+ 120: CornerRadius="20"
+ 121: HasShadow="True"
+ 122: Padding="25">
+ 123: <StackLayout Spacing="20">
+ 124: <Label Text="Daily Inspiration"
+ 125: FontSize="16"
+ 126: FontAttributes="Bold"
+ 127: TextColor="{StaticResource Gray900}"
+ 128: HorizontalOptions="Center" />
+ 129:
+ 130: <Label Text="{Binding CurrentQuote}"
+ 131: FontSize="16"
+ 132: TextColor="{StaticResource Gray700}"
+ 133: HorizontalTextAlignment="Center"
+ 134: LineHeight="1.4" />
+ 135:
+ 136: <Button Text="New Quote"
+ 137: Command="{Binding GenerateNewQuoteCommand}"
+ 138: BackgroundColor="{StaticResource Secondary}"
+ 139: TextColor="White"
+ 140: CornerRadius="15"
+ 141: FontAttributes="Bold"
+ 142: HeightRequest="45" />
+ 143: </StackLayout>
+ 144: </Frame>
+ 145: </StackLayout>
+ 146:
+ 147: <!-- Reset Button -->
+ 148: <Button Grid.Row="2"
+ 149: Text="Reset Mood"
+ 150: Command="{Binding ResetMoodCommand}"
+ 151: BackgroundColor="White"
+ 152: TextColor="{StaticResource Primary}"
+ 153: CornerRadius="20"
+ 154: FontAttributes="Bold"
+ 155: HeightRequest="50"
+ 156: IsVisible="{Binding HasSelectedMood}" />
+ 157: </Grid>
+ 158: </ScrollView>
+ 159: </ContentPage>
Now this code is pretty bad. Will it work? Certainly. Does it follow best practices? Certainly not; I would fail a PR if presented with this code. Let's ask it to fix the following items:
- Avoid nesting layouts inside of layouts
- Don't put a
StackLayoutinside of aGrid
- Don't put a
- Don't use
Framebecause it is deprecated in .NET MAUI- Use
Borderinstead
- Use
- Don't use
StackLayoutbecause it is deprecated in .NET MAUI- Use
VerticalStackLayoutinstead
- Use
Prompt
Please useBroderinstead ofFrame. Please useVerticalStackLayoutinstead ofStackLayout. Please do not add a Layout inside of an existing layout. Please do not place a HorizontalStackLayout inside of a Grid. Please do not place a VerticalStackLayout inside of a Grid. Modify the RowDefinitions and ColumDefinitions of the base Grid layout to accomidate all UI elements on the page without needing another layout.
+ 1: <?xml version="1.0" encoding="utf-8" ?>
+ 2: <ContentPage x:Class="MoodBoost.Views.MainPage"
+ 3: xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+ 5: xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+ 6: xmlns:vm="clr-namespace:MoodBoost.ViewModels"
+ 7: x:DataType="vm:MainPageViewModel"
+ 8: Title="MoodBoost"
+ 9: BackgroundColor="{StaticResource Primary}">
+ 10:
+ 11: <ScrollView>
+ 12: <Grid RowDefinitions="Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto,Auto"
+ 13: ColumnDefinitions="*,*,*"
+ 14: Padding="20"
+ 15: RowSpacing="20">
+ 16:
+ 17: <!-- App Title -->
+ 18: <Label Grid.Row="0"
+ 19: Grid.ColumnSpan="3"
+ 20: Text="MoodBoost"
+ 21: FontSize="32"
+ 22: FontAttributes="Bold"
+ 23: TextColor="White"
+ 24: HorizontalOptions="Center" />
+ 25:
+ 26: <!-- Date -->
+ 27: <Label Grid.Row="1"
+ 28: Grid.ColumnSpan="3"
+ 29: Text="{Binding TodayDate, StringFormat='{0:dddd, MMMM dd, yyyy}'}"
+ 30: FontSize="16"
+ 31: TextColor="White"
+ 32: Opacity="0.8"
+ 33: HorizontalOptions="Center" />
+ 34:
+ 35: <!-- Mood Selection Title -->
+ 36: <Border Grid.Row="2"
+ 37: Grid.ColumnSpan="3"
+ 38: BackgroundColor="White"
+ 39: StrokeThickness="0"
+ 40: Stroke="Transparent">
+ 41: <Border.StrokeShape>
+ 42: <RoundRectangle CornerRadius="20" />
+ 43: </Border.StrokeShape>
+ 44: <Label Text="How are you feeling today?"
+ 45: FontSize="18"
+ 46: FontAttributes="Bold"
+ 47: TextColor="{StaticResource Gray900}"
+ 48: HorizontalOptions="Center"
+ 49: VerticalOptions="Center"
+ 50: Padding="20,15" />
+ 51: </Border>
+ 52:
+ 53: <!-- Mood Selection Collection -->
+ 54: <CollectionView Grid.Row="3"
+ 55: Grid.ColumnSpan="3"
+ 56: ItemsSource="{Binding Moods}"
+ 57: SelectionMode="None"
+ 58: HeightRequest="100">
+ 59: <CollectionView.ItemsLayout>
+ 60: <LinearItemsLayout Orientation="Horizontal"
+ 61: ItemSpacing="15" />
+ 62: </CollectionView.ItemsLayout>
+ 63:
+ 64: <CollectionView.ItemTemplate>
+ 65: <DataTemplate>
+ 66: <Grid RowDefinitions="*,Auto" ColumnDefinitions="*">
+ 67: <Border Grid.Row="0"
+ 68: Grid.RowSpan="2"
+ 69: BackgroundColor="{Binding Color}"
+ 70: StrokeThickness="0"
+ 71: Stroke="Transparent"
+ 72: HeightRequest="80"
+ 73: WidthRequest="80">
+ 74: <Border.StrokeShape>
+ 75: <RoundRectangle CornerRadius="25" />
+ 76: </Border.StrokeShape>
+ 77: <Border.GestureRecognizers>
+ 78: <TapGestureRecognizer Command="{Binding Source={RelativeSource AncestorType={x:Type vm:MainPageViewModel}}, Path=SelectMoodCommand}"
+ 79: CommandParameter="{Binding .}" />
+ 80: </Border.GestureRecognizers>
+ 81: </Border>
+ 82:
+ 83: <Label Grid.Row="0"
+ 84: Text="{Binding Emoji}"
+ 85: FontSize="24"
+ 86: HorizontalOptions="Center"
+ 87: VerticalOptions="Center" />
+ 88:
+ 89: <Label Grid.Row="1"
+ 90: Text="{Binding Name}"
+ 91: FontSize="10"
+ 92: TextColor="White"
+ 93: FontAttributes="Bold"
+ 94: HorizontalOptions="Center"
+ 95: VerticalOptions="End"
+ 96: Margin="0,0,0,10" />
+ 97: </Grid>
+ 98: </DataTemplate>
+ 99: </CollectionView.ItemTemplate>
+ 100: </CollectionView>
+ 101:
+ 102: <!-- Selected Mood Title -->
+ 103: <Border Grid.Row="4"
+ 104: Grid.ColumnSpan="3"
+ 105: BackgroundColor="White"
+ 106: StrokeThickness="0"
+ 107: Stroke="Transparent"
+ 108: IsVisible="{Binding HasSelectedMood}">
+ 109: <Border.StrokeShape>
+ 110: <RoundRectangle CornerRadius="20" />
+ 111: </Border.StrokeShape>
+ 112: <Label Text="Your Current Mood"
+ 113: FontSize="16"
+ 114: FontAttributes="Bold"
+ 115: TextColor="{StaticResource Gray900}"
+ 116: HorizontalOptions="Center"
+ 117: VerticalOptions="Center"
+ 118: Padding="20,15" />
+ 119: </Border>
+ 120:
+ 121: <!-- Selected Mood Emoji -->
+ 122: <Label Grid.Row="5"
+ 123: Grid.Column="0"
+ 124: Text="{Binding SelectedMood.Emoji}"
+ 125: FontSize="32"
+ 126: HorizontalOptions="End"
+ 127: VerticalOptions="Center"
+ 128: IsVisible="{Binding HasSelectedMood}" />
+ 129:
+ 130: <!-- Selected Mood Name -->
+ 131: <Label Grid.Row="5"
+ 132: Grid.Column="1"
+ 133: Text="{Binding SelectedMood.Name}"
+ 134: FontSize="18"
+ 135: FontAttributes="Bold"
+ 136: TextColor="{StaticResource Gray900}"
+ 137: HorizontalOptions="Center"
+ 138: VerticalOptions="Center"
+ 139: IsVisible="{Binding HasSelectedMood}" />
+ 140:
+ 141: <!-- Selected Mood Description -->
+ 142: <Label Grid.Row="6"
+ 143: Grid.ColumnSpan="3"
+ 144: Text="{Binding SelectedMood.Description}"
+ 145: FontSize="14"
+ 146: TextColor="{StaticResource Gray600}"
+ 147: HorizontalOptions="Center"
+ 148: VerticalOptions="Center"
+ 149: IsVisible="{Binding HasSelectedMood}" />
+ 150:
+ 151: <!-- Quote Section Title -->
+ 152: <Border Grid.Row="7"
+ 153: Grid.ColumnSpan="3"
+ 154: BackgroundColor="White"
+ 155: StrokeThickness="0"
+ 156: Stroke="Transparent">
+ 157: <Border.StrokeShape>
+ 158: <RoundRectangle CornerRadius="20" />
+ 159: </Border.StrokeShape>
+ 160: <Label Text="Daily Inspiration"
+ 161: FontSize="16"
+ 162: FontAttributes="Bold"
+ 163: TextColor="{StaticResource Gray900}"
+ 164: HorizontalOptions="Center"
+ 165: VerticalOptions="Center"
+ 166: Padding="20,15" />
+ 167: </Border>
+ 168:
+ 169: <!-- Quote Text -->
+ 170: <Border Grid.Row="8"
+ 171: Grid.ColumnSpan="3"
+ 172: BackgroundColor="White"
+ 173: StrokeThickness="0"
+ 174: Stroke="Transparent">
+ 175: <Border.StrokeShape>
+ 176: <RoundRectangle CornerRadius="20" />
+ 177: </Border.StrokeShape>
+ 178: <Label Text="{Binding CurrentQuote}"
+ 179: FontSize="16"
+ 180: TextColor="{StaticResource Gray700}"
+ 181: HorizontalTextAlignment="Center"
+ 182: VerticalOptions="Center"
+ 183: LineHeight="1.4"
+ 184: Padding="25" />
+ 185: </Border>
+ 186:
+ 187: <!-- New Quote Button -->
+ 188: <Button Grid.Row="9"
+ 189: Grid.ColumnSpan="3"
+ 190: Text="New Quote"
+ 191: Command="{Binding GenerateNewQuoteCommand}"
+ 192: BackgroundColor="{StaticResource Secondary}"
+ 193: TextColor="White"
+ 194: CornerRadius="15"
+ 195: FontAttributes="Bold"
+ 196: HeightRequest="45" />
+ 197:
+ 198: <!-- Reset Button -->
+ 199: <Button Grid.Row="10"
+ 200: Grid.ColumnSpan="3"
+ 201: Text="Reset Mood"
+ 202: Command="{Binding ResetMoodCommand}"
+ 203: BackgroundColor="White"
+ 204: TextColor="{StaticResource Primary}"
+ 205: CornerRadius="20"
+ 206: FontAttributes="Bold"
+ 207: HeightRequest="50"
+ 208: IsVisible="{Binding HasSelectedMood}" />
+ 209: </Grid>
+ 210: </ScrollView>
+ 211: </ContentPage>
Much better. I don't love that it is using GridDefinitions.Auto because it could cause negative performance problems in the future, but, for this simple app, it shouldn't be a problem. Approved ✅
Next, it genreated the XAML's code-behind file, MainPage.xaml.cs:
+ 1: using MoodBoost.ViewModels;
+ 2:
+ 3: namespace MoodBoost.Views;
+ 4:
+ 5: public partial class MainPage : ContentPage
+ 6: {
+ 7: public MainPage(MainPageViewModel viewModel)
+ 8: {
+ 9: InitializeComponent();
+ 10: BindingContext = viewModel;
+ 11: }
+ 12: }
Approved ✅
Next it generated the Color resources:
+ 1: <?xml version="1.0" encoding="UTF-8" ?>
+ 2: <?xaml-comp compile="true" ?>
+ 3: <ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+ 5:
+ 6: <!-- Primary Brand Colors -->
+ 7: <Color x:Key="Primary">#FF6B35</Color>
+ 8: <Color x:Key="PrimaryDark">#E55A2B</Color>
+ 9: <Color x:Key="PrimaryDarkText">#FFFFFF</Color>
+ 10:
+ 11: <!-- Secondary Colors -->
+ 12: <Color x:Key="Secondary">#4ECDC4</Color>
+ 13: <Color x:Key="SecondaryDarkText">#FFFFFF</Color>
+ 14:
+ 15: <!-- Tertiary Colors -->
+ 16: <Color x:Key="Tertiary">#2aa198</Color>
+ 17:
+ 18: <!-- Gray Scale -->
+ 19: <Color x:Key="White">White</Color>
+ 20: <Color x:Key="Black">Black</Color>
+ 21: <Color x:Key="Magenta">#D600AA</Color>
+ 22: <Color x:Key="MidnightBlue">#190649</Color>
+ 23: <Color x:Key="OffBlack">#1f1f1f</Color>
+ 24:
+ 25: <!-- Gray Palette -->
+ 26: <Color x:Key="Gray100">#E1E1E1</Color>
+ 27: <Color x:Key="Gray200">#C8C8C8</Color>
+ 28: <Color x:Key="Gray300">#ACACAC</Color>
+ 29: <Color x:Key="Gray400">#919191</Color>
+ 30: <Color x:Key="Gray500">#6E6E6E</Color>
+ 31: <Color x:Key="Gray600">#404040</Color>
+ 32: <Color x:Key="Gray900">#212121</Color>
+ 33: <Color x:Key="Gray950">#141414</Color>
+ 34:
+ 35: <!-- Mood Colors -->
+ 36: <Color x:Key="MoodFantastic">#4CAF50</Color>
+ 37: <Color x:Key="MoodHappy">#8BC34A</Color>
+ 38: <Color x:Key="MoodNeutral">#FFC107</Color>
+ 39: <Color x:Key="MoodDown">#FF9800</Color>
+ 40: <Color x:Key="MoodSad">#F44336</Color>
+ 41:
+ 42: </ResourceDictionary>
Approved ✅
And it generated the Style resources:
+ 1: <?xml version="1.0" encoding="UTF-8" ?>
+ 2: <?xaml-comp compile="true" ?>
+ 3: <ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+ 4: xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+ 5:
+ 6: <Style TargetType="ActivityIndicator">
+ 7: <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 8: </Style>
+ 9:
+ 10: <Style TargetType="IndicatorView">
+ 11: <Setter Property="IndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 12: <Setter Property="SelectedIndicatorColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray100}}" />
+ 13: </Style>
+ 14:
+ 15: <Style TargetType="Border">
+ 16: <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 17: <Setter Property="StrokeShape" Value="Rectangle" />
+ 18: <Setter Property="StrokeThickness" Value="1" />
+ 19: </Style>
+ 20:
+ 21: <Style TargetType="BoxView">
+ 22: <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
+ 23: </Style>
+ 24:
+ 25: <Style TargetType="Button">
+ 26: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Primary}}" />
+ 27: <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDarkText}}" />
+ 28: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 29: <Setter Property="FontSize" Value="14" />
+ 30: <Setter Property="BorderWidth" Value="0" />
+ 31: <Setter Property="CornerRadius" Value="8" />
+ 32: <Setter Property="Padding" Value="14,10" />
+ 33: <Setter Property="MinimumHeightRequest" Value="44" />
+ 34: <Setter Property="MinimumWidthRequest" Value="44" />
+ 35: <Setter Property="VisualStateManager.VisualStateGroups">
+ 36: <VisualStateGroupList>
+ 37: <VisualStateGroup x:Name="CommonStates">
+ 38: <VisualState x:Name="Normal" />
+ 39: <VisualState x:Name="Disabled">
+ 40: <VisualState.Setters>
+ 41: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 42: <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
+ 43: </VisualState.Setters>
+ 44: </VisualState>
+ 45: <VisualState x:Name="PointerOver" />
+ 46: </VisualStateGroup>
+ 47: </VisualStateGroupList>
+ 48: </Setter>
+ 49: </Style>
+ 50:
+ 51: <Style TargetType="CheckBox">
+ 52: <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 53: <Setter Property="MinimumHeightRequest" Value="44" />
+ 54: <Setter Property="MinimumWidthRequest" Value="44" />
+ 55: <Setter Property="VisualStateManager.VisualStateGroups">
+ 56: <VisualStateGroupList>
+ 57: <VisualStateGroup x:Name="CommonStates">
+ 58: <VisualState x:Name="Normal" />
+ 59: <VisualState x:Name="Disabled">
+ 60: <VisualState.Setters>
+ 61: <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 62: </VisualState.Setters>
+ 63: </VisualState>
+ 64: </VisualStateGroup>
+ 65: </VisualStateGroupList>
+ 66: </Setter>
+ 67: </Style>
+ 68:
+ 69: <Style TargetType="DatePicker">
+ 70: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 71: <Setter Property="BackgroundColor" Value="Transparent" />
+ 72: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 73: <Setter Property="FontSize" Value="14" />
+ 74: <Setter Property="MinimumHeightRequest" Value="44" />
+ 75: <Setter Property="MinimumWidthRequest" Value="44" />
+ 76: <Setter Property="VisualStateManager.VisualStateGroups">
+ 77: <VisualStateGroupList>
+ 78: <VisualStateGroup x:Name="CommonStates">
+ 79: <VisualState x:Name="Normal" />
+ 80: <VisualState x:Name="Disabled">
+ 81: <VisualState.Setters>
+ 82: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 83: </VisualState.Setters>
+ 84: </VisualState>
+ 85: </VisualStateGroup>
+ 86: </VisualStateGroupList>
+ 87: </Setter>
+ 88: </Style>
+ 89:
+ 90: <Style TargetType="Editor">
+ 91: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+ 92: <Setter Property="BackgroundColor" Value="Transparent" />
+ 93: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 94: <Setter Property="FontSize" Value="14" />
+ 95: <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 96: <Setter Property="MinimumHeightRequest" Value="44" />
+ 97: <Setter Property="MinimumWidthRequest" Value="44" />
+ 98: <Setter Property="VisualStateManager.VisualStateGroups">
+ 99: <VisualStateGroupList>
+ 100: <VisualStateGroup x:Name="CommonStates">
+ 101: <VisualState x:Name="Normal" />
+ 102: <VisualState x:Name="Disabled">
+ 103: <VisualState.Setters>
+ 104: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 105: </VisualState.Setters>
+ 106: </VisualState>
+ 107: </VisualStateGroup>
+ 108: </VisualStateGroupList>
+ 109: </Setter>
+ 110: </Style>
+ 111:
+ 112: <Style TargetType="Entry">
+ 113: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+ 114: <Setter Property="BackgroundColor" Value="Transparent" />
+ 115: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 116: <Setter Property="FontSize" Value="14" />
+ 117: <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 118: <Setter Property="MinimumHeightRequest" Value="44" />
+ 119: <Setter Property="MinimumWidthRequest" Value="44" />
+ 120: <Setter Property="VisualStateManager.VisualStateGroups">
+ 121: <VisualStateGroupList>
+ 122: <VisualStateGroup x:Name="CommonStates">
+ 123: <VisualState x:Name="Normal" />
+ 124: <VisualState x:Name="Disabled">
+ 125: <VisualState.Setters>
+ 126: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 127: </VisualState.Setters>
+ 128: </VisualState>
+ 129: </VisualStateGroup>
+ 130: </VisualStateGroupList>
+ 131: </Setter>
+ 132: </Style>
+ 133:
+ 134: <Style TargetType="ImageButton">
+ 135: <Setter Property="Opacity" Value="1" />
+ 136: <Setter Property="BorderColor" Value="Transparent" />
+ 137: <Setter Property="BorderWidth" Value="0" />
+ 138: <Setter Property="CornerRadius" Value="0" />
+ 139: <Setter Property="MinimumHeightRequest" Value="44" />
+ 140: <Setter Property="MinimumWidthRequest" Value="44" />
+ 141: <Setter Property="VisualStateManager.VisualStateGroups">
+ 142: <VisualStateGroupList>
+ 143: <VisualStateGroup x:Name="CommonStates">
+ 144: <VisualState x:Name="Normal" />
+ 145: <VisualState x:Name="Disabled">
+ 146: <VisualState.Setters>
+ 147: <Setter Property="Opacity" Value="0.5" />
+ 148: </VisualState.Setters>
+ 149: </VisualState>
+ 150: <VisualState x:Name="PointerOver" />
+ 151: </VisualStateGroup>
+ 152: </VisualStateGroupList>
+ 153: </Setter>
+ 154: </Style>
+ 155:
+ 156: <Style TargetType="Label">
+ 157: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 158: <Setter Property="BackgroundColor" Value="Transparent" />
+ 159: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 160: <Setter Property="FontSize" Value="14" />
+ 161: <Setter Property="VisualStateManager.VisualStateGroups">
+ 162: <VisualStateGroupList>
+ 163: <VisualStateGroup x:Name="CommonStates">
+ 164: <VisualState x:Name="Normal" />
+ 165: <VisualState x:Name="Disabled">
+ 166: <VisualState.Setters>
+ 167: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 168: </VisualState.Setters>
+ 169: </VisualState>
+ 170: </VisualStateGroup>
+ 171: </VisualStateGroupList>
+ 172: </Setter>
+ 173: </Style>
+ 174:
+ 175: <Style TargetType="ListView">
+ 176: <Setter Property="SeparatorColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />
+ 177: <Setter Property="RefreshControlColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
+ 178: </Style>
+ 179:
+ 180: <Style TargetType="Picker">
+ 181: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 182: <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
+ 183: <Setter Property="BackgroundColor" Value="Transparent" />
+ 184: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 185: <Setter Property="FontSize" Value="14" />
+ 186: <Setter Property="MinimumHeightRequest" Value="44" />
+ 187: <Setter Property="MinimumWidthRequest" Value="44" />
+ 188: <Setter Property="VisualStateManager.VisualStateGroups">
+ 189: <VisualStateGroupList>
+ 190: <VisualStateGroup x:Name="CommonStates">
+ 191: <VisualState x:Name="Normal" />
+ 192: <VisualState x:Name="Disabled">
+ 193: <VisualState.Setters>
+ 194: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 195: <Setter Property="TitleColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 196: </VisualState.Setters>
+ 197: </VisualState>
+ 198: </VisualStateGroup>
+ 199: </VisualStateGroupList>
+ 200: </Setter>
+ 201: </Style>
+ 202:
+ 203: <Style TargetType="ProgressBar">
+ 204: <Setter Property="ProgressColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 205: <Setter Property="VisualStateManager.VisualStateGroups">
+ 206: <VisualStateGroupList>
+ 207: <VisualStateGroup x:Name="CommonStates">
+ 208: <VisualState x:Name="Normal" />
+ 209: <VisualState x:Name="Disabled">
+ 210: <VisualState.Setters>
+ 211: <Setter Property="ProgressColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 212: </VisualState.Setters>
+ 213: </VisualState>
+ 214: </VisualStateGroup>
+ 215: </VisualStateGroupList>
+ 216: </Setter>
+ 217: </Style>
+ 218:
+ 219: <Style TargetType="RadioButton">
+ 220: <Setter Property="BackgroundColor" Value="Transparent" />
+ 221: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
+ 222: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 223: <Setter Property="FontSize" Value="14" />
+ 224: <Setter Property="MinimumHeightRequest" Value="44" />
+ 225: <Setter Property="MinimumWidthRequest" Value="44" />
+ 226: <Setter Property="VisualStateManager.VisualStateGroups">
+ 227: <VisualStateGroupList>
+ 228: <VisualStateGroup x:Name="CommonStates">
+ 229: <VisualState x:Name="Normal" />
+ 230: <VisualState x:Name="Disabled">
+ 231: <VisualState.Setters>
+ 232: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 233: </VisualState.Setters>
+ 234: </VisualState>
+ 235: </VisualStateGroup>
+ 236: </VisualStateGroupList>
+ 237: </Setter>
+ 238: </Style>
+ 239:
+ 240: <Style TargetType="RefreshView">
+ 241: <Setter Property="RefreshColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
+ 242: </Style>
+ 243:
+ 244: <Style TargetType="SearchBar">
+ 245: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 246: <Setter Property="PlaceholderColor" Value="{StaticResource Gray500}" />
+ 247: <Setter Property="CancelButtonColor" Value="{StaticResource Gray500}" />
+ 248: <Setter Property="BackgroundColor" Value="Transparent" />
+ 249: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 250: <Setter Property="FontSize" Value="14" />
+ 251: <Setter Property="MinimumHeightRequest" Value="44" />
+ 252: <Setter Property="MinimumWidthRequest" Value="44" />
+ 253: <Setter Property="VisualStateManager.VisualStateGroups">
+ 254: <VisualStateGroupList>
+ 255: <VisualStateGroup x:Name="CommonStates">
+ 256: <VisualState x:Name="Normal" />
+ 257: <VisualState x:Name="Disabled">
+ 258: <VisualState.Setters>
+ 259: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 260: <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 261: </VisualState.Setters>
+ 262: </VisualState>
+ 263: </VisualStateGroup>
+ 264: </VisualStateGroupList>
+ 265: </Setter>
+ 266: </Style>
+ 267:
+ 268: <Style TargetType="SearchHandler">
+ 269: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 270: <Setter Property="PlaceholderColor" Value="{StaticResource Gray500}" />
+ 271: <Setter Property="BackgroundColor" Value="Transparent" />
+ 272: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 273: <Setter Property="FontSize" Value="14" />
+ 274: <Setter Property="VisualStateManager.VisualStateGroups">
+ 275: <VisualStateGroupList>
+ 276: <VisualStateGroup x:Name="CommonStates">
+ 277: <VisualState x:Name="Normal" />
+ 278: <VisualState x:Name="Disabled">
+ 279: <VisualState.Setters>
+ 280: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 281: <Setter Property="PlaceholderColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 282: </VisualState.Setters>
+ 283: </VisualState>
+ 284: </VisualStateGroup>
+ 285: </VisualStateGroupList>
+ 286: </Setter>
+ 287: </Style>
+ 288:
+ 289: <Style TargetType="Shadow">
+ 290: <Setter Property="Radius" Value="15" />
+ 291: <Setter Property="Opacity" Value="0.5" />
+ 292: <Setter Property="Brush" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
+ 293: <Setter Property="Offset" Value="0,2" />
+ 294: </Style>
+ 295:
+ 296: <Style TargetType="Slider">
+ 297: <Setter Property="MinimumTrackColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 298: <Setter Property="MaximumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
+ 299: <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 300: <Setter Property="VisualStateManager.VisualStateGroups">
+ 301: <VisualStateGroupList>
+ 302: <VisualStateGroup x:Name="CommonStates">
+ 303: <VisualState x:Name="Normal" />
+ 304: <VisualState x:Name="Disabled">
+ 305: <VisualState.Setters>
+ 306: <Setter Property="MinimumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 307: <Setter Property="MaximumTrackColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 308: <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 309: </VisualState.Setters>
+ 310: </VisualState>
+ 311: </VisualStateGroup>
+ 312: </VisualStateGroupList>
+ 313: </Setter>
+ 314: </Style>
+ 315:
+ 316: <Style TargetType="SwipeItem">
+ 317: <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+ 318: </Style>
+ 319:
+ 320: <Style TargetType="Switch">
+ 321: <Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 322: <Setter Property="ThumbColor" Value="{StaticResource White}" />
+ 323: <Setter Property="VisualStateManager.VisualStateGroups">
+ 324: <VisualStateGroupList>
+ 325: <VisualStateGroup x:Name="CommonStates">
+ 326: <VisualState x:Name="Normal" />
+ 327: <VisualState x:Name="Disabled">
+ 328: <VisualState.Setters>
+ 329: <Setter Property="OnColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 330: <Setter Property="ThumbColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 331: </VisualState.Setters>
+ 332: </VisualState>
+ 333: </VisualStateGroup>
+ 334: </VisualStateGroupList>
+ 335: </Setter>
+ 336: </Style>
+ 337:
+ 338: <Style TargetType="TimePicker">
+ 339: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource White}}" />
+ 340: <Setter Property="BackgroundColor" Value="Transparent" />
+ 341: <Setter Property="FontFamily" Value="OpenSansRegular" />
+ 342: <Setter Property="FontSize" Value="14" />
+ 343: <Setter Property="MinimumHeightRequest" Value="44" />
+ 344: <Setter Property="MinimumWidthRequest" Value="44" />
+ 345: <Setter Property="VisualStateManager.VisualStateGroups">
+ 346: <VisualStateGroupList>
+ 347: <VisualStateGroup x:Name="CommonStates">
+ 348: <VisualState x:Name="Normal" />
+ 349: <VisualState x:Name="Disabled">
+ 350: <VisualState.Setters>
+ 351: <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
+ 352: </VisualState.Setters>
+ 353: </VisualState>
+ 354: </VisualStateGroup>
+ 355: </VisualStateGroupList>
+ 356: </Setter>
+ 357: </Style>
+ 358:
+ 359: <Style TargetType="Page" ApplyToDerivedTypes="True">
+ 360: <Setter Property="Padding" Value="0" />
+ 361: <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource OffBlack}}" />
+ 362: </Style>
+ 363:
+ 364: <Style TargetType="Shell" ApplyToDerivedTypes="True">
+ 365: <Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
+ 366: <Setter Property="Shell.ForegroundColor" Value="{OnPlatform WinUI={StaticResource White}, Default={StaticResource White}}" />
+ 367: <Setter Property="Shell.TitleColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource White}}" />
+ 368: <Setter Property="Shell.DisabledColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
+ 369: <Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray200}}" />
+ 370: <Setter Property="Shell.NavBarHasShadow" Value="False" />
+ 371: <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
+ 372: <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 373: <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 374: <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource Gray900}, Dark={StaticResource Gray200}}" />
+ 375: </Style>
+ 376:
+ 377: <Style TargetType="NavigationPage">
+ 378: <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Gray950}}" />
+ 379: <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
+ 380: <Setter Property="IconColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource White}}" />
+ 381: </Style>
+ 382:
+ 383: <Style TargetType="TabbedPage">
+ 384: <Setter Property="BarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Gray950}}" />
+ 385: <Setter Property="BarTextColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
+ 386: <Setter Property="UnselectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray950}}" />
+ 387: <Setter Property="SelectedTabColor" Value="{AppThemeBinding Light={StaticResource Gray950}, Dark={StaticResource Gray200}}" />
+ 388: </Style>
+ 389:
+ 390: </ResourceDictionary>
Approved ✅
Next it generated Fonts
Path: /Users/minnbran/MoodBoost/Resources/Fonts/OpenSans-Semibold.ttf
+ 1: # This is a placeholder for the OpenSans-Regular.ttf font file
+ 2: # In a real project, you would download this from Google Fonts or use the default MAUI template fonts
Approved ✅
Next it generated an App Icon backgroung as a SVG:
+ 1: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+ 2: <svg width="456" height="456" viewBox="0 0 456 456" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ 3: <rect x="0" y="0" width="456" height="456" fill="#FF6B35" rx="50"/>
+ 4: <circle cx="228" cy="200" r="80" fill="#FFFFFF"/>
+ 5: <circle cx="200" cy="180" r="8" fill="#FF6B35"/>
+ 6: <circle cx="256" cy="180" r="8" fill="#FF6B35"/>
+ 7: <path d="M 180 220 Q 228 260 276 220" stroke="#FF6B35" stroke-width="6" fill="none" stroke-linecap="round"/>
+ 8: <text x="228" y="350" font-family="Arial, sans-serif" font-size="48" font-weight="bold" text-anchor="middle" fill="#FFFFFF">MoodBoost</text>
+ 9: </svg>
Approved ✅
Next it generated an App Icon foreground as a SVG:
+ 1: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+ 2: <svg width="456" height="456" viewBox="0 0 456 456" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ 3: <circle cx="228" cy="200" r="80" fill="#FF6B35"/>
+ 4: <circle cx="200" cy="180" r="8" fill="#FFFFFF"/>
+ 5: <circle cx="256" cy="180" r="8" fill="#FFFFFF"/>
+ 6: <path d="M 180 220 Q 228 260 276 220" stroke="#FFFFFF" stroke-width="6" fill="none" stroke-linecap="round"/>
+ 7: </svg>
Approved ✅
Next it generated a Splash Screen as a SVG:
+ 1: <?xml version="1.0" encoding="UTF-8" standalone="no"?>
+ 2: <svg width="456" height="456" viewBox="0 0 456 456" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ 3: <rect x="0" y="0" width="456" height="456" fill="#FF6B35"/>
+ 4: <circle cx="228" cy="228" r="100" fill="#FFFFFF"/>
+ 5: <circle cx="190" cy="200" r="12" fill="#FF6B35"/>
+ 6: <circle cx="266" cy="200" r="12" fill="#FF6B35"/>
+ 7: <path d="M 170 250 Q 228 300 286 250" stroke="#FF6B35" stroke-width="8" fill="none" stroke-linecap="round"/>
+ 8: </svg>
Approved ✅
In its last step, it generated a README. However, I notice that it hasn't generated the /Platforms/ folder, required to run .NET MAUI on Android + iOS. Let's interrupt it with a new prompt asking it to generate this folder and all files inside.
Prompt
The app is missing the/Platforms/folder that is included in the .NET MAUI template. Please reference the latest .NET MAUI Template found here, https://github.com/dotnet/maui/tree/main/src/Templates/src/templates/maui-mobile, and add the/Platforms/iOS/and/Platforms/Android/folders and their associated files required to run this .NET MAUI app.
Following this request, it added the folders /Platforms/iOS/ and /Platforms/Android/, and it added the boiler-plate files required ro run the app on iOS and Android.
Since these files are included in the .NET MAUI Template when creating a File -> New .NET MAUI application in Visual Studio, I have omitted the Q Developer CLI output here. Approved ✅
Lastly, it generated a README.md:
+ 1: # MoodBoost - Daily Mood Tracker & Motivational App
+ 2:
+ 3: A fun, polished .NET MAUI application that helps users track their daily mood and provides motivational quotes for inspiration.
+ 4:
+ 5: ## Features
+ 6:
+ 7: - **Daily Mood Tracking**: Select from 5 different mood states with colorful emoji representations
+ 8: - **Motivational Quotes**: Get inspired with randomly generated motivational quotes
+ 9: - **Professional UI**: Clean, modern design with smooth interactions using Grid layouts and Border controls
+ 10: - **Cross-Platform**: Runs on Android and iOS devices
+ 11:
+ 12: ## Technical Stack
+ 13:
+ 14: - **.NET 9.0** - Latest .NET framework
+ 15: - **.NET MAUI** - Cross-platform UI framework
+ 16: - **CommunityToolkit.Mvvm 8.4.0** - MVVM pattern implementation with partial properties
+ 17: - **CommunityToolkit.Maui 12.0.0** - Additional MAUI controls and helpers
+ 18: - **MVVM Architecture** - Clean separation of concerns
+ 19: - **Modern C# Features** - Collection expressions, partial properties, DateTimeOffset, Random.Shared
+ 20:
+ 21: ## Architecture
+ 22:
+ 23: The app follows MVVM (Model-View-ViewModel) architecture with StyleCop SA1201 compliance:
+ 24:
+ 25: - **Models**: `MoodEntry` record and `MoodData` static class with immutable collections using IReadOnlyList
+ 26: - **ViewModels**: `MainPageViewModel` with partial observable properties and relay commands
+ 27: - **Views**: `MainPage` with professional UI using only Grid layouts (no nested StackLayouts)
+ 28:
+ 29: ## Code Quality Features
+ 30:
+ 31: - **StyleCop SA1201 Compliance** - Proper element ordering (constructors, properties, methods)
+ 32: - **Collection Expressions** - Modern C# syntax `[...]` for collection initialization
+ 33: - **Partial Properties** - Latest CommunityToolkit.Mvvm 8.4.0 features
+ 34: - **Immutable Models** - Using records and IReadOnlyList for data safety
+ 35: - **DateTimeOffset** - Proper date/time handling instead of DateTime
+ 36: - **Random.Shared** - Efficient random number generation
+ 37: - **Border Controls** - Modern UI using Border instead of Frame
+ 38: - **Grid-Only Layouts** - No nested StackLayouts, pure Grid with RowDefinitions/ColumnDefinitions
+ 39:
+ 40: ## Build Requirements
+ 41:
+ 42: - Visual Studio 2022 (latest version)
+ 43: - .NET 9.0 SDK
+ 44: - Android SDK (for Android deployment)
+ 45: - Xcode (for iOS deployment on macOS)
+ 46:
+ 47: ## Build Instructions
+ 48:
+ 49: 1. Open the solution in Visual Studio 2022
+ 50: 2. Restore NuGet packages
+ 51: 3. Select your target platform (Android/iOS)
+ 52: 4. Build and deploy to device or emulator
+ 53:
+ 54: ## Project Structure
+ 55:
+ 56: ```
+ 57: MoodBoost/
+ 58: ├── Models/
+ 59: │ └── MoodEntry.cs # Data models and static data with collection expressions
+ 60: ├── ViewModels/
+ 61: │ └── MainPageViewModel.cs # MVVM view model with partial properties
+ 62: ├── Views/
+ 63: │ └── MainPage.xaml(.cs) # Main UI page with Grid-only layout
+ 64: ├── Resources/
+ 65: │ ├── Styles/
+ 66: │ │ ├── Colors.xaml # App color palette
+ 67: │ │ └── Styles.xaml # UI styles and themes
+ 68: │ ├── Fonts/ # Custom fonts
+ 69: │ ├── AppIcon/ # App icons (SVG)
+ 70: │ └── Splash/ # Splash screen
+ 71: ├── Platforms/
+ 72: │ ├── Android/ # Android-specific files
+ 73: │ │ ├── MainActivity.cs
+ 74: │ │ ├── MainApplication.cs
+ 75: │ │ ├── AndroidManifest.xml
+ 76: │ │ └── Resources/ # Android resources
+ 77: │ └── iOS/ # iOS-specific files
+ 78: │ ├── AppDelegate.cs
+ 79: │ ├── Program.cs
+ 80: │ ├── Info.plist
+ 81: │ └── LaunchScreen.storyboard
+ 82: ├── App.xaml(.cs) # Application entry point
+ 83: ├── AppShell.xaml(.cs) # Shell navigation
+ 84: ├── MauiProgram.cs # MAUI app configuration
+ 85: └── MoodBoost.csproj # Project file with .NET 9 and latest packages
+ 86: ```
+ 87:
+ 88: ## UI Design Philosophy
+ 89:
+ 90: The app features a vibrant, professional design with:
+ 91: - **Primary Color**: Orange (#FF6B35) for energy and positivity
+ 92: - **Secondary Color**: Teal (#4ECDC4) for balance and calm
+ 93: - **Clean Design**: White cards with rounded corners using Border controls
+ 94: - **Modern Typography**: OpenSans font family
+ 95: - **Responsive Layout**: Pure Grid system without nested layouts
+ 96: - **Visual Hierarchy**: Proper spacing and color contrast
+ 97:
+ 98: ## Mood States
+ 99:
+ 100: 1. **Fantastic** 😄 - Green (#4CAF50) - "I'm feeling amazing today!"
+ 101: 2. **Happy** 😊 - Light Green (#8BC34A) - "Things are going well!"
+ 102: 3. **Neutral** 😐 - Yellow (#FFC107) - "Just an ordinary day"
+ 103: 4. **Down** 😔 - Orange (#FF9800) - "Not my best day"
+ 104: 5. **Sad** 😢 - Red (#F44336) - "Feeling quite low today"
+ 105:
+ 106: Each mood includes an emoji, name, description, and associated color for immediate visual feedback.
+ 107:
+ 108: ## Development Best Practices
+ 109:
+ 110: - **Immutable Data**: All collections use IReadOnlyList and collection expressions
+ 111: - **Type Safety**: Nullable reference types enabled
+ 112: - **Modern Patterns**: Latest C# language features and MVVM toolkit
+ 113: - **Platform Integration**: Proper Android and iOS platform-specific implementations
+ 114: - **Performance**: Efficient UI rendering with Grid-only layouts
+ 115: - **Maintainability**: Clean architecture with clear separation of concerns
+ 116:
+ 117: ## Getting Started
+ 118:
+ 119: 1. Clone the repository
+ 120: 2. Open `MoodBoost.sln` in Visual Studio 2022
+ 121: 3. Ensure .NET 9.0 SDK is installed
+ 122: 4. Select your target platform (Android/iOS)
+ 123: 5. Build and run the application
+ 124:
+ 125: The app will launch with today's date displayed and allow you to select your current mood, view motivational quotes, and track your daily emotional state with a beautiful, professional interface.