Devs School

Create Viral Videos with SORA in .NET MAUI

Tue, 22 Jul 2025 16:12:34 GMT

Hello devs! I'm so excited to be part of the .NET MAUI UI July – 2025 calendar! I invite you to explore all the fabulous posts that other authors have published on topics related to .NET MAUI.

In this post, I'm going to show you how I created an application that connects to the SORA service of Azure OpenAI for generating stunning videos. This project is just a part of a more complex system that I developed some time ago that allows for automated YouTube video generation. Personally, it's a topic that I'm passionate about, and I found it interesting to share it with you. I should add that I made extensive use of the VS Code agent to speed up the demo development. Let's get started!

General Overview of the Video Generator Using SORA

The video generation project contains 4 main pages that guide the user through the process of generating a video. These pages are as follows:

AddVideoIdeaPage.xaml: Page to enter the video prompt and configuration

SettingsPage.xaml: Page to add the keys for the Azure OpenAI services

VideoDisplayPage.xaml: Page that displays the generated video

VideoPromptsPage.xaml: Page that creates the enhanced prompt for video generation

Next, I'll show you each of the pages:

Creating the Settings Page

Let's start with the simplest page, which is the settings page for entering keys to connect the app with the Azure OpenAI services. In this case, the definition of the XAML page looks as follows:

				
					<ScrollView>
    <VerticalStackLayout Padding="20" Spacing="25">

        <!--  Page Header  -->
        <VerticalStackLayout Spacing="5">
            <Label
                FontAttributes="Bold"
                FontSize="28"
                HorizontalOptions="Center"
                Text="App Settings"
                TextColor="{AppThemeBinding Light={StaticResource Primary},
                                            Dark={StaticResource White}}" />

            <Label
                FontSize="14"
                HorizontalOptions="Center"
                Text="Configure your AI services connections"
                TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                            Dark={StaticResource Gray300}}" />
        </VerticalStackLayout>

        <!--  Azure LLM Configuration Section  -->
        <Border
            Padding="20"
            BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                Dark={StaticResource Gray900}}"
            Stroke="{AppThemeBinding Light={StaticResource Gray200},
                                        Dark={StaticResource Gray600}}"
            StrokeShape="RoundRectangle 12"
            StrokeThickness="1">

            <VerticalStackLayout Spacing="15">

                <!--  Section Header  -->
                <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="10">
                    <Border
                        Grid.Column="0"
                        BackgroundColor="{AppThemeBinding Light={StaticResource Primary},
                                                            Dark={StaticResource Primary}}"
                        HeightRequest="32"
                        StrokeShape="RoundRectangle 8"
                        VerticalOptions="Center"
                        WidthRequest="32">
                        <Label
                            FontSize="16"
                            HorizontalOptions="Center"
                            Text="🧠"
                            TextColor="White"
                            VerticalOptions="Center" />
                    </Border>

                    <VerticalStackLayout Grid.Column="1" VerticalOptions="Center">
                        <Label
                            FontAttributes="Bold"
                            FontSize="18"
                            Text="Azure LLM Service"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                        <Label
                            FontSize="12"
                            Text="Configure your Azure Language Model connection"
                            TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                        Dark={StaticResource Gray400}}" />
                    </VerticalStackLayout>

                    <Button
                        Grid.Column="2"
                        BackgroundColor="Transparent"
                        BorderColor="{AppThemeBinding Light={StaticResource Primary},
                                                        Dark={StaticResource White}}"
                        BorderWidth="1"
                        Command="{Binding TestAzureLlmConnectionCommand}"
                        CornerRadius="8"
                        FontSize="12"
                        HeightRequest="32"
                        IsEnabled="{Binding IsAzureLlmConfigComplete}"
                        Text="Test"
                        TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                    Dark={StaticResource White}}"
                        WidthRequest="60" />
                </Grid>

                <!--  Endpoint Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Endpoint URL"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Entry
                            FontSize="14"
                            Placeholder="https://your-resource.openai.azure.com/"
                            PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                Dark={StaticResource Gray500}}"
                            Text="{Binding AzureLlmEndpoint}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </VerticalStackLayout>

                <!--  API Key Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="API Key"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Grid ColumnDefinitions="*,Auto">
                            <Entry
                                Grid.Column="0"
                                FontSize="14"
                                IsPassword="{Binding IsAzureLlmApiKeyVisible, Converter={StaticResource InvertedBoolConverter}}"
                                Placeholder="Enter your Azure API key"
                                PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                    Dark={StaticResource Gray500}}"
                                Text="{Binding AzureLlmApiKey}"
                                TextColor="{AppThemeBinding Light={StaticResource Black},
                                                            Dark={StaticResource White}}" />

                            <Button
                                Grid.Column="1"
                                BackgroundColor="Transparent"
                                Command="{Binding ToggleAzureLlmApiKeyVisibilityCommand}"
                                FontSize="16"
                                Padding="5"
                                Text="{Binding AzureLlmApiKeyToggleIcon}"
                                TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                            Dark={StaticResource Gray400}}" />
                        </Grid>
                    </Border>
                </VerticalStackLayout>

                <!--  Deployment Name Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Deployment Name"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Entry
                            FontSize="14"
                            Placeholder="gpt-4, gpt-35-turbo, etc."
                            PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                Dark={StaticResource Gray500}}"
                            Text="{Binding AzureLlmDeployment}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </VerticalStackLayout>

            </VerticalStackLayout>
        </Border>

        <!--  SORA Configuration Section  -->
        <Border
            Padding="20"
            BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                Dark={StaticResource Gray900}}"
            Stroke="{AppThemeBinding Light={StaticResource Gray200},
                                        Dark={StaticResource Gray600}}"
            StrokeShape="RoundRectangle 12"
            StrokeThickness="1">

            <VerticalStackLayout Spacing="15">

                <!--  Section Header  -->
                <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="10">
                    <Border
                        Grid.Column="0"
                        BackgroundColor="{AppThemeBinding Light={StaticResource Primary},
                                                            Dark={StaticResource Primary}}"
                        HeightRequest="32"
                        StrokeShape="RoundRectangle 8"
                        VerticalOptions="Center"
                        WidthRequest="32">
                        <Label
                            FontSize="16"
                            HorizontalOptions="Center"
                            Text="🎬"
                            TextColor="White"
                            VerticalOptions="Center" />
                    </Border>

                    <VerticalStackLayout Grid.Column="1" VerticalOptions="Center">
                        <Label
                            FontAttributes="Bold"
                            FontSize="18"
                            Text="SORA Video Service"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                        <Label
                            FontSize="12"
                            Text="Configure your SORA video generation connection"
                            TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                        Dark={StaticResource Gray400}}" />
                    </VerticalStackLayout>

                    <Button
                        Grid.Column="2"
                        BackgroundColor="Transparent"
                        BorderColor="{AppThemeBinding Light={StaticResource Primary},
                                                        Dark={StaticResource White}}"
                        BorderWidth="1"
                        Command="{Binding TestSoraConnectionCommand}"
                        CornerRadius="8"
                        FontSize="12"
                        HeightRequest="32"
                        IsEnabled="{Binding IsSoraConfigComplete}"
                        Text="Test"
                        TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                    Dark={StaticResource White}}"
                        WidthRequest="60" />
                </Grid>

                <!--  Endpoint Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Endpoint URL"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Entry
                            FontSize="14"
                            Placeholder="https://api.openai.com/v1/sora/"
                            PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                Dark={StaticResource Gray500}}"
                            Text="{Binding SoraEndpoint}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </VerticalStackLayout>

                <!--  API Key Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="API Key"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Grid ColumnDefinitions="*,Auto">
                            <Entry
                                Grid.Column="0"
                                FontSize="14"
                                IsPassword="{Binding IsSoraApiKeyVisible, Converter={StaticResource InvertedBoolConverter}}"
                                Placeholder="Enter your SORA API key"
                                PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                    Dark={StaticResource Gray500}}"
                                Text="{Binding SoraApiKey}"
                                TextColor="{AppThemeBinding Light={StaticResource Black},
                                                            Dark={StaticResource White}}" />

                            <Button
                                Grid.Column="1"
                                BackgroundColor="Transparent"
                                Command="{Binding ToggleSoraApiKeyVisibilityCommand}"
                                FontSize="16"
                                Padding="5"
                                Text="{Binding SoraApiKeyToggleIcon}"
                                TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                            Dark={StaticResource Gray400}}" />
                        </Grid>
                    </Border>
                </VerticalStackLayout>

                <!--  Deployment Name Field  -->
                <VerticalStackLayout Spacing="5">
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Model Name"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Border
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                    Dark={StaticResource Gray500}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Entry
                            FontSize="14"
                            Placeholder="sora-1.0, sora-turbo, etc."
                            PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                                Dark={StaticResource Gray500}}"
                            Text="{Binding SoraDeployment}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </VerticalStackLayout>

            </VerticalStackLayout>
        </Border>

        <!--  Action Buttons  -->
        <Grid ColumnDefinitions="*,*" ColumnSpacing="15" Margin="0,10,0,0">

            <Button
                Grid.Column="0"
                BackgroundColor="Transparent"
                BorderColor="#DC3545"
                BorderWidth="2"
                Command="{Binding ClearSettingsCommand}"
                CornerRadius="25"
                FontAttributes="Bold"
                FontSize="16"
                HeightRequest="50"
                Text="Clear All"
                TextColor="#DC3545" />

            <Button
                Grid.Column="1"
                BackgroundColor="{StaticResource Primary}"
                Command="{Binding SaveSettingsCommand}"
                CornerRadius="25"
                FontAttributes="Bold"
                FontSize="16"
                HeightRequest="50"
                IsEnabled="{Binding IsSaving, Converter={StaticResource InvertedBoolConverter}}"
                Text="Save Settings"
                TextColor="White" />

        </Grid>

        <!--  Loading Indicator  -->
        <VerticalStackLayout IsVisible="{Binding IsSaving}" 
                        Padding="20"
                        HorizontalOptions="Center" 
                        VerticalOptions="Center"
                        Spacing="15">
            
            <ActivityIndicator IsRunning="{Binding IsSaving}"
                                Color="{StaticResource Primary}"
                                HeightRequest="40"
                                WidthRequest="40"
                                HorizontalOptions="Center" />
            
            <Label Text="Saving Configuration..." 
                    FontSize="16" 
                    FontAttributes="Bold" 
                    HorizontalOptions="Center" 
                    TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource Primary}}" />
            
            <Label Text="Validating and storing your settings" 
                    FontSize="14" 
                    HorizontalOptions="Center" 
                    TextColor="{AppThemeBinding Light={StaticResource Gray600}, Dark={StaticResource Gray400}}" />
            
        </VerticalStackLayout>

    </VerticalStackLayout>
</ScrollView>

This page is linked to a ViewModel called SettingsViewModel, which looks like this:

				
					public partial class SettingsViewModel : ObservableObject
{
    // Constants for Preferences keys
    private const string AZURE_LLM_ENDPOINT_KEY = "AzureLlmEndpoint";
    private const string AZURE_LLM_API_KEY = "AzureLlmApiKey";
    private const string AZURE_LLM_DEPLOYMENT_KEY = "AzureLlmDeployment";
    private const string SORA_ENDPOINT_KEY = "SoraEndpoint";
    private const string SORA_API_KEY = "SoraApiKey";
    private const string SORA_DEPLOYMENT_KEY = "SoraDeployment";

    [ObservableProperty]
    private string azureLlmEndpoint = string.Empty;

    [ObservableProperty]
    private string azureLlmApiKey = string.Empty;

    [ObservableProperty]
    private string azureLlmDeployment = string.Empty;

    [ObservableProperty]
    private string soraEndpoint = string.Empty;

    [ObservableProperty]
    private string soraApiKey = string.Empty;

    [ObservableProperty]
    private string soraDeployment = string.Empty;

    [ObservableProperty]
    private bool isAzureLlmApiKeyVisible = false;

    [ObservableProperty]
    private bool isSoraApiKeyVisible = false;

    [ObservableProperty]
    private string azureLlmApiKeyToggleIcon = "👁️";

    [ObservableProperty]
    private string soraApiKeyToggleIcon = "👁️";

    [ObservableProperty]
    private bool isSaving = false;

    // Reference to the page for displaying alerts
    private Page? _page;

    public SettingsViewModel()
    {
        LoadSettings();
    }

    public void SetPage(Page page)
    {
        _page = page;
    }

    /// <summary>
    /// Loads saved settings from Preferences
    /// </summary>
    public void LoadSettings()
    {
        AzureLlmEndpoint = Preferences.Default.Get(AZURE_LLM_ENDPOINT_KEY, string.Empty);
        AzureLlmApiKey = Preferences.Default.Get(AZURE_LLM_API_KEY, string.Empty);
        AzureLlmDeployment = Preferences.Default.Get(AZURE_LLM_DEPLOYMENT_KEY, string.Empty);
        
        SoraEndpoint = Preferences.Default.Get(SORA_ENDPOINT_KEY, string.Empty);
        SoraApiKey = Preferences.Default.Get(SORA_API_KEY, string.Empty);
        SoraDeployment = Preferences.Default.Get(SORA_DEPLOYMENT_KEY, string.Empty);
    }

    /// <summary>
    /// Command to toggle visibility of Azure LLM API key
    /// </summary>
    [RelayCommand]
    private void ToggleAzureLlmApiKeyVisibility()
    {
        IsAzureLlmApiKeyVisible = !IsAzureLlmApiKeyVisible;
        AzureLlmApiKeyToggleIcon = IsAzureLlmApiKeyVisible ? "🙈" : "👁️";
    }

    /// <summary>
    /// Command to toggle visibility of SORA API key
    /// </summary>
    [RelayCommand]
    private void ToggleSoraApiKeyVisibility()
    {
        IsSoraApiKeyVisible = !IsSoraApiKeyVisible;
        SoraApiKeyToggleIcon = IsSoraApiKeyVisible ? "🙈" : "👁️";
    }

    /// <summary>
    /// Command to save all settings
    /// </summary>
    [RelayCommand]
    private async Task SaveSettings()
    {
        IsSaving = true;

        try
        {
            // Validate settings before saving
            if (!ValidateSettings())
            {
                return;
            }

            // Save Azure LLM settings
            Preferences.Default.Set(AZURE_LLM_ENDPOINT_KEY, AzureLlmEndpoint.Trim());
            Preferences.Default.Set(AZURE_LLM_API_KEY, AzureLlmApiKey.Trim());
            Preferences.Default.Set(AZURE_LLM_DEPLOYMENT_KEY, AzureLlmDeployment.Trim());

            // Save SORA settings
            Preferences.Default.Set(SORA_ENDPOINT_KEY, SoraEndpoint.Trim());
            Preferences.Default.Set(SORA_API_KEY, SoraApiKey.Trim());
            Preferences.Default.Set(SORA_DEPLOYMENT_KEY, SoraDeployment.Trim());

            if (_page != null)
            {
                await _page.DisplayAlert("Settings Saved", "All settings have been saved successfully!", "OK");
            }
        }
        catch (Exception ex)
        {
            if (_page != null)
            {
                await _page.DisplayAlert("Error", $"Failed to save settings: {ex.Message}", "OK");
            }
        }
        finally
        {
            IsSaving = false;
        }
    }

    /// <summary>
    /// Command to clear all settings
    /// </summary>
    [RelayCommand]
    private async Task ClearSettings()
    {
        if (_page != null)
        {
            bool confirmed = await _page.DisplayAlert(
                "Clear Settings",
                "Are you sure you want to clear all settings? This action cannot be undone.",
                "Clear",
                "Cancel");

            if (!confirmed)
                return;
        }

        try
        {
            // Clear from Preferences
            Preferences.Default.Remove(AZURE_LLM_ENDPOINT_KEY);
            Preferences.Default.Remove(AZURE_LLM_API_KEY);
            Preferences.Default.Remove(AZURE_LLM_DEPLOYMENT_KEY);
            Preferences.Default.Remove(SORA_ENDPOINT_KEY);
            Preferences.Default.Remove(SORA_API_KEY);
            Preferences.Default.Remove(SORA_DEPLOYMENT_KEY);

            // Clear from UI
            AzureLlmEndpoint = string.Empty;
            AzureLlmApiKey = string.Empty;
            AzureLlmDeployment = string.Empty;
            SoraEndpoint = string.Empty;
            SoraApiKey = string.Empty;
            SoraDeployment = string.Empty;

            if (_page != null)
            {
                await _page.DisplayAlert("Settings Cleared", "All settings have been cleared successfully!", "OK");
            }
        }
        catch (Exception ex)
        {
            if (_page != null)
            {
                await _page.DisplayAlert("Error", $"Failed to clear settings: {ex.Message}", "OK");
            }
        }
    }

    /// <summary>
    /// Command to test Azure LLM connection
    /// </summary>
    [RelayCommand]
    private async Task TestAzureLlmConnection()
    {
        if (string.IsNullOrWhiteSpace(AzureLlmEndpoint) || 
            string.IsNullOrWhiteSpace(AzureLlmApiKey) || 
            string.IsNullOrWhiteSpace(AzureLlmDeployment))
        {
            if (_page != null)
            {
                await _page.DisplayAlert("Incomplete Configuration", 
                    "Please fill in all Azure LLM fields before testing.", "OK");
            }
            return;
        }

        // TODO: Implement actual connection test
        if (_page != null)
        {
            await _page.DisplayAlert("Test Connection", 
                "Azure LLM connection test functionality will be implemented soon!", "OK");
        }
    }

    /// <summary>
    /// Command to test SORA connection
    /// </summary>
    [RelayCommand]
    private async Task TestSoraConnection()
    {
        if (string.IsNullOrWhiteSpace(SoraEndpoint) || 
            string.IsNullOrWhiteSpace(SoraApiKey) || 
            string.IsNullOrWhiteSpace(SoraDeployment))
        {
            if (_page != null)
            {
                await _page.DisplayAlert("Incomplete Configuration", 
                    "Please fill in all SORA fields before testing.", "OK");
            }
            return;
        }

        // TODO: Implement actual connection test
        if (_page != null)
        {
            await _page.DisplayAlert("Test Connection", 
                "SORA connection test functionality will be implemented soon!", "OK");
        }
    }

    /// <summary>
    /// Validates all settings before saving
    /// </summary>
    private bool ValidateSettings()
    {
        var errors = new List<string>();

        // Validate Azure LLM settings
        if (string.IsNullOrWhiteSpace(AzureLlmEndpoint))
            errors.Add("Azure LLM Endpoint is required");
        else if (!Uri.TryCreate(AzureLlmEndpoint, UriKind.Absolute, out _))
            errors.Add("Azure LLM Endpoint must be a valid URL");

        if (string.IsNullOrWhiteSpace(AzureLlmApiKey))
            errors.Add("Azure LLM API Key is required");

        if (string.IsNullOrWhiteSpace(AzureLlmDeployment))
            errors.Add("Azure LLM Deployment name is required");

        // Validate SORA settings
        if (string.IsNullOrWhiteSpace(SoraEndpoint))
            errors.Add("SORA Endpoint is required");
        else if (!Uri.TryCreate(SoraEndpoint, UriKind.Absolute, out _))
            errors.Add("SORA Endpoint must be a valid URL");

        if (string.IsNullOrWhiteSpace(SoraApiKey))
            errors.Add("SORA API Key is required");

        if (string.IsNullOrWhiteSpace(SoraDeployment))
            errors.Add("SORA Deployment name is required");

        if (errors.Count > 0 && _page != null)
        {
            Task.Run(async () => await _page.DisplayAlert("Validation Error", 
                string.Join("\n", errors), "OK"));
            return false;
        }

        return true;
    }

    /// <summary>
    /// Checks if all required settings are configured
    /// </summary>
    public bool AreSettingsComplete =>
        !string.IsNullOrWhiteSpace(AzureLlmEndpoint) &&
        !string.IsNullOrWhiteSpace(AzureLlmApiKey) &&
        !string.IsNullOrWhiteSpace(AzureLlmDeployment) &&
        !string.IsNullOrWhiteSpace(SoraEndpoint) &&
        !string.IsNullOrWhiteSpace(SoraApiKey) &&
        !string.IsNullOrWhiteSpace(SoraDeployment);

    /// <summary>
    /// Checks if Azure LLM settings are complete
    /// </summary>
    public bool IsAzureLlmConfigComplete =>
        !string.IsNullOrWhiteSpace(AzureLlmEndpoint) &&
        !string.IsNullOrWhiteSpace(AzureLlmApiKey) &&
        !string.IsNullOrWhiteSpace(AzureLlmDeployment);

    /// <summary>
    /// Checks if SORA settings are complete
    /// </summary>
    public bool IsSoraConfigComplete =>
        !string.IsNullOrWhiteSpace(SoraEndpoint) &&
        !string.IsNullOrWhiteSpace(SoraApiKey) &&
        !string.IsNullOrWhiteSpace(SoraDeployment);
}

When using MVVM Toolkit, the task has been greatly simplified. Similarly, you can see that I make use of the Preferences class to store these keys and read them in case they exist previously.

The result of this page can be seen below:

Creating the parameters page for video generation

The second page created is called AddVideoIdeaPage.xaml. This page is designed for the user to enter their viral video idea to be generated:

Something that is very common is for users to enter simple prompts that do not describe well what the video generator should produce. To address this issue, I added a checkbox that allows the user to decide whether they want to enhance the prompt using AI, which will invoke the Chat service to improve the entered prompt:

Furthermore, it is on this same page where the user can configure the output video, as SORA allows different configuration options for creating videos in horizontal or vertical formats, different resolutions, and even durations of the generated videos:

The code for this page is a bit more complex:

				
					<ScrollView>
    <VerticalStackLayout
        Padding="30,0"
        Spacing="25"
        VerticalOptions="Center">

        <!--  Title  -->
        <Label
            FontAttributes="Bold"
            FontSize="24"
            HorizontalOptions="Center"
            Text="Share Your Viral Video Idea"
            TextColor="{AppThemeBinding Light={StaticResource Primary},
                                        Dark={StaticResource White}}" />

        <!--  Subtitle  -->
        <Label
            FontSize="16"
            HorizontalOptions="Center"
            Text="Describe your creative idea for a viral video"
            TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                        Dark={StaticResource Gray300}}" />

        <!--  Text Input Area  -->
        <Border
            Padding="10"
            BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                              Dark={StaticResource Gray950}}"
            Stroke="{AppThemeBinding Light={StaticResource Gray200},
                                     Dark={StaticResource Gray500}}"
            StrokeShape="RoundRectangle 8"
            StrokeThickness="1">

            <Editor
                BackgroundColor="Transparent"
                FontSize="16"
                HeightRequest="200"
                Placeholder="Tell us about your viral video idea... What makes it special? What's the concept, story, or hook that will capture viewers' attention?"
                PlaceholderColor="{AppThemeBinding Light={StaticResource Gray400},
                                                   Dark={StaticResource Gray500}}"
                Text="{Binding VideoIdea}"
                TextColor="{AppThemeBinding Light={StaticResource Black},
                                            Dark={StaticResource White}}" />

        </Border>

        <!--  Character count label  -->
        <Label
            FontSize="12"
            HorizontalOptions="End"
            Text="{Binding CharacterCountText}"
            TextColor="{AppThemeBinding Light={StaticResource Gray500},
                                        Dark={StaticResource Gray400}}" />

        <!--  AI Enhancement Option  -->
        <Border
            Margin="0,10,0,0"
            Padding="15"
            BackgroundColor="{AppThemeBinding Light={StaticResource Gray100},
                                              Dark={StaticResource Gray900}}"
            Stroke="{AppThemeBinding Light={StaticResource Gray200},
                                     Dark={StaticResource Gray500}}"
            StrokeShape="RoundRectangle 12"
            StrokeThickness="1">

            <Grid ColumnDefinitions="Auto,*,Auto" ColumnSpacing="12">

                <!--  AI Enhancement Icon  -->
                <Border
                    Grid.Column="0"
                    BackgroundColor="{AppThemeBinding Light={StaticResource Primary},
                                                      Dark={StaticResource Primary}}"
                    HeightRequest="32"
                    HorizontalOptions="Center"
                    StrokeShape="RoundRectangle 8"
                    VerticalOptions="Center"
                    WidthRequest="32">

                    <Label
                        FontSize="16"
                        HorizontalOptions="Center"
                        Text="✨"
                        TextColor="White"
                        VerticalOptions="Center" />
                </Border>

                <!--  Enhancement Description  -->
                <StackLayout
                    Grid.Column="1"
                    Spacing="2"
                    VerticalOptions="Center">
                    <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="AI Prompt Enhancement"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />

                    <Label
                        FontSize="13"
                        Text="Let AI optimize your idea for better viral potential"
                        TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                    Dark={StaticResource Gray400}}" />
                </StackLayout>

                <!--  Enhancement Toggle  -->
                <Border
                    Grid.Column="2"
                    BackgroundColor="{Binding EnhancementToggleBorderColor}"
                    HeightRequest="30"
                    StrokeShape="RoundRectangle 20"
                    VerticalOptions="Center"
                    WidthRequest="50">

                    <Border.GestureRecognizers>
                        <TapGestureRecognizer Command="{Binding ToggleEnhancementCommand}" />
                    </Border.GestureRecognizers>

                    <Grid>
                        <!--  Toggle Circle  -->
                        <Border
                            Margin="2,0"
                            BackgroundColor="White"
                            HeightRequest="26"
                            HorizontalOptions="Start"
                            StrokeShape="RoundRectangle 14"
                            TranslationX="{Binding EnhancementToggleTranslationX}"
                            VerticalOptions="Center"
                            WidthRequest="26">

                            <Label
                                FontSize="12"
                                HorizontalOptions="Center"
                                Opacity="{Binding EnhancementToggleOpacity}"
                                Text="{Binding EnhancementToggleIcon}"
                                VerticalOptions="Center" />
                        </Border>
                    </Grid>
                </Border>

            </Grid>
        </Border>

        <!--  Video Configuration Section  -->
        <Border
            Margin="0,20,0,0"
            Padding="20"
            BackgroundColor="{AppThemeBinding Light={StaticResource Gray100},
                                              Dark={StaticResource Gray900}}"
            Stroke="{AppThemeBinding Light={StaticResource Gray200},
                                     Dark={StaticResource Gray500}}"
            StrokeShape="RoundRectangle 12"
            StrokeThickness="1">

            <StackLayout Spacing="20">

                <!--  Configuration Header  -->
                <StackLayout Orientation="Horizontal" Spacing="10">
                    <Border
                        BackgroundColor="{AppThemeBinding Light={StaticResource Primary},
                                                          Dark={StaticResource Primary}}"
                        HeightRequest="28"
                        StrokeShape="RoundRectangle 6"
                        VerticalOptions="Center"
                        WidthRequest="28">
                        <Label
                            FontSize="14"
                            HorizontalOptions="Center"
                            Text="🎬"
                            TextColor="White"
                            VerticalOptions="Center" />
                    </Border>

                    <Label
                        FontAttributes="Bold"
                        FontSize="18"
                        Text="Video Configuration"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}"
                        VerticalOptions="Center" />
                </StackLayout>

                <!--  Resolution Selection  -->
                <StackLayout>
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Resolution"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />
                    <Label
                        FontSize="12"
                        Text="Select video quality level - higher resolution provides better quality but takes longer to generate"
                        TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                    Dark={StaticResource Gray400}}" />

                    <Border
                        Margin="0,8,0,0"
                        BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                          Dark={StaticResource Gray950}}"
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                 Dark={StaticResource Gray600}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Picker
                            Title="Select Resolution"
                            BackgroundColor="Transparent"
                            FontSize="16"
                            ItemsSource="{Binding ResolutionOptions}"
                            SelectedItem="{Binding SelectedResolution}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </StackLayout>

                <!--  Duration Selection  -->
                <StackLayout>
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Duration (seconds)"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />
                    <Label
                        FontSize="12"
                        Text="Longer videos take more time to generate"
                        TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                    Dark={StaticResource Gray400}}" />

                    <Border
                        Margin="0,8,0,0"
                        BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                          Dark={StaticResource Gray950}}"
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                 Dark={StaticResource Gray600}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Picker
                            Title="Select Duration"
                            BackgroundColor="Transparent"
                            FontSize="16"
                            ItemsSource="{Binding DurationOptions}"
                            SelectedItem="{Binding SelectedDuration}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </StackLayout>

                <!--  Orientation Selection  -->
                <StackLayout>
                    <Label
                        FontAttributes="Bold"
                        FontSize="14"
                        Text="Orientation"
                        TextColor="{AppThemeBinding Light={StaticResource Black},
                                                    Dark={StaticResource White}}" />
                    <Label
                        FontSize="12"
                        Text="Choose aspect ratio: Horizontal (16:9), Vertical (9:16), or Square (1:1)"
                        TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                    Dark={StaticResource Gray400}}" />

                    <Border
                        Margin="0,8,0,0"
                        BackgroundColor="{AppThemeBinding Light={StaticResource White},
                                                          Dark={StaticResource Gray950}}"
                        Stroke="{AppThemeBinding Light={StaticResource Gray300},
                                                 Dark={StaticResource Gray600}}"
                        StrokeShape="RoundRectangle 8"
                        StrokeThickness="1">
                        <Picker
                            Title="Select Orientation"
                            BackgroundColor="Transparent"
                            FontSize="16"
                            ItemsSource="{Binding OrientationOptions}"
                            SelectedItem="{Binding SelectedOrientation}"
                            TextColor="{AppThemeBinding Light={StaticResource Black},
                                                        Dark={StaticResource White}}" />
                    </Border>
                </StackLayout>

            </StackLayout>
        </Border>

        <!--  Generate Button  -->
        <Button
            Margin="0,20,0,0"
            BackgroundColor="{StaticResource Primary}"
            Command="{Binding GenerateViralStoryCommand}"
            CornerRadius="25"
            FontAttributes="Bold"
            FontSize="18"
            HeightRequest="50"
            HorizontalOptions="Fill"
            IsEnabled="{Binding CanGenerateStory}"
            Text="{Binding GenerateButtonText}"
            TextColor="White" />

        <!--  Enhanced Loading Indicator  -->
        <StackLayout
            Margin="0,20,0,0"
            HorizontalOptions="Center"
            IsVisible="{Binding IsGenerating}"
            Spacing="20"
            VerticalOptions="Center">

            <ActivityIndicator
                HeightRequest="50"
                HorizontalOptions="Center"
                IsRunning="{Binding IsGenerating}"
                WidthRequest="50"
                Color="{StaticResource Primary}" />

            <StackLayout Spacing="10">
                <Label
                    FontAttributes="Bold"
                    FontSize="18"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    Text="🧠 Processing your idea..."
                    TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                Dark={StaticResource Primary}}" />

                <Label
                    FontSize="14"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    LineBreakMode="WordWrap"
                    Text="We’re enhancing your idea with AI and generating optimized prompts to create an amazing viral video."
                    TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                                Dark={StaticResource Gray400}}" />

                <Label
                    FontAttributes="Italic"
                    FontSize="12"
                    HorizontalOptions="Center"
                    HorizontalTextAlignment="Center"
                    Text="⏱️ This process may take a few moments"
                    TextColor="{AppThemeBinding Light={StaticResource Gray500},
                                                Dark={StaticResource Gray500}}" />
            </StackLayout>

        </StackLayout>


    </VerticalStackLayout>
</ScrollView>

On the other hand, the ViewModel called AddVideoIdeaViewModel looks as follows:

				
					public partial class AddVideoIdeaViewModel : ObservableObject
{
    private readonly IChatService _chatService;

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(CanGenerateStory))]
    private string videoIdea = string.Empty;

    [ObservableProperty]
    private string characterCountText = "0 characters";

    [ObservableProperty]
    private bool isEnhancementEnabled = false;

    [ObservableProperty]
    private string generateButtonText = "Generate Viral Story";

    [ObservableProperty]
    private string enhancementToggleIcon = "🤖";

    [ObservableProperty]
    private double enhancementToggleOpacity = 0.5;

    [ObservableProperty]
    private double enhancementToggleTranslationX = 0.0;

    [ObservableProperty]
    private Color enhancementToggleBorderColor = Colors.Gray;

    [ObservableProperty]
    [NotifyPropertyChangedFor(nameof(CanGenerateStory))]
    private bool isGenerating = false;

    // Video Configuration Properties
    [ObservableProperty]
    private string selectedResolution = "720";

    [ObservableProperty]
    private string selectedDuration = "10";

    [ObservableProperty]
    private string selectedOrientation = "Horizontal";

    // Available options for pickers
    public List<string> ResolutionOptions { get; } = ["480", "720", "1080"];
    public List<string> DurationOptions { get; } = ["5", "10", "15", "20"];
    public List<string> OrientationOptions { get; } = ["Horizontal", "Vertical", "Square"];

    // Reference to the page for displaying alerts
    private Page? _page;

    public AddVideoIdeaViewModel(IChatService chatService)
    {
        _chatService = chatService;
        CheckChatServiceConfiguration();
    }

    public void SetPage(Page page)
    {
        _page = page;
    }

    /// <summary>
    /// Checks if chat service is configured and updates UI accordingly
    /// </summary>
    private async void CheckChatServiceConfiguration()
    {
        try
        {
            var isConfigured = await _chatService.IsConfiguredAsync();
            if (!isConfigured)
            {
                // Update UI to indicate that enhancement requires configuration
                EnhancementToggleIcon = "⚙️";
            }
        }
        catch
        {
            // If checking fails, assume not configured
            EnhancementToggleIcon = "⚙️";
        }
    }

    /// <summary>
    /// Updates character count when video idea text changes
    /// </summary>
    partial void OnVideoIdeaChanged(string value)
    {
        var characterCount = string.IsNullOrEmpty(value) ? 0 : value.Length;
        CharacterCountText = $"{characterCount} characters";
    }

    /// <summary>
    /// Updates UI elements when enhancement toggle state changes
    /// </summary>
    partial void OnIsEnhancementEnabledChanged(bool value)
    {
        UpdateGenerateButtonText();
        UpdateToggleAppearance();
    }

    /// <summary>
    /// Command to toggle AI enhancement feature
    /// </summary>
    [RelayCommand]
    private async Task ToggleEnhancement()
    {
        IsEnhancementEnabled = !IsEnhancementEnabled;
        await AnimateToggle();
    }

    /// <summary>
    /// Command to generate viral story from user's idea
    /// </summary>
    [RelayCommand]
    private async Task GenerateViralStory()
    {
        if (string.IsNullOrWhiteSpace(VideoIdea))
        {
            if (_page != null)
            {
                await _page.DisplayAlert("Empty Idea", "Please enter your video idea before generating a viral story.", "OK");
            }
            return;
        }

        IsGenerating = true;

        try
        {
            string finalVideoIdea = VideoIdea;

            // Check if enhancement is enabled and service is configured
            if (IsEnhancementEnabled)
            {
                var isConfigured = await _chatService.IsConfiguredAsync();
                if (!isConfigured)
                {
                    if (_page != null)
                    {
                        var result = await _page.DisplayAlert(
                            "Service Not Configured", 
                            "AI enhancement requires Azure LLM configuration. Would you like to go to Settings to configure it?", 
                            "Go to Settings", 
                            "Continue without Enhancement");
                        
                        if (result)
                        {
                            await Shell.Current.GoToAsync("//Settings");
                            return;
                        }
                        else
                        {
                            // Continue without enhancement
                            IsEnhancementEnabled = false;
                            await AnimateToggle();
                        }
                    }
                }
                else
                {
                    // Enhance the idea using Azure LLM
                    try
                    {
                        finalVideoIdea = await _chatService.EnhancePromptAsync(VideoIdea);
                        
                        // No DisplayAlert - keep loading while processing
                        Debug.WriteLine($"[AddVideoIdea] Idea enhanced successfully: {finalVideoIdea}");
                    }
                    catch (Exception ex)
                    {
                        Debug.WriteLine($"[AddVideoIdea] Enhancement failed: {ex.Message}");
                        if (_page != null)
                        {
                            await _page.DisplayAlert("Enhancement Failed", 
                                $"Failed to enhance the idea: {ex.Message}\n\nContinuing with original idea.", 
                                "OK");
                        }
                    }
                }
            }

            // TODO: Store the final video idea and enhancement status for the VideoPromptsPage
            // Pass the data through navigation parameters including video configuration
            var (width, height) = GetVideoDimensions();
            var duration = int.Parse(SelectedDuration);
            
            var navigationParameters = new Dictionary<string, object>
            {
                ["VideoIdea"] = VideoIdea,
                ["EnhancedIdea"] = finalVideoIdea ?? string.Empty,
                ["WasEnhanced"] = (finalVideoIdea != VideoIdea && !string.IsNullOrEmpty(finalVideoIdea)).ToString(),
                ["VideoWidth"] = width.ToString(),
                ["VideoHeight"] = height.ToString(),
                ["VideoDuration"] = duration.ToString(),
                ["VideoOrientation"] = SelectedOrientation
            };

            // Navigate to VideoPromptsPage after processing
            await Shell.Current.GoToAsync("//VideoPrompts", navigationParameters);
        }
        finally
        {
            IsGenerating = false;
        }
    }

    /// <summary>
    /// Updates the generate button text based on enhancement state
    /// </summary>
    private void UpdateGenerateButtonText()
    {
        GenerateButtonText = IsEnhancementEnabled 
            ? "✨ Enhance & Generate" 
            : "Generate Viral Story";
    }

    /// <summary>
    /// Updates toggle visual appearance based on current state
    /// </summary>
    private void UpdateToggleAppearance()
    {
        if (IsEnhancementEnabled)
        {
            EnhancementToggleIcon = "✨";
            EnhancementToggleOpacity = 1.0;
            EnhancementToggleTranslationX = 20.0;
            EnhancementToggleBorderColor = Color.FromRgb(0x00, 0xFF, 0x33); // Green
        }
        else
        {
            EnhancementToggleIcon = "🤖";
            EnhancementToggleOpacity = 0.5;
            EnhancementToggleTranslationX = 0.0;
            EnhancementToggleBorderColor = Colors.Gray;
        }
    }

    /// <summary>
    /// Animates the enhancement toggle switch
    /// </summary>
    private async Task AnimateToggle()
    {
        var animation = new Animation();
        var targetTranslation = IsEnhancementEnabled ? 20.0 : 0.0;
        var startTranslation = IsEnhancementEnabled ? 0.0 : 20.0;

        // Translation animation
        animation.Add(0, 1, new Animation(v => 
        {
            EnhancementToggleTranslationX = v;
        }, startTranslation, targetTranslation));

        // Color animation
        animation.Add(0, 1, new Animation(v => 
        {
            if (IsEnhancementEnabled)
            {
                var color = Color.FromRgba(
                    (int)(0x66 + (0x00 - 0x66) * v), // Red component
                    (int)(0x66 + (0xFF - 0x66) * v), // Green component  
                    (int)(0x66 + (0x33 - 0x66) * v), // Blue component
                    255);
                EnhancementToggleBorderColor = color;
            }
            else
            {
                var grayValue = (int)(0x66 + (0xCC - 0x66) * v);
                EnhancementToggleBorderColor = Color.FromRgb(grayValue, grayValue, grayValue);
            }
        }, 0, 1));

        var completionSource = new TaskCompletionSource<bool>();

        if (_page != null)
        {
            animation.Commit(_page, "ToggleAnimation", 16, 250, 
                Easing.CubicOut, (v, c) => completionSource.SetResult(true));
        }
        else
        {
            completionSource.SetResult(true);
        }

        await completionSource.Task;
    }

    /// <summary>
    /// Validates if the current idea is ready for generation
    /// </summary>
    public bool CanGenerateStory => !string.IsNullOrWhiteSpace(VideoIdea) && !IsGenerating;

    /// <summary>
    /// Gets video dimensions based on selected resolution and orientation
    /// Using SORA-supported resolution combinations
    /// </summary>
    /// <returns>Tuple with width and height values</returns>
    private (int width, int height) GetVideoDimensions()
    {
        // SORA supported resolutions: (480, 480), (854, 480), (720, 720), (1280, 720), (1080, 1080), (1920, 1080)
        return SelectedOrientation switch
        {
            "Horizontal" => SelectedResolution switch
            {
                "480" => (854, 480),    // Horizontal 480p
                "720" => (1280, 720),   // Horizontal 720p (HD)
                "1080" => (1920, 1080), // Horizontal 1080p (Full HD)
                _ => (1280, 720)        // Default to 720p horizontal
            },
            "Vertical" => SelectedResolution switch
            {
                "480" => (480, 854),    // Vertical 480p
                "720" => (720, 1280),   // Vertical 720p
                "1080" => (1080, 1920), // Vertical 1080p
                _ => (720, 1280)        // Default to 720p vertical
            },
            "Square" => SelectedResolution switch
            {
                "480" => (480, 480),    // Square 480p
                "720" => (720, 720),    // Square 720p
                "1080" => (1080, 1080), // Square 1080p
                _ => (720, 720)         // Default to 720p square
            },
            _ => (1280, 720)            // Default to horizontal 720p
        };
    }
}

Now, let's talk about the page that allows modifying the enhanced prompt for video generation.

The Final Prompt Settings Page

Whether the user selected the option to enhance the video or not, they will be redirected to the VideoPromptsPage.xaml. This page contains a series of mini prompts that will be added to the final prompt to create an amazing video. These mini prompts can be modified if desired and are essentially a set of prompts that define certain characteristics for creating viral videos.

Similarly, this page is responsible for generating the video, so transitioning from this to the next page may take a little while due to the enormous processing required to generate a video.

The page looks as follows:

The XAML code for this page is relatively simple, and it can be modified to add other features that we may need:

				
					<!--  Grid to allow overlay  -->
<Grid>
    <!--  Main Content  -->
    <ScrollView>
        <StackLayout Padding="20" Spacing="15">

            <!--  Header Section  -->
            <Border BackgroundColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" StrokeThickness="0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="12" />
                </Border.StrokeShape>
                <StackLayout Padding="20" Spacing="10">
                    <Label
                        FontAttributes="Bold"
                        FontSize="24"
                        Text="Generated Prompts"
                        TextColor="White" />
                    <Label
                        FontSize="16"
                        Opacity="0.9"
                        Text="{Binding VideoIdea}"
                        TextColor="White" />
                </StackLayout>
            </Border>

            <!--  Statistics  -->
            <Grid ColumnDefinitions="*,*" ColumnSpacing="10">
                <Border
                    Grid.Column="0"
                    BackgroundColor="{AppThemeBinding Light=#F0F0F0,
                                                        Dark=#2A2A2A}"
                    StrokeThickness="0">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="8" />
                    </Border.StrokeShape>
                    <StackLayout Padding="15" Spacing="5">
                        <Label
                            FontAttributes="Bold"
                            FontSize="24"
                            HorizontalOptions="Center"
                            Text="{Binding TotalPrompts}" />
                        <Label
                            FontSize="12"
                            HorizontalOptions="Center"
                            Opacity="0.7"
                            Text="Total Prompts" />
                    </StackLayout>
                </Border>

                <Border
                    Grid.Column="1"
                    BackgroundColor="{AppThemeBinding Light=#F0F0F0,
                                                        Dark=#2A2A2A}"
                    StrokeThickness="0">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="8" />
                    </Border.StrokeShape>
                    <StackLayout Padding="15" Spacing="5">
                        <Label
                            FontAttributes="Bold"
                            FontSize="24"
                            HorizontalOptions="Center"
                            Text="{Binding EditedPrompts}"
                            TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                        Dark={StaticResource PrimaryDark}}" />
                        <Label
                            FontSize="12"
                            HorizontalOptions="Center"
                            Opacity="0.7"
                            Text="Edited" />
                    </StackLayout>
                </Border>
            </Grid>

            <!--  Prompts List  -->
            <CollectionView ItemsSource="{Binding Prompts}" SelectionMode="None">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="viewmodels:VideoPrompt">
                        <Border
                            Margin="0,5"
                            BackgroundColor="{AppThemeBinding Light=White,
                                                                Dark=#1A1A1A}"
                            Stroke="{AppThemeBinding Light=#E0E0E0,
                                                        Dark=#404040}"
                            StrokeThickness="1">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="12" />
                            </Border.StrokeShape>
                            <StackLayout Padding="15" Spacing="10">

                                <!--  Header with title and edited indicator  -->
                                <Grid ColumnDefinitions="*,Auto">
                                    <Label
                                        Grid.Column="0"
                                        FontAttributes="Bold"
                                        FontSize="18"
                                        Text="{Binding Title}" />
                                    <Label
                                        Grid.Column="1"
                                        FontSize="12"
                                        IsVisible="{Binding IsEdited}"
                                        Text="✏️ Edited"
                                        TextColor="{AppThemeBinding Light={StaticResource Primary},
                                                                    Dark={StaticResource PrimaryDark}}" />
                                </Grid>

                                <!--  Content  -->
                                <Label
                                    FontSize="16"
                                    LineBreakMode="WordWrap"
                                    Text="{Binding Content}" />

                                <!--  Action Buttons  -->
                                <Grid
                                    Margin="0,10,0,0"
                                    ColumnDefinitions="*,*,*"
                                    ColumnSpacing="10">
                                    <Button
                                        Grid.Column="0"
                                        BackgroundColor="{AppThemeBinding Light={StaticResource Primary},
                                                                            Dark={StaticResource PrimaryDark}}"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:VideoPromptsViewModel}}, Path=EditPromptCommand}"
                                        CommandParameter="{Binding .}"
                                        FontSize="14"
                                        Text="Edit"
                                        TextColor="White" />

                                    <Button
                                        Grid.Column="1"
                                        BackgroundColor="#FF9500"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:VideoPromptsViewModel}}, Path=RegeneratePromptCommand}"
                                        CommandParameter="{Binding .}"
                                        FontSize="14"
                                        Text="🔄 Regenerate"
                                        TextColor="White" />

                                    <Button
                                        Grid.Column="2"
                                        BackgroundColor="#FF3B30"
                                        Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodels:VideoPromptsViewModel}}, Path=DeletePromptCommand}"
                                        CommandParameter="{Binding .}"
                                        FontSize="14"
                                        Text="🗑️"
                                        TextColor="White" />
                                </Grid>
                            </StackLayout>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

            <!--  Generate Video Button  -->
            <Button
                Margin="0,20,0,0"
                BackgroundColor="{AppThemeBinding Light={StaticResource Success},
                                                    Dark={StaticResource Success}}"
                Command="{Binding GenerateVideoCommand}"
                FontAttributes="Bold"
                FontSize="18"
                HeightRequest="50"
                Text="🎬 Generate Video"
                TextColor="White" />

        </StackLayout>
    </ScrollView>

    <!--  FULLSCREEN BLOCKING OVERLAY  -->
    <ContentView
        BackgroundColor="#80000000"
        InputTransparent="False"
        IsVisible="{Binding IsLoading}">

        <!--  Centered Loading Content  -->
        <StackLayout
            HorizontalOptions="Center"
            Spacing="30"
            VerticalOptions="Center">

            <!--  Loading Animation  -->
            <ActivityIndicator
                HeightRequest="80"
                IsRunning="{Binding IsLoading}"
                WidthRequest="80"
                Color="White" />

            <!--  Loading Card  -->
            <Border
                Padding="30"
                BackgroundColor="White"
                HorizontalOptions="Center"
                StrokeThickness="0">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="15" />
                </Border.StrokeShape>

                <StackLayout
                    HorizontalOptions="Center"
                    Spacing="20"
                    WidthRequest="300">

                    <!--  Main Message  -->
                    <Label
                        FontAttributes="Bold"
                        FontSize="20"
                        HorizontalOptions="Center"
                        HorizontalTextAlignment="Center"
                        Text="🎬 Generating Video with AI"
                        TextColor="{StaticResource Primary}" />

                    <!--  Progress Message  -->
                    <Label
                        FontSize="16"
                        HorizontalOptions="Center"
                        HorizontalTextAlignment="Center"
                        LineBreakMode="WordWrap"
                        Text="Your viral video is being created using SORA AI. This process may take several minutes due to the complexity of video generation."
                        TextColor="{StaticResource Gray600}" />

                    <!--  Status Message  -->
                    <Label
                        FontAttributes="Italic"
                        FontSize="14"
                        HorizontalOptions="Center"
                        HorizontalTextAlignment="Center"
                        Text="🔄 Processing..."
                        TextColor="{StaticResource Primary}" />

                    <!--  Warning Message  -->
                    <Label
                        FontAttributes="Bold"
                        FontSize="12"
                        HorizontalOptions="Center"
                        HorizontalTextAlignment="Center"
                        Text="⚠️ Do not close the app during this process"
                        TextColor="#FF9500" />

                </StackLayout>

            </Border>
        </StackLayout>
    </ContentView>

</Grid>

The ViewModel of this page, called VideoPromptsViewModel, looks as follows:

				
					public partial class VideoPromptsViewModel : ObservableObject, IQueryAttributable
{
    private readonly IChatService _chatService;
    private readonly ISoraService _soraService;

    [ObservableProperty]
    private ObservableCollection<VideoPrompt> prompts = new();

    [ObservableProperty]
    private int totalPrompts = 0;

    [ObservableProperty]
    private int editedPrompts = 0;

    [ObservableProperty]
    private string videoIdea = string.Empty;

    [ObservableProperty]
    private bool isLoading = false;

    // Store original and enhanced ideas
    private string _originalIdea = string.Empty;
    private string _enhancedIdea = string.Empty;
    private bool _wasEnhanced = false;

    // Video configuration properties
    private int _videoWidth = 1280;      // Default horizontal 720p
    private int _videoHeight = 720;
    private int _videoDuration = 10;     // Default 10 seconds
    private string _videoOrientation = "Horizontal";

    public VideoPromptsViewModel(IChatService chatService, ISoraService soraService)
    {
        _chatService = chatService;
        _soraService = soraService;
        // Don't load sample data by default anymore
    }

    // IQueryAttributable implementation
    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        if (query.ContainsKey("VideoIdea"))
        {
            _originalIdea = query["VideoIdea"].ToString() ?? "";
        }

        if (query.ContainsKey("EnhancedIdea"))
        {
            _enhancedIdea = query["EnhancedIdea"].ToString() ?? "";
            _wasEnhanced = !string.IsNullOrEmpty(_enhancedIdea);
        }

        if (query.ContainsKey("WasEnhanced"))
        {
            _wasEnhanced = bool.Parse(query["WasEnhanced"].ToString() ?? "false");
        }

        // Get video configuration parameters
        if (query.ContainsKey("VideoWidth"))
        {
            int.TryParse(query["VideoWidth"].ToString(), out _videoWidth);
        }

        if (query.ContainsKey("VideoHeight"))
        {
            int.TryParse(query["VideoHeight"].ToString(), out _videoHeight);
        }

        if (query.ContainsKey("VideoDuration"))
        {
            int.TryParse(query["VideoDuration"].ToString(), out _videoDuration);
        }

        if (query.ContainsKey("VideoOrientation"))
        {
            _videoOrientation = query["VideoOrientation"].ToString() ?? "Horizontal";
        }

        // Set the display idea (enhanced if available, otherwise original)
        VideoIdea = _wasEnhanced && !string.IsNullOrEmpty(_enhancedIdea) ? _enhancedIdea : _originalIdea;

        // Generate prompts based on the video idea
        _ = GeneratePromptsFromAI();
    }

    private async Task GeneratePromptsFromAI()
    {
        if (string.IsNullOrWhiteSpace(VideoIdea))
        {
            LoadSampleData(); // Fallback to sample data
            return;
        }

        IsLoading = true;
        Prompts.Clear();

        try
        {
            var isConfigured = await _chatService.IsConfiguredAsync();
            if (!isConfigured)
            {
                LoadSampleData(); // Fallback to sample data
                return;
            }

            // Generate prompts using AI
            var generatedPrompts = await _chatService.GenerateVideoPromptsAsync(VideoIdea, _wasEnhanced);
            
            int promptId = 1;
            foreach (var prompt in generatedPrompts)
            {
                Prompts.Add(new VideoPrompt
                {
                    Id = promptId++,
                    Title = prompt.Title,
                    Content = prompt.Content,
                    IsEdited = false
                });
            }

            UpdateStatistics();
        }
        catch (Exception)
        {
            // If AI generation fails, fall back to sample data
            LoadSampleData();
        }
        finally
        {
            IsLoading = false;
        }
    }

    private void LoadSampleData()
    {
        VideoIdea = "Dancing cat compilation with trending music";
        
        Prompts.Add(new VideoPrompt
        {
            Id = 1,
            Title = "Opening Hook",
            Content = "Start with the most energetic cat dance move synchronized to the beat drop",
            IsEdited = false
        });

        Prompts.Add(new VideoPrompt
        {
            Id = 2,
            Title = "Main Content",
            Content = "Sequence of 5-7 different cats dancing to trending audio, each for 3-4 seconds",
            IsEdited = false
        });

        Prompts.Add(new VideoPrompt
        {
            Id = 3,
            Title = "Engagement Boost",
            Content = "Add text overlay: 'Which cat has the best moves? 👇 Comment below!'",
            IsEdited = false
        });

        Prompts.Add(new VideoPrompt
        {
            Id = 4,
            Title = "Call to Action",
            Content = "End with 'Follow for more dancing pets!' with heart and dancing emojis",
            IsEdited = false
        });

        UpdateStatistics();
    }

    [RelayCommand]
    private async Task EditPrompt(VideoPrompt prompt)
    {
        try
        {
            var page = GetCurrentPage();
            if (page == null) return;

            var result = await page.DisplayPromptAsync(
                "Edit Prompt", 
                $"Edit the {prompt.Title}:", 
                "Save", 
                "Cancel", 
                placeholder: prompt.Content, 
                initialValue: prompt.Content);

            if (!string.IsNullOrEmpty(result) && result != prompt.Content)
            {
                if (!prompt.IsEdited)
                {
                    prompt.IsEdited = true;
                    EditedPrompts++;
                }
                prompt.Content = result;
            }
        }
        catch
        {
            // Handle any navigation errors silently
        }
    }

    [RelayCommand]
    private void DeletePrompt(VideoPrompt prompt)
    {
        if (prompt.IsEdited)
        {
            EditedPrompts--;
        }
        Prompts.Remove(prompt);
        UpdateStatistics();
    }

    [RelayCommand]
    private async Task RegeneratePrompt(VideoPrompt prompt)
    {
        // Simulate regeneration
        await Task.Delay(1000);
        
        var regeneratedContent = prompt.Title switch
        {
            "Opening Hook" => "Begin with an unexpected cat appearing from behind furniture, dancing immediately",
            "Main Content" => "Create a montage of cats from different breeds, each showcasing unique dance styles",
            "Engagement Boost" => "Add interactive text: 'Tap ❤️ if your cat can dance too!'",
            "Call to Action" => "Conclude with 'Tag a friend who loves dancing cats!' with music note emojis",
            _ => "Regenerated prompt content"
        };

        if (!prompt.IsEdited)
        {
            prompt.IsEdited = true;
            EditedPrompts++;
        }
        prompt.Content = regeneratedContent;
    }

    [RelayCommand]
    private async Task GenerateVideo()
    {
        try
        {
            Debug.WriteLine("[VideoPrompts] GenerateVideo started");
            var page = GetCurrentPage();
            
            // Check if SORA service is configured
            var isConfigured = await _soraService.IsConfiguredAsync();
            Debug.WriteLine($"[VideoPrompts] SORA configured: {isConfigured}");
            
            if (!isConfigured)
            {
                Debug.WriteLine("[VideoPrompts] SORA not configured, showing alert");
                if (page != null)
                {
                    await page.DisplayAlert("Configuration Required", 
                        "Please configure your SORA credentials in the settings page.", 
                        "OK");
                }
                return;
            }

            // Activate loading UI (blocks all interaction)
            IsLoading = true;
            Debug.WriteLine("[VideoPrompts] Loading UI activated - blocking all interaction");

            // Generate the combined prompt from all prompts
            var combinedPrompt = string.Join(". ", Prompts.Select(p => p.Content));
            if (string.IsNullOrWhiteSpace(combinedPrompt))
            {
                combinedPrompt = VideoIdea; // Fallback to original idea
            }

            Debug.WriteLine($"[VideoPrompts] Combined prompt: {combinedPrompt}");
            Debug.WriteLine($"[VideoPrompts] Video configuration: {_videoWidth}x{_videoHeight}, {_videoDuration}s, {_videoOrientation}");
            Debug.WriteLine("[VideoPrompts] Starting SORA video generation...");

            // Generate video using SORA service with custom configuration
            var videoFilePath = await _soraService.GenerateVideoAsync(combinedPrompt, _videoWidth, _videoHeight, _videoDuration);
            
            Debug.WriteLine($"[VideoPrompts] ✅ Video generated successfully: {videoFilePath}");
            Debug.WriteLine($"[VideoPrompts] File exists: {File.Exists(videoFilePath)}");
            Debug.WriteLine($"[VideoPrompts] File size: {new FileInfo(videoFilePath).Length / 1024 / 1024:F2} MB");

            // Prepare navigation parameters
            var navigationParams = new Dictionary<string, object>
            {
                ["VideoTitle"] = VideoIdea,
                ["VideoSource"] = videoFilePath,
                ["OriginalPrompt"] = _originalIdea,
                ["EnhancedPrompt"] = _wasEnhanced ? _enhancedIdea : "",
                ["EnglishContent"] = combinedPrompt,
                ["HasEnhancedPrompt"] = _wasEnhanced.ToString()
            };

            Debug.WriteLine("[VideoPrompts] Navigation parameters:");
            foreach (var kvp in navigationParams)
            {
                Debug.WriteLine($"[VideoPrompts]   {kvp.Key}: {kvp.Value}");
            }

            // Navigate to video display page with real video
            Debug.WriteLine("[VideoPrompts] Navigating to VideoDisplay page...");
            await Shell.Current.GoToAsync("VideoDisplay", navigationParams);

            // Show success message
            if (page != null)
            {
                Debug.WriteLine("[VideoPrompts] Showing success message");
                await page.DisplayAlert("Video Generated!", 
                    $"Your viral video has been created successfully.\n\nFile: {Path.GetFileName(videoFilePath)}", 
                    "Watch Video");
            }
            
            Debug.WriteLine("[VideoPrompts] GenerateVideo completed successfully");
        }
        catch (InvalidOperationException ex)
        {
            Debug.WriteLine($"[VideoPrompts] Configuration error: {ex.Message}");
            var page = GetCurrentPage();
            if (page != null)
            {
                await page.DisplayAlert("Configuration Error", ex.Message, "OK");
            }
        }
        catch (TimeoutException)
        {
            Debug.WriteLine("[VideoPrompts] Timeout error");
            var page = GetCurrentPage();
            if (page != null)
            {
                await page.DisplayAlert("Timeout", 
                    "Video generation took too long. Please try again.", 
                    "OK");
            }
        }
        catch (HttpRequestException ex)
        {
            Debug.WriteLine($"[VideoPrompts] HTTP error: {ex.Message}");
            var page = GetCurrentPage();
            if (page != null)
            {
                await page.DisplayAlert("Connection Error", 
                    $"Failed to connect to the SORA service: {ex.Message}", 
                    "OK");
            }
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"[VideoPrompts] Unexpected error: {ex.Message}");
            Debug.WriteLine($"[VideoPrompts] Exception type: {ex.GetType().Name}");
            Debug.WriteLine($"[VideoPrompts] Stack trace: {ex.StackTrace}");
            var page = GetCurrentPage();
            if (page != null)
            {
                await page.DisplayAlert("Error", $"An error occurred while generating the video: {ex.Message}", "OK");
            }
        }
        finally
        {
            // Always deactivate loading UI regardless of success or failure
            IsLoading = false;
            Debug.WriteLine("[VideoPrompts] Loading UI deactivated - interaction restored");
        }
    }


    private Page? GetCurrentPage()
    {
        try
        {
            return Application.Current?.Windows?.FirstOrDefault()?.Page;
        }
        catch
        {
            return null;
        }
    }

    private void UpdateStatistics()
    {
        TotalPrompts = Prompts.Count;
        EditedPrompts = Prompts.Count(p => p.IsEdited);
    }
}

public partial class VideoPrompt : ObservableObject
{
    [ObservableProperty]
    private int id;

    [ObservableProperty]
    private string title = string.Empty;

    [ObservableProperty]
    private string content = string.Empty;

    [ObservableProperty]
    private bool isEdited;
}

Page with the Result of the Final Video Generation

The last page of the application is the one that displays the generated video called `VideoDisplayPage.xaml`. This page utilizes the sleek and enhanced MediaElement, which is a super cross-platform control that allows for very simple multimedia element display developed by the .NET community. Similarly, within this page, I have left some elements as placeholders, which would allow for video regeneration, sharing the video on social media, or downloading the video, that you can adapt according to your needs.

The code for this page is as follows:

				
					<ScrollView>
    <VerticalStackLayout Padding="20" Spacing="15">

        <!--  Loading Indicator  -->
        <VerticalStackLayout
            Padding="30"
            HorizontalOptions="Center"
            IsVisible="{Binding IsLoading}"
            Spacing="20"
            VerticalOptions="Center">

            <ActivityIndicator
                HeightRequest="50"
                HorizontalOptions="Center"
                IsRunning="{Binding IsLoading}"
                WidthRequest="50"
                Color="{StaticResource Primary}" />

            <Label
                FontAttributes="Bold"
                FontSize="18"
                HorizontalOptions="Center"
                Text="Loading your generated video..."
                TextColor="{AppThemeBinding Light={StaticResource Primary},
                                            Dark={StaticResource Primary}}" />

            <Label
                FontSize="14"
                HorizontalOptions="Center"
                Text="Please wait while we prepare your video for playback"
                TextColor="{AppThemeBinding Light={StaticResource Gray600},
                                            Dark={StaticResource Gray400}}" />

        </VerticalStackLayout>

        <!--  Main Content (hidden while loading)  -->
        <VerticalStackLayout IsVisible="{Binding IsLoading, Converter={StaticResource InvertedBoolConverter}}" Spacing="15">

            <!--  Video Title  -->
            <Label
                FontAttributes="Bold"
                FontSize="18"
                HorizontalOptions="Center"
                Text="{Binding VideoTitle}"
                TextColor="White" />

            <!--  MediaElement for video playback  -->
            <Border
                Padding="5"
                BackgroundColor="Black"
                Stroke="Gray"
                StrokeThickness="2">
                <Border.StrokeShape>
                    <RoundRectangle CornerRadius="10" />
                </Border.StrokeShape>

                <toolkit:MediaElement
                    x:Name="VideoPlayer"
                    Aspect="AspectFit"
                    BackgroundColor="Black"
                    HeightRequest="300"
                    ShouldAutoPlay="False"
                    ShouldLoopPlayback="False"
                    ShouldShowPlaybackControls="True"
                    Source="{Binding VideoSource}" />
            </Border>

            <!--  Video Controls  -->
            <HorizontalStackLayout HorizontalOptions="Center" Spacing="20">
                <Button
                    BackgroundColor="#1E90FF"
                    Command="{Binding PlayCommand}"
                    Text="Play"
                    TextColor="White"
                    WidthRequest="80" />
                <Button
                    BackgroundColor="#FF4500"
                    Command="{Binding PauseCommand}"
                    Text="Pause"
                    TextColor="White"
                    WidthRequest="80" />
                <Button
                    BackgroundColor="#DC143C"
                    Command="{Binding StopCommand}"
                    Text="Stop"
                    TextColor="White"
                    WidthRequest="80" />
            </HorizontalStackLayout>

            <!--  Video Information  -->
            <Border
                Padding="15"
                BackgroundColor="#2C2C2C"
                Stroke="Gray"
                StrokeShape="RoundRectangle 10">
                <VerticalStackLayout Spacing="10">
                    <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="Video Information"
                        TextColor="White" />

                    <Label
                        FontSize="14"
                        LineBreakMode="WordWrap"
                        Text="{Binding VideoDescription}"
                        TextColor="LightGray" />

                    <Label
                        FontSize="12"
                        Text="{Binding VideoDuration, StringFormat='Duration: {0}'}"
                        TextColor="LightGray" />

                    <Label
                        FontSize="12"
                        Text="{Binding VideoStatus, StringFormat='Status: {0}'}"
                        TextColor="LightGray" />
                </VerticalStackLayout>
            </Border>

            <!--  Original Prompt Section  -->
            <Border
                Padding="15"
                BackgroundColor="#2C2C2C"
                Stroke="Gray"
                StrokeShape="RoundRectangle 10">
                <VerticalStackLayout Spacing="10">
                    <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="Original Prompt"
                        TextColor="White" />

                    <Label
                        FontSize="14"
                        LineBreakMode="WordWrap"
                        Text="{Binding OriginalPrompt}"
                        TextColor="LightGray" />
                </VerticalStackLayout>
            </Border>

            <!--  Enhanced Prompt Section (if available)  -->
            <Border
                Padding="15"
                BackgroundColor="#2C2C2C"
                IsVisible="{Binding HasEnhancedPrompt}"
                Stroke="Gray"
                StrokeShape="RoundRectangle 10">
                <VerticalStackLayout Spacing="10">
                    <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="AI Enhanced Prompt"
                        TextColor="White" />

                    <Label
                        FontSize="14"
                        LineBreakMode="WordWrap"
                        Text="{Binding EnhancedPrompt}"
                        TextColor="LightGray" />
                </VerticalStackLayout>
            </Border>

            <!--  English Content Section  -->
            <Border
                Padding="15"
                BackgroundColor="#2C2C2C"
                Stroke="Gray"
                StrokeShape="RoundRectangle 10">
                <VerticalStackLayout Spacing="10">
                    <Label
                        FontAttributes="Bold"
                        FontSize="16"
                        Text="English Content"
                        TextColor="White" />

                    <Label
                        FontSize="14"
                        LineBreakMode="WordWrap"
                        Text="{Binding EnglishContent}"
                        TextColor="LightGray" />
                </VerticalStackLayout>
            </Border>

            <!--  Action Buttons  -->
            <HorizontalStackLayout HorizontalOptions="Center" Spacing="15">
                <Button
                    BackgroundColor="#32CD32"
                    Command="{Binding ShareVideoCommand}"
                    Text="Share Video"
                    TextColor="White"
                    WidthRequest="120" />
                <Button
                    BackgroundColor="#4169E1"
                    Command="{Binding DownloadCommand}"
                    Text="Download"
                    TextColor="White"
                    WidthRequest="120" />
                <Button
                    BackgroundColor="#696969"
                    Command="{Binding BackCommand}"
                    Text="Back"
                    TextColor="White"
                    WidthRequest="120" />
            </HorizontalStackLayout>

        </VerticalStackLayout>
        <!--  Closing main content StackLayout  -->

    </VerticalStackLayout>
</ScrollView>

The code for the ViewModel is as follows:

				
					public partial class VideoDisplayViewModel : ObservableObject, IQueryAttributable
{
    private MediaElement? _mediaElement;

    [ObservableProperty]
    private string videoTitle = "Generated Viral Video";

    [ObservableProperty]
    private string videoSource = "";

    [ObservableProperty]
    private string videoDescription = "AI-generated viral video content";

    [ObservableProperty]
    private string videoDuration = "Loading...";

    [ObservableProperty]
    private string videoStatus = "Ready";

    [ObservableProperty]
    private string originalPrompt = "";

    [ObservableProperty]
    private string enhancedPrompt = "";

    [ObservableProperty]
    private string englishContent = "";

    [ObservableProperty]
    private bool hasEnhancedPrompt = false;

    [ObservableProperty]
    private bool isLoading = true;

    public VideoDisplayViewModel()
    {
        // Sample data for demonstration
        VideoTitle = "AI Generated Viral Video";
        VideoDescription = "This video was generated using AI based on your creative prompt and enhanced with advanced algorithms.";
        OriginalPrompt = "A cat playing with a ball of yarn";
        EnhancedPrompt = "A playful orange tabby cat with bright green eyes gracefully pouncing and rolling around with a large, fluffy ball of rainbow-colored yarn in a cozy, sunlit living room with wooden floors and comfortable furniture.";
        EnglishContent = "Watch as this adorable cat brings joy and entertainment through its playful interaction with colorful yarn. Perfect for social media sharing and guaranteed to make viewers smile!";
        HasEnhancedPrompt = !string.IsNullOrEmpty(EnhancedPrompt);
        
        // For demo purposes, you can use a sample video URL or local file
        // VideoSource = "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4";
    }

    public void SetMediaElement(MediaElement mediaElement)
    {
        _mediaElement = mediaElement;
        
        // Subscribe to MediaElement events
        if (_mediaElement != null)
        {
            _mediaElement.MediaOpened += OnMediaOpened;
            _mediaElement.MediaEnded += OnMediaEnded;
            _mediaElement.MediaFailed += OnMediaFailed;
        }
    }

    private void OnMediaOpened(object? sender, EventArgs e)
    {
        if (_mediaElement != null)
        {
            VideoDuration = _mediaElement.Duration.ToString(@"mm\:ss");
            VideoStatus = "Ready to play";
            IsLoading = false; // Stop loading when media is ready
        }
    }

    private void OnMediaEnded(object? sender, EventArgs e)
    {
        VideoStatus = "Playback completed";
    }

    private void OnMediaFailed(object? sender, EventArgs e)
    {
        VideoStatus = "Error loading video";
        IsLoading = false; // Stop loading on error
    }

    [RelayCommand]
    private void Play()
    {
        try
        {
            _mediaElement?.Play();
            VideoStatus = "Playing";
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error playing video: {ex.Message}");
            VideoStatus = "Error playing video";
        }
    }

    [RelayCommand]
    private void Pause()
    {
        try
        {
            _mediaElement?.Pause();
            VideoStatus = "Paused";
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error pausing video: {ex.Message}");
        }
    }

    [RelayCommand]
    private void Stop()
    {
        try
        {
            _mediaElement?.Stop();
            VideoStatus = "Stopped";
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error stopping video: {ex.Message}");
        }
    }

    [RelayCommand]
    private async Task ShareVideo()
    {
        try
        {
            if (!string.IsNullOrEmpty(VideoSource))
            {
                await Shell.Current.DisplayAlert("Share Video", $"Sharing: {VideoTitle}\n\nCheck out this AI-generated viral video!", "OK");
            }
            else
            {
                await Shell.Current.DisplayAlert("Info", "No video available to share", "OK");
            }
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error sharing video: {ex.Message}");
            await Shell.Current.DisplayAlert("Error", "Unable to share video", "OK");
        }
    }

    [RelayCommand]
    private async Task Download()
    {
        try
        {
            // In a real app, this would download the video file
            await Shell.Current.DisplayAlert("Info", "Download functionality will be implemented with actual video generation service", "OK");
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error downloading video: {ex.Message}");
            await Shell.Current.DisplayAlert("Error", "Unable to download video", "OK");
        }
    }

    [RelayCommand]
    private async Task Back()
    {
        try
        {
            // Stop video before navigating back
            _mediaElement?.Stop();
            await Shell.Current.GoToAsync("..");
        }
        catch (Exception ex)
        {
            Debug.WriteLine($"Error navigating back: {ex.Message}");
        }
    }

    // Method to set video data from external source
    public void SetVideoData(string title, string source, string originalPrompt, string enhancedPrompt = "", string englishContent = "")
    {
        VideoTitle = title;
        VideoSource = source;
        OriginalPrompt = originalPrompt;
        EnhancedPrompt = enhancedPrompt;
        EnglishContent = englishContent;
        HasEnhancedPrompt = !string.IsNullOrEmpty(enhancedPrompt);
    }

    // IQueryAttributable implementation
    public void ApplyQueryAttributes(IDictionary<string, object> query)
    {
        Debug.WriteLine("[VideoDisplay] ApplyQueryAttributes called");
        Debug.WriteLine($"[VideoDisplay] Received {query.Count} parameters:");
        
        // Start loading when receiving new video parameters
        IsLoading = true;
        
        foreach (var kvp in query)
        {
            Debug.WriteLine($"[VideoDisplay]   {kvp.Key}: {kvp.Value}");
        }

        if (query.ContainsKey("VideoTitle"))
        {
            VideoTitle = query["VideoTitle"].ToString() ?? "";
            Debug.WriteLine($"[VideoDisplay] Set VideoTitle: {VideoTitle}");
        }

        if (query.ContainsKey("VideoSource"))
        {
            var videoPath = query["VideoSource"].ToString() ?? "";
            Debug.WriteLine($"[VideoDisplay] Received VideoSource: {videoPath}");
            
            // Validate that the file exists
            if (File.Exists(videoPath))
            {
                VideoSource = videoPath;
                Debug.WriteLine($"[VideoDisplay] ✅ Video file exists, set VideoSource: {VideoSource}");
            }
            else
            {
                Debug.WriteLine($"[VideoDisplay] ❌ Video file not found: {videoPath}");
                // Fallback to sample video for demo
                VideoSource = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
                Debug.WriteLine($"[VideoDisplay] Using fallback video: {VideoSource}");
            }
        }
        else
        {
            Debug.WriteLine("[VideoDisplay] No VideoSource parameter received, using fallback");
            VideoSource = "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
        }

        if (query.ContainsKey("OriginalPrompt"))
        {
            OriginalPrompt = query["OriginalPrompt"].ToString() ?? "";
            Debug.WriteLine($"[VideoDisplay] Set OriginalPrompt: {OriginalPrompt}");
        }

        if (query.ContainsKey("EnhancedPrompt"))
        {
            EnhancedPrompt = query["EnhancedPrompt"].ToString() ?? "";
            HasEnhancedPrompt = !string.IsNullOrEmpty(EnhancedPrompt);
            Debug.WriteLine($"[VideoDisplay] Set EnhancedPrompt: {EnhancedPrompt}");
            Debug.WriteLine($"[VideoDisplay] HasEnhancedPrompt: {HasEnhancedPrompt}");
        }

        if (query.ContainsKey("HasEnhancedPrompt"))
        {
            if (bool.TryParse(query["HasEnhancedPrompt"].ToString(), out bool hasEnhanced))
            {
                HasEnhancedPrompt = hasEnhanced;
                Debug.WriteLine($"[VideoDisplay] Set HasEnhancedPrompt from parameter: {HasEnhancedPrompt}");
            }
        }

        if (query.ContainsKey("EnglishContent"))
        {
            EnglishContent = query["EnglishContent"].ToString() ?? "";
            Debug.WriteLine($"[VideoDisplay] Set EnglishContent: {EnglishContent}");
        }

        VideoDescription = $"AI-generated viral video: {VideoTitle}";
        Debug.WriteLine($"[VideoDisplay] Set VideoDescription: {VideoDescription}");
        Debug.WriteLine("[VideoDisplay] ApplyQueryAttributes completed");
    }
}

With the above, we complete the application's code.

Complete Application Flow

As a final step, I share an image showing the entire process from the prompt input to the generation of the final video:

You can find the full repository on GitHub: ViralVideosDemo Repo

I hope you found the article enjoyable.

Best regards!

How to Apply Different Item Templates in One CollectionView with .NET MAUI

Wed, 24 Jul 2024 05:00:00 GMT

.NET MAUI UI July - 2024

This post is part of the .NET MAUI UI July - 2024 calendar, organized by Matt Goldman. I invite you to explore the other posts in the calendar and enjoy them. You might find something that changes your perspective for your upcoming projects.

.NET MAUI

When working with mobile applications in general, it is essential to know how to create lists and define the appearance of their items. However, have you ever wondered how to create multiple designs for the list items?

This is the topic we will cover today. Let's get started!

Creating a Demonstrative Generic List

Let's start with something simple, that is, creating a list like the ones we already know, with the purpose of having a starting point. In our example, we will create a product list composed of products with a regular price and products on sale.

To do this, I will define a Product Model:

				
					     public class Product
     {
          public int Id { get; set; }
          public string Name { get; set; }
          public decimal Price { get; set; }
          public string Image { get; set; }
          public int Stock { get; set; }
          public bool HasOffer { get; set; }
          public decimal OfferPrice { get; set; }
     }

I will also create a ViewModel called ProductsViewModel.cs, where I will create a set of fictitious data, which looks something like this (I have removed most of the definition to optimize space):

				
					    public class ProductsViewModel
    {
        public ObservableCollection<Product> Products { get; set; } =
             new ObservableCollection<Product>();
        public ProductsViewModel()
        {
            Products = new ObservableCollection<Product>(LoadItems());
        }
        private List<Product> LoadItems()
        {
            return new List<Product>
               {
                    new Product
                     {
                         Name = "Yogurt",
                         Price = 60.0m,
                         Image = "yogurt.png",
                         HasOffer = false,
                         Stock = 28
                     },
                     ...
               };
        }
    }

Finally, on the default page MainPage.xaml, I will define a CollectionView binding it to the Products property defined in the previous code:

				
					<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.ItemsLayout>
        <LinearItemsLayout ItemSpacing="10" Orientation="Vertical" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid
                Margin="15,10,15,0"
                ColumnDefinitions=".1*,.2*,.7*"
                RowDefinitions="*,*">
                <Frame
                    Grid.RowSpan="2"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    BorderColor="White">
                    <Frame.Background>
                        <LinearGradientBrush EndPoint="1,0">
                            <GradientStop Offset="0" Color="#F8F9FA" />
                            <GradientStop Offset="1" Color="#DEE2E6" />
                        </LinearGradientBrush>
                    </Frame.Background>
                </Frame>
                <Image
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    HeightRequest="100"
                    Source="{Binding Image}" />
                <Label
                    Grid.Column="2"
                    FontSize="Large"
                    Text="{Binding Name}"
                    VerticalOptions="Center" />
                <Label
                    Grid.Row="1"
                    Grid.Column="2"
                    FontSize="Large"
                    Text="{Binding Price, StringFormat='{0:C}'}"
                    VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

All of the above produces a list like the one you can see below:

Up to this point, surely nothing you haven't seen before. Now, let's move on to the fun part by seeing how to create a different design for the products on sale.

Creating a Different Design for Products on Sale

Once we have our example compiling and running, the next step is to determine the design we will use for the items on sale. In my case, I have chosen to create a design that stands out from the regular design, so it does not go unnoticed by the user:

				
					                <Grid
                    Margin="15,10,15,0"
                    ColumnDefinitions=".3*,.7*"
                    HeightRequest="200"
                    RowDefinitions="*,*">
                    <Frame
                        Grid.RowSpan="2"
                        Grid.ColumnSpan="2"
                        BorderColor="White">
                        <Frame.Background>
                            <LinearGradientBrush EndPoint="1,0">
                                <GradientStop Offset="0" Color="#FFBF47" />
                                <GradientStop Offset="1" Color="#EEB54C" />
                            </LinearGradientBrush>
                        </Frame.Background>
                    </Frame>
                    <Image
                        Grid.RowSpan="2"
                        HeightRequest="100"
                        Source="{Binding Image}" />
                    <Label
                        Grid.Column="2"
                        FontAttributes="Bold"
                        FontSize="Title"
                        Text="{Binding Name, StringFormat='OFFER: {0}'}"
                        TextColor="White"
                        VerticalOptions="End" />
                    <Label
                        Grid.Row="1"
                        Grid.Column="2"
                        FontAttributes="Bold"
                        FontSize="Title"
                        Text="{Binding Price, StringFormat='{0:C}'}"
                        TextColor="White"
                        VerticalOptions="Start">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding OfferPrice, StringFormat='{0:C}'}" />
                                <Span
                                    Text="{Binding Price, StringFormat='{0:C}'}"
                                    TextColor="DarkRed"
                                    TextDecorations="Strikethrough" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                </Grid>

Changing the design of the products in the previous list, we will have the following result:

Without a doubt, this design is much more eye-catching. Now the question is, how can we use both designs in the list? We will see that next.

Creating a DataTemplateSelector

To determine which design to apply to each item at runtime, we will use a DataTemplateSelector. This is a very simple class that we need to inherit from to determine the resource to use, and it looks like this:

				
					    public class ProductTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            throw new NotImplementedException();
        }
    }

You can see that by inheriting from DataTemplateSelector, we are required to implement the OnSelectTemplate method, which contains two arguments that allow us to carry out the design selection:

item: Allows us to get each of the items to apply a design.
container: Is the control that contains the list of items.

The great advantage of this approach is that we can use any comparison we want to determine the design to use. We could use an object property, a comparison, a filter, etc.

In my case, I will retrieve the product to which the item is being bound, and then I will use the HasOffer property defined in the model to determine whether the product is on sale or not:

				
					    public class ProductTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var product =
                 item as Product;
            if (!product.HasOffer)
            {
               //Product has offer
            }
            else
            {
               //Product has no offer
            }
            return new DataTemplate();
        }
    }

The final step is to determine which design to apply to the items based on the condition. There are several ways to do this, but it all depends on where you place the item designs.

You should do this by defining a DataTemplate for each design you want to apply, as well as an x:Key. In my case, I will do it in the resources of the CollectionView:

				
					<CollectionView ItemsSource="{Binding Products}">
    <CollectionView.Resources>
        <DataTemplate x:Key="ProductStyle">
            <Grid
                Margin="15,10,15,0"
                ColumnDefinitions=".1*,.2*,.7*"
                RowDefinitions="*,*">
                <Frame
                    Grid.RowSpan="2"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    BorderColor="White">
                    <Frame.Background>
                        <LinearGradientBrush EndPoint="1,0">
                            <GradientStop Offset="0" Color="#F8F9FA" />
                            <GradientStop Offset="1" Color="#DEE2E6" />
                        </LinearGradientBrush>
                    </Frame.Background>
                </Frame>
                <Image
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    HeightRequest="100"
                    Source="{Binding Image}" />
                <Label
                    Grid.Column="2"
                    FontSize="Large"
                    Text="{Binding Name}"
                    VerticalOptions="Center" />
                <Label
                    Grid.Row="1"
                    Grid.Column="2"
                    FontSize="Large"
                    Text="{Binding Price, StringFormat='{0:C}'}"
                    VerticalOptions="Center" />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="OfferStyle">
            <Grid
                Margin="15,10,15,0"
                ColumnDefinitions=".3*,.7*"
                HeightRequest="200"
                RowDefinitions="*,*">
                <Frame
                    Grid.RowSpan="2"
                    Grid.ColumnSpan="2"
                    BorderColor="White">
                    <Frame.Background>
                        <LinearGradientBrush EndPoint="1,0">
                            <GradientStop Offset="0" Color="#FFBF47" />
                            <GradientStop Offset="1" Color="#EEB54C" />
                        </LinearGradientBrush>
                    </Frame.Background>
                </Frame>
                <Image
                    Grid.RowSpan="2"
                    HeightRequest="100"
                    Source="{Binding Image}" />
                <Label
                    Grid.Column="2"
                    FontAttributes="Bold"
                    FontSize="Title"
                    Text="{Binding Name, StringFormat='OFFER: {0}'}"
                    TextColor="White"
                    VerticalOptions="End" />
                <Label
                    Grid.Row="1"
                    Grid.Column="2"
                    FontAttributes="Bold"
                    FontSize="Title"
                    Text="{Binding Price, StringFormat='{0:C}'}"
                    TextColor="White"
                    VerticalOptions="Start">
                    <Label.FormattedText>
                        <FormattedString>
                            <Span Text="{Binding OfferPrice, StringFormat='{0:C}'}" />
                            <Span
                                Text="{Binding Price, StringFormat='{0:C}'}"
                                TextColor="DarkRed"
                                TextDecorations="Strikethrough" />
                        </FormattedString>
                    </Label.FormattedText>
                </Label>
            </Grid>
        </DataTemplate>
    </CollectionView.Resources>
    <CollectionView.ItemsLayout>
        <LinearItemsLayout ItemSpacing="10" Orientation="Vertical" />
    </CollectionView.ItemsLayout>
</CollectionView>

As we have already defined several DataTemplates, we can retrieve them and assign them to the CollectionView item according to our needs, as shown in the following example:

				
					    public class ProductTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
        {
            var product =
                 item as Product;
            var collectionView = container as CollectionView;
            if (!product.HasOffer)
            {
               return (DataTemplate)collectionView.Resources["ProductStyle"];
            }
            else
            {
                return (DataTemplate)collectionView.Resources["OfferStyle"];
            }
            return new DataTemplate();
        }
    }

Finally, you need to specify in the CollectionView control that you will use the created selector, as follows:

				
					<ContentPage
    xmlns:selectors="clr-namespace:DataTemplateSelectorDemo.Selectors"
    ...>
    
    <ContentPage.Resources>
        <ResourceDictionary>
            <selectors:ProductTemplateSelector x:Key="ProductTemplateSelector" />
        </ResourceDictionary>
    </ContentPage.Resources>
    
    <CollectionView ItemTemplate="{StaticResource ProductTemplateSelector}" ItemsSource="{Binding Products}">
        ...
    </CollectionView>
</ContentPage>

With these changes, you will be ready to run the application, which looks like this:

I hope you find this post useful, and remember that I have a course on .NET MAUI where I explain this topic and many more step by step. See you in the next post!

Learn .NET MAUI creating projects

Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.

.NET MAUI Advent Calendar English 2023

Sun, 19 Nov 2023 03:05:16 GMT

Advent calendars are a fantastic initiative promoted by the tech community, in which, during December, experts share their knowledge through contributions of a specific technology in different formats:

blog posts
videos
webinars
etc.

This year we (Microsoft MVPs Héctor Pérez, Pablo Piovano and Luis Beltrán proudly present another edition of the .NET MAUI Advent Calendar 2023 in English (take a look at last year's contributions here) We know that communities are full of talented people. Let's promote this idea with the sole purpose of creating a collaborative space in which we all benefit, from expert, professionals to students, avid seekers of knowledge. Are you in? Would you like to share your knowledge with the community? If you are interested in participating in this initiative, just follow these simple steps: Before December:

Reserve a slot by replying to our tweet with the hashtag #AzureAdvent, or by leaving a comment on this post.
When reserving a slot, choose an available date from the calendar (see below). We might open new dates if there is a high response from the community 🙂
Important: Please send us the title of your contribution during the last week of November at the latest.

In December, on the chosen date:

Publish your contribution. If you use a platform like WordPress / YouTube, you can schedule it in advance so that it is published on the desired date / time. We will share your contribution on social networks (Twitter and our Facebook communities).
In your contribution, add a link to this page, so that visitors can see the complete set of contributions and learn more about the calendar initiative.
Share the link to us to update the table with your contribution.

You can also share your contribution using the hashtags #azure and #AzureAdvent. These are the contributions to the Azure Advent Calendar 2023 in English:

If you need inspiration for your contribution, here are some ideas:

UI/UX challenges in .NET MAUI
Useful Nuget packages for development with .NET MAUI
.NET MAUI developer tips
What's new in .NET MAUI?
Less-known but amazing features in .NET MAUI
Integration of .NET MAUI with other platforms

All contributions related to .NET MAUI are welcome, even if you have been developing with this technology for a short time, for sure you have some tips or experience to share.

In case you don't have any platform where to publish your content, there are several free alternatives such as wordpress.com, GitHub pages, dev.to, medium and many more.

Thanks in advance to those who wish to contribute to this initiative. We hope that you enjoy and learn a lot!

One more thing…

Check the Advent Calendars of other technologies which include amazing community contributions too:

Date	Requested By	Topic
Dec 1	Luis Beltrán	Storing local data in a .NET MAUI Blazor Hybrid App using IndexedDB - Part 1
Dec 4	Héctor Pérez	.NET MAUI + Azure: Magic in Children's Stories
Dec 5	Enis Necipoglu	MAUI TreeView Implementation with UraniumUI
Dec 6	Maddy Montaquila	Customizing your labels with FormattedText \| .NET MAUI Minutes
Dec 7
Dec 8
Dec 11
Dec 12
Dec 13
Dec 14
Dec 15
Dec 18
Dec 19
Dec 20
Dec 21
Dec 22
Dec 25
Dec 26
Dec 27
Dec 28
Dec 29

How to build a story generator application for children with .NET MAUI and Microsoft Azure

Sat, 11 Nov 2023 15:46:10 GMT

In this post, I will show you in more detail how I created the story generator application for children, as well as additional resources and source code. Let's get started!

First step of the application

In the .NET CONF video, I showed that the application was created in 5 different steps. The first step was to create the parallax effect. I found this idea very interesting to be applied in an application for children. Searching if someone had done something similar in Xamarin / .NET MAUI, I was able to find an example from ValonK:

https://github.com/ValonK/Xamarin.Forms.Parallax

In my case, after searching the internet, I ended up using the Accelerometer and creating some additional methods to delimit how much the images can move within their space, as well as to indicate the speed of movement:

				
					    private double LimitTranslation(double translation, double imageSize, double containerSize)
    {
        double maxTranslation = imageSize - containerSize;
        if (maxTranslation < 0)
            return 0;
        return Math.Max(-maxTranslation, Math.Min(translation, maxTranslation));
    }
    
    public async Task TranslateImage(Image image, double xTranslationFactor, double yTranslationFactor, uint length, double maxWidth, double maxHeight)
    {
        double xTranslation = LimitTranslation(xTranslationFactor, image.Width, maxWidth);
        double yTranslation = LimitTranslation(yTranslationFactor, image.Height, maxHeight);
        await image.TranslateTo(xTranslation, yTranslation, length);
    }

Second step of the application

The second step for the creation of the application, was to create a class that allowed to add gradients to a button, but that could have an animated effect. I have to admit that this step was a bit complicated, since I have not found until today, any similar reference for .NET MAUI (using a custom animation).

I started creating some simple animations, until I came to the perfect animation, at least for me, that allows you to add as many gradients as you want and iterate through them in the time you specify. This allows you to control how fast the transitions between gradients happen.

The great advantage of having created an extension class that receives a VisualElement, is that it can be applied to any control that inherits from this type, i.e., it can be layouts, controls, etc. This is an example of an animation as the background of a ContentPage:

Third step of the application

The third part, consists of adding an animation that lets the user know that his story is being generated. Since I wanted to have a fully customized page, I decided to use Mopups.

For this step, I have to thank Ahmad Halawani, for creating the beautiful animation you can see below:

If you want a quick reference on how to use the package, Gerald Versluis has a very good video on the subject:

Similarly, I added an animation to the Label control to have an effect where the opacity decreases and increases, to give feedback to the user that their story is being created:

				
					    void StartAnimation()
    {
        var isFadingIn = false;
        Action<double> callback = input => lblMessage.Opacity = input;

        void UpdateState(double value)
        {
            isFadingIn = !isFadingIn;
            var newOpacity = isFadingIn ? 1.0 : 0.5;
            var length = TimeSpan.FromSeconds(1);  //Duration of the animation

            //Start the animation
            lblMessage.Animate("Fade", callback, lblMessage.Opacity, newOpacity, length: (uint)length.TotalMilliseconds, finished: (v, c) => UpdateState(newOpacity));
        }

        UpdateState(lblMessage.Opacity);
    }

Fourth step of the application

The fourth part was to create the player page of the story, which is composed of an image at the top, a custom control that displays the current page of the story, the text of the story and the player controls.
The image of the current page is an Image control, which has an associated animation that is executed every time the image changes, through the following code:

				
					public StoryView(StoryViewModel storyViewModel)
{
	InitializeComponent();
	BindingContext = storyViewModel;
    image.PropertyChanged += Image_PropertyChanged;
}

private void Image_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(Image.Source))
    {
        image.Scale = 1;
        ScaleImage();
    }
}

private void ScaleImage()
{
    var startingScale = image.Scale;
    var endScale = startingScale * 2;
    var length = 60000;

    image.Animate(
        name: "ScaleAnimation",
        callback: scale => image.Scale = scale,
        start: startingScale,
        end: endScale,
        length: (uint)length,
        easing: Easing.Linear
    );
}

For the custom control that displays the current page, I used SkiaSharp. Julian Ewers-Peters has an excellent tutorial on this topic.

For the custom control outside the button, which displays the current second of playback, I used a custom control from Javier Suarez.

Finally, to control the audio playback, I used the Plugin.MediaManager package, which fortunately is now compatible with .NET MAUI. I really like this package because it allows to load the stream from a url, and manipulate it to stop it, pause it, etc. In addition, it contains a number of events such as the one that allows to detect when the audio changes to a different second.

Fifth step of the application

The fifth and final step is the creation of the ASP.NET Core Web API to take care of all the information generation, and thus avoid placing API Keys in the application directly. For this step I used Semantic Kernel, which as I explained in the lecture, is a very versatile SDK that allows you to use both OpenAI and Azure OpenAI service, for the generation of text and images. You can find a lot of information on this topic directly in the project repository, and for the case of image generation, here is a concrete example of how to generate images.

For the Text-to-Speech service, I have used the Microsoft.CognitiveServices.Speech package for the generation of the streams, and the Azure.Storage.Blobs package for the file upload.

This project has been a lot of fun and with its complexities, but I was happy to prepare a unique demo for this event. I thank the whole team behind the organization for considering me to give the talk and for organizing such a great event.

Learn .NET MAUI creating projects

Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.

How to use gradients in .NET MAUI

Mon, 03 Apr 2023 19:23:06 GMT

Gradients are a very simple way to add a better visual experience to your cross-platform applications. That's why, in this post, I'm going to show you how to work with linear and circular gradients in .NET MAUI.

Understanding the concept of gradients

Before starting with the application of gradients in .NET MAUI, we must understand how they work, for this, I will use the CSS gradient tool.

In this site we can see a visualization of a linear gradient when opening the page.

This means that the gradient extends linearly from one end with one color to the other end with another color. In total, 3 colors are being set as part of the gradient in the example.

You can also see a couple of additional options on the site:

The first option allows us to indicate whether we want a linear or radial gradient, which basically refers to a gradient based on circles from the inside out. Similarly, we can set the gradient angle in the case of linear gradients. These concepts are important, since they will help us to know how to define gradients in .NET MAUI.

Finally, the 3 colors that have been set, which can be increased or decreased according to our needs, and which can also be changed color, are called Gradient Stops, since they define to what extent one of the colors will affect the gradient. In summary, and for your consideration, we can define the following:

Gradient Type: How the gradient will look, whether linearly or radially.
Gradient Angle: Towards which direction the gradient will point.
Gradient Stops: The colors in the gradient, and their position in the gradient.

Creating Linear Gradients in .NET MAUI

To add gradients to a .NET MAUI application, we must first specify the Background property of a View element from the XAML code. For example, we could define this property of a Grid as follows, although it is also possible to do the same with other elements, for example, inside a Frame:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
    </Grid.Background>
</Grid>

Once the property is used, let's start specifying a linear gradient. For it, we have to define an element of the type LinearGradientBrush, with a StartPoint equal to 0,0, and an EndPoint equal to 0,0 also:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="0,0">
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

Surely by now, you are wondering what the StartPoint and EndPoint properties are for.

These are properties that allow you to specify the orientation of the linear gradient, and I'll explain it better with this image:

In the image are represented different points that we can set for a gradient, indicating the direction from and to where we want the gradient to go. If we wanted the gradient to start in the upper left corner, and end in the lower right corner, we would have to specify this in the LinearGradientBrush.

If we wanted the gradient to go from top to bottom, we could specify StartPoint 0,0 and EndPoint 0,1, and so on.

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

With this we have already specified the type of gradient to use and the orientation. The third step is to specify the colors of the gradient. For it, we must use the GradientStopCollection property and inside, define the amount of GrandientStops that we need, as follows:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
            <GradientStopCollection>
                <GradientStop Offset="0" Color="DarkBlue">
                <GradientStop Offset="1" Color="LightBlue">
            </GradientStopCollection>
        </LinearGradientBrush>
    </Grid.Background>
</Grid>

Each GradientStop defines an Offset and a color. The Offset refers to the location of the GradientStop within the gradient, and can have a value between 0 and 1, while the color defines the color of the gradient section. The above code would result in the following:

Creating Radial Gradients in .NET MAUI

In the case of defining radial gradients, it is sufficient to change the gradient type to RadialGradientBrush.

Unlike the linear gradient, the StartPoint and EndPoint properties are not defined, but the Center property is defined, which sets the central position of the gradient:

				
					<Grid BackgroundColor="Navy">
    <Grid.Background>
        <RadialGradientBrush Center="0.5,0.5">
            <GradientStopCollection>
                <GradientStop Offset="0" Color="DarkBlue">
                <GradientStop Offset="1" Color="LightBlue">
            </GradientStopCollection>
        </RadialGradientBrush>
    </Grid.Background>
</Grid>

Running the application, with the addition of a pink color, results in the following screen:

Finally, the screenshots you've seen throughout this post are part of a practical application of my .NET MAUI course, in which you take a random phrase and apply an automatically generated multi-color gradient to it, and in which you can learn much more about .NET MAUI.

Learn .NET MAUI creating projects

Learn how to create cross-platform applications, thanks to the power of .NET MAUI and a series of real projects.

How to detect a language of a string in C# .NET?

Mon, 27 Mar 2023 15:38:45 GMT

Welcome, this time, I want to share with you the solution to a problem I had a few days ago, how to know what language a text string belongs to?

Throughout my research, I found several possible solutions, unfortunately some did not meet 100% of what I needed, for example, failed to detect certain specific languages, or had a particular cost.

In the end, I found a solution that I found extraordinary and it is free. To show it to you, I have created a new Console project in Visual Studio, which I called “DetectingLanguagesDemo”.

I'm going to install a nuget package, which by the way, I fortunately found by browsing through the dozens of results in the package search, and it's called “LanguageDetection.NETStandard”, by Pēteris Ņikiforovs.

				
					NuGet\Install-Package LanguageDetection.NETStandard

Once the plugin has been installed, we simply have to create a new instance of the “LanguageDetector” class, to which we must indicate which languages we want to load through the “AddLanguages” method, which receives an array with the languages we want to detect, such as English:

				
					using LanguageDetection;

var detector = new LanguageDetector();

detector.AddLanguages(new[] { "en" });

or we can use the AddAllLanguages method, which will be able to detect 53 languages.

				
					detector.AddAllLanguages();

Finally, it is enough to execute the Detect method, passing the text string, in this case “This library is perfect for what I need”, which will return the language of the string. I will create a Console.WriteLine to see the result, and run the application.

				
					string text = "This library is perfect for what I need";

detector.Detect(text);

You can see that the result of the execution returns the code eng, which refers to the English language. I am going to change the string to the same string in Spanish: “Esta biblioteca es perfecta para lo que necesito“, and run the program again.

The result is the spa code, which corresponds to the Spanish language. I am going to make a last test with the same string, but this time translated into French: “Cette bibliothèque répond parfaitement à mes besoins”.

Once again, we get the code fra, corresponding to the French language.

If you are wondering why the result returns 3 characters, it is because the ISO 639.3 standard is used. To make things easier for you, I share with you the link to this website, which contains the name of the languages, as well as the corresponding ISO code.

Finally, I also share with you the list inside the repository with the ISO codes of the languages supported by the nuget package.

I hope you find this information useful.

How was the MAUIDelivery application created?

Tue, 30 Aug 2022 21:26:59 GMT

Hi Devs!

Nice to have you around.

Nice to have you around! I'm launching a new personal project in the English language, where I plan to publish a lot of content related to software development.

And what better way to launch the site, than sharing my contribution to the .NET MAUI Beautiful UI Challenge.

The purpose of this post, is to explain you a little bit how the MAUIDelivery application is composed.

I want to clarify, that the application uses preloaded information at the beginning of each window, so you shouldn't be surprised if you select an element of a collection and it shows you another one in the next window.

Also, being a UI challenge, there are some uncompleted functionalities, such as the map functionality. Additionally, being a weekend project, there are many things to be polished, such as the addition of resource dictionaries for the reuse of styles, or the implementation of the mvvm pattern, which can remain as a personal challenge to be done.

Finally, I want to give special thanks to my friend Galo Galvez, who was a key piece in the realization of the project through their feedback.

Still, I think it's a pretty good looking application. Without further ado, let's get started!

Home Page

This is the Home Page of the application, in other words, the Login page.

Annotation 1

Annotation 2

Annotation 3

Annotation 4

Annotation 5

The page makes use of rounded edges in various sections, to give an interesting appearance. In the case of the white section, a frame was used, although there are many ways to achieve the same effect, either through a BoxView or a RoundRectangle. In the case of the image, it is achieved through the following code:

				
					<Frame
                Grid.Row="1"
                Margin="0,-30,0,0"
                CornerRadius="25">

As part of the application, extensive use is also made of icons, so the FontAwesome font is used, which includes a large collection of icons.
An example of this is the use of icons to show the user that an email and password are required. Each icon is located inside a frame element, as follows:

				
					<?xml version="1.0" encoding="UTF-8"?>
<Frame Padding="0" BackgroundColor="#EDEBF6" CornerRadius="10" HeightRequest="60" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="60">
   <Image HorizontalOptions="Center">
      <Image.Source>
         <FontImageSource FontFamily="AwesomeSolid" Glyph="&#xf084;" Color="#4F3F9B" />
      </Image.Source>
   </Image>
</Frame>

Create Account Page

This is the page for the user to register a new account.

The page contains a format very similar to the Login page, except that you are prompted for a name to register.

Stores Page

This is the page that shows the list of businesses from which you can place an order.

Annotation 1

Annotation 2

Annotation 3

Annotation 4

Annotation 5

The page to view list of Stores, consists of several interesting elements. First, at the top, I added an icon to select or add delivery addresses, which we will discuss later.
Also, I created a search box from an icon and an Entry control, as follows:

				
					<?xml version="1.0" encoding="UTF-8"?>
<Frame Padding="0" BackgroundColor="#4F3F9B">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width=".2*" />
         <ColumnDefinition Width=".9*" />
      </Grid.ColumnDefinitions>
      <Image HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="20">
         <Image.Source>
            <FontImageSource FontFamily="AwesomeSolid" Glyph="" />
         </Image.Source>
      </Image>
      <Entry Grid.Column="1" FontFamily="bold" Placeholder="Search a restaurant or dish" PlaceholderColor="#9D9D9D" TextColor="White" />
   </Grid>
</Frame>

I have used a Frame control to give a card-like appearance to each element of the CollectionView, and I have given each of them a shadow, which gives a very attractive appearance.

				
					<?xml version="1.0" encoding="UTF-8"?>
<BoxView Grid.RowSpan="2" CornerRadius="10" Color="White">
   <BoxView.Shadow>
      <Shadow Brush="#CFD0D4" Opacity="0.8" Offset="10,10" />
   </BoxView.Shadow>
</BoxView>

Inside the card, as an element to highlight, is the logo of each business, which is rounded and with a gradient border, which has been achieved thanks to a Border control as follows:

				
					<?xml version="1.0" encoding="UTF-8"?>
<Border HeightRequest="70" HorizontalOptions="Center" StrokeShape="Ellipse" StrokeThickness="4">
   <Border.Stroke>
      <LinearGradientBrush EndPoint="0,1">
         <GradientStop Offset="0.0" Color="#FEFEEF" />
         <GradientStop Offset="0.25" Color="#EBD570" />
         <GradientStop Offset="0.5" Color="#FF94C3" />
         <GradientStop Offset="0.75" Color="#A573E4" />
         <GradientStop Offset="1.0" Color="#A9E2EE" />
      </LinearGradientBrush>
   </Border.Stroke>
   <Image HorizontalOptions="Center" Source="{Binding Logo}" />
</Border>

The scrollable element for choosing a direction

As mentioned before, if we tap on the arrow next to the address, a control will be displayed from below that will show previously registered addresses, as well as the option to select a new address.

The address list is a Frame control containing a Grid to be able to size the address section and the buttons. For the scrolling effect to work, the frame must be named:

				
					<Frame
    x:Name="addressesList"
    Grid.RowSpan="2"
    BackgroundColor="#F7F7F7"
    CornerRadius="25">

Next, I have created a field in the code behind to store the height of the window, with the purpose that we know up to what position the Frame must be shown, this we can know it in the method OnSizeAllocated. In this method, we are also going to set the TranslationY property to 0 initially, to hide the Frame:

				
					private double height = 0;

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    addressesList.TranslationY = height;
    this.width = width;
    this.height = height;
}

With this we have done, it is possible to show and hide the Frame in a simple way, by clicking on a specific element of the screen:

				
					     private void SelectAddress_Clicked(object sender, EventArgs e)
     {
          addressesList.TranslateTo(0, height, 500, Easing.SinIn);
     }

     private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
     {
          addressesList.TranslateTo(0, 0, 500, Easing.SinOut);
     }

The screen for adding a new address

This is the screen intended to allow the user to add a new delivery address.

This is a very simple screen, which should allow the user to select a location from the map, and then display the street as part of the data entered. It should also allow the user to add references to the location.

Actually, the application does not make use of maps, and only shows an image as a placeholder.

Store Page

This is a store page, which displays relevant information such as the rating and the categories that can be found in the store.

On this page, I used a CollectionView to display the store categories. The opacity is achieved by using a Grid over the category images, as follows:

				
					<Grid>
	<Image Aspect="AspectFill" Source="{Binding Image}" />
	<Grid BackgroundColor="Black" Opacity=".5" />
</Grid>

Menu Page

After you have selected a category, the page is displayed to show the products in the store.

At the top, we have a CollectionView, whose purpose is to allow us to move between categories quickly.

The idea is to pre-select the item that has been selected on the previous page, and to filter the products by category, as it is not currently implemented.

On this page, again the elements are displayed in the form of a card with a shadow, being a Grid the one in charge of dividing the sections for each element of the card.
We can also notice at the bottom, an orange box that shows the order information such as the items in the cart and the estimated total. If we click on this element, we can go to the payment processing page.

Products page

This is the product page, i.e. where the ingredients of a product can be configured, as well as the Extras and supplements that can be added.

The great advantage of this page is that it has implemented the option to add as many add-ons as necessary according to a product. This is done thanks to the established class hierarchy.

				
					Extras = new List<Extra>
{
     new Extra
     {
          options = new List<Option>
          {                         
               new Option
               {
                    name = "Extras",
                    suboptions = new List<Suboption>
                    {
                         new Suboption
                         {
                              Name = "French fries",
                              Rule = EnumRule.Min0_Max1
                         }
                    }
               }
          }
     }
};

In the same way, each section is shown, because the CollectionView has been enabled to show groupings, which is filled thanks to the following code:

				
					var grouped =  from o in AllOptions
               group o by o.GroupName
               into groups
               select new OptionsGroup(groups.Key, groups.ToList());

Options = new List<OptionsGroup>(grouped);

Finally, the previous code shows the assignment to a property called Rule, which basically indicates the number of elements that can be selected as a complement. This assignment, serves to be able to apply a DataTemplate to each element of the CollectionView, with the purpose of showing a CheckBox or a RadioButton according to the established rule:

				
					protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
{
     var collection = container as CollectionView;

     if (container != null)
     {
          var product = item as BaseOptionsItem;
     if (product.Rule == EnumRule.None)
     {
          return (DataTemplate)collection.Resources["checkOption"];
     }
     else if (product.Rule == EnumRule.Min0_Max1)
     {
          return (DataTemplate)collection.Resources["checkOption"];
     }
     else if (product.Rule == EnumRule.Min1_Max1)
     {
          return (DataTemplate)collection.Resources["radioOption"];
     }
     else if (product.Rule == EnumRule.Max)
     {
          return (DataTemplate)collection.Resources["radioOption"];
     }
     }
     return null;
}

At the end of the product configuration, the product must be added to the shopping cart and allow the user to continue shopping, so a PopAsync is made to the previous page by pressing the ADD button.

Payment page

This is the payment page. In it, the idea is to be able to add new cards, as well as other payment methods (which is not implemented).

For this page, I reused the same layout of the addresses, as well as a frame with borders to show a nice visual appearance. The button with the + sign should be able to add a new card, however, this functionality is not implemented.

Clicking on the Pay Now button should initiate the payment processing. Currently only a Lottie animation is displayed showing that the transaction was successful:

With this we finish the analysis of the MAUIDelivery application. If you liked it, and want to see more content like this, feel free to leave me a comment.

Where can I learn more about .NET MAUI?

To end this publication, I would like to tell you that I have created a .NET MAUI course, in which I deal with topics from basic to advanced, and I update it regularly. If you are interested, you can see the MAUI course syllabus.