# MAUI Branding Expert Reference / Tham Chiếu

Complete code examples cho skill `maui-branding-expert`.

---

## 1. Complete Colors.xaml

```xml
<?xml version="1.0" encoding="utf-8" ?>
<ResourceDictionary xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                    x:Class="MyApp.Resources.Styles.Colors">

    <!-- Brand Colors -->
    <Color x:Key="BrandPrimary">#FF5733</Color>
    <Color x:Key="BrandPrimaryDark">#E64A2E</Color>
    <Color x:Key="BrandSecondary">#3498DB</Color>

    <!-- Semantic Colors -->
    <Color x:Key="ColorSuccess">#27AE60</Color>
    <Color x:Key="ColorError">#E74C3C</Color>
    <Color x:Key="ColorWarning">#F39C12</Color>

    <!-- Surface (Theme-aware) -->
    <Color x:Key="SurfaceBackground">{AppThemeBinding Light=#FAFAFA, Dark=#121212}</Color>
    <Color x:Key="SurfaceCard">{AppThemeBinding Light=#FFFFFF, Dark=#1E1E1E}</Color>

    <!-- Text (Theme-aware) -->
    <Color x:Key="TextPrimary">{AppThemeBinding Light=#212121, Dark=#FFFFFF}</Color>
    <Color x:Key="TextSecondary">{AppThemeBinding Light=#757575, Dark=#B0B0B0}</Color>

</ResourceDictionary>
```

---

## 2. BrandEntry Handler

```csharp
// Handlers/BrandEntryHandler.cs
namespace MyApp.Handlers;

public static class BrandEntryHandler
{
    public static void Configure()
    {
        Microsoft.Maui.Handlers.EntryHandler.Mapper.AppendToMapping(
            "BrandEntry", (handler, view) =>
        {
#if ANDROID
            handler.PlatformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
#elif IOS
            handler.PlatformView.BorderStyle = UIKit.UITextBorderStyle.None;
#endif
        });
    }
}
```

---

## 3. BrandButton Style

```xml
<!-- Theme.xaml -->
<Style x:Key="BrandButton" TargetType="Button">
    <Setter Property="BackgroundColor">
        <Setter.Value>
            <AppThemeBinding Light="{StaticResource BrandPrimary}" 
                             Dark="#1E1E1E" />
        </Setter.Value>
    </Setter>
    <Setter Property="TextColor" Value="White" />
    <Setter Property="FontFamily" Value="InterBold" />
    <Setter Property="CornerRadius" Value="8" />
    <Setter Property="Padding" Value="24,12" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup>
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Pressed">
                    <VisualState.Setters>
                        <Setter Property="Scale" Value="0.98" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
```

---

## 4. CardView ControlTemplate

```xml
<!-- Controls/CardView.xaml -->
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.Controls.CardView">
    <ContentView.ControlTemplate>
        <ControlTemplate>
            <Border StrokeThickness="0"
                    StrokeShape="RoundRectangle 12"
                    BackgroundColor="{StaticResource SurfaceCard}">
                <Border.Shadow>
                    <Shadow Brush="Black" Opacity="0.1" Radius="8" />
                </Border.Shadow>
                <ContentPresenter Padding="16" />
            </Border>
        </ControlTemplate>
    </ContentView.ControlTemplate>
</ContentView>
```

---

## 5. MauiProgram.cs Setup

```csharp
using MyApp.Handlers;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseMauiCommunityToolkit()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Inter-Regular.ttf", "InterRegular");
                fonts.AddFont("Inter-Bold.ttf", "InterBold");
            });

        // Configure brand handlers
        BrandEntryHandler.Configure();

        return builder.Build();
    }
}
```

---

## 6. App.xaml MergedDictionaries

```xml
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/Styles/Colors.xaml" />
                <ResourceDictionary Source="Resources/Styles/Typography.xaml" />
                <ResourceDictionary Source="Resources/Styles/Theme.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>
```

---

## Usage Example

```xml
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:controls="clr-namespace:MyApp.Controls">

    <VerticalStackLayout Padding="20" Spacing="16">
        
        <Entry Style="{StaticResource EntryDefault}" 
               Placeholder="Email" />
        
        <Button Style="{StaticResource BrandButton}" 
                Text="Sign In" />
        
        <controls:CardView>
            <Label Text="Card content here" />
        </controls:CardView>
        
    </VerticalStackLayout>

</ContentPage>
```
