Your First App

The project template already creates a working counter app. Before replacing it, it helps to know how its few pieces fit together.

Project files

The generated project contains:

• MyApp.csproj: the .NET for iOS project and SkeleKit package reference.
• Main.cs: configures and starts the application.
• MainView.cs: contains the first page and its UI.
• Info.plist: contains the iOS application and scene configuration.
• LaunchScreen.storyboard: defines the native launch screen.
• Entitlements.plist: contains the application's Apple entitlements.

Application host

Main.cs creates the SkeleKit application:

using MyApp;
using SkeleKit;

SkeleApplication.CreateBuilder()
    .SinglePage<MainView>()
    .Build()
    .Run(args);

• CreateBuilder() creates the application builder.
• SinglePage<MainView>() selects MainView as the root page.
• Build() creates the application and its services.
• Run(args) hands control to iOS.

Larger applications can use a navigation stack or tabs instead. A single page keeps the first project easy to follow.

The first page

The generated MainView contains a label, a button, and a small amount of local state (without using MVVM patterns):

using SkeleKit;

namespace MyApp;

[Page]
public class MainView : ContentView
{
    int count;

    public MainView()
    {
        Label counterLabel;

        Content = new StackPanel
        {
            VerticalAlignment = VerticalAlignment.Center,
            Spacing = 4,

            Children =
            {
                (counterLabel = new Label
                {
                    HorizontalAlignment = HorizontalAlignment.Center,
                    Text = "Count: 0"
                }),

                new Button
                {
                    HorizontalAlignment = HorizontalAlignment.Center,
                    Text = "Click me",
                    Command = Command.From(() =>
                        counterLabel.Text = $"Count: {++count}")
                }
            }
        };
    }
}

• [Page] registers the page through the included source generator. Optionally, you can also register it manually in the application host using .UsePages(configure => ...)
• ContentView is the base class for all pages, normal views would use View.
• StackPanel arranges its children vertically.
• VerticalAlignment.Center centers the panel in the available space.
• Assigning the first child to counterLabel keeps a reference to that label.
• Command.From(...) creates the command executed by the button. Since SkeleKit is MVVM first, ICommands wherever possible, you need to use this method for a local handler.
• Each click updates the real UIKit label underneath the SkeleKit control.

This code intentionally keeps the state in the page. Bindings and ViewModels come later.

Make a change

Now you can try to make a few small changes like changing Spacing from 4 to 16, rename the button Text or add another Label to the Children collection.

When Hot Reload is active, save the file while the app is running. Otherwise, rebuild and start the app again.

Continue with views and view trees, then MVVM and binding when you are ready to move the page state into a ViewModel.