Day 2 – Running and Editing Your First MAUI App

After creating your project (I named mine Simple Media Player), you’ll see the default MAUI template ready to run.

On the menu bar, as shown in Figure 1, switch the target device to Windows Machine.

Next, press F5 on your keyboard — this will build and deploy the app template on your Windows system.

If you prefer testing on a mobile device, you can connect your Android phone or use an Android Emulator. For now, let’s stick with Windows Machine to see how it works.

💡 Mac Users: You can connect your iPhone and select Local iOS Device, or use the iOS Simulator to run the app.

Editing the MainPage

Now that your project runs successfully, the next step is to customize the MainPage to match our Simple Media Player concept.

1. In Solution Explorer, locate and open MainPage.xaml.

2. Clear everything inside it except the <ContentPage> root element — we’ll build our layout from scratch.

3. Next, open MainPage.xaml.cs (the code-behind file).

4. Remove all the existing code except the namespace declaration — we’ll add our custom logic soon.

Once you’ve done that, press F5 again to run the project.
You’ll notice that the default template has been cleared, and a blank window now appears — confirming that your cleanup was successful and your app is ready for customization.

Creating the Player Layout

Now let’s add our own layout and functionality.

Step 1 – Update MainPage.xaml

Replace the contents of your MainPage.xaml file with the following code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SimpleMediaPlayer.MainPage"
             BackgroundColor="#101820"
             Title="Simple Media Player">

    <VerticalStackLayout Padding="30" Spacing="25" VerticalOptions="Center">
        <Label Text="Simple Media Player"
               FontSize="24"
               HorizontalOptions="Center"
               TextColor="White"/>

        <BoxView HeightRequest="200"
                 WidthRequest="300"
                 Color="#222"
                 CornerRadius="10"
                 HorizontalOptions="Center"
                 VerticalOptions="Center"/>

        <HorizontalStackLayout HorizontalOptions="Center" Spacing="20">
            <Button Text="Play" BackgroundColor="#2DD4BF" TextColor="White"/>
            <Button Text="Pause" BackgroundColor="#64748B" TextColor="White"/>
            <Button Text="Stop" BackgroundColor="#EF4444" TextColor="White"/>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</ContentPage>

Step 2 – Add the Code-Behind Logic

Now open MainPage.xaml.cs and replace its contents with this:namespace SimpleMediaPlayer
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Step 3 – Run the App

Press F5 once more.
You’ll now see your Simple Media Player interface with working Play, Pause, and Stop buttons controlling the video.

That completes Day 2 — your app now has a functional media player UI.