Uno Quick Start

This repository is a basic sample for an Uno Platform application which cross-targets UWP, iOS, Android, Linux and WebAssembly.

You can clone this repository and open it in:

• Visual Studio 2019 or 2022 and use the WinUI tooling on Windows, such as Xaml Hot Reload, C# Hot Reload, then run your app on iOS, Android, Windows or WSL.
• Codespaces (WebAssembly) or Gitpod (WebAssembly / Linux+Skia) to get a fully configured environment ready to use

You can try out the WebAssembly Playground in your browser.

You can try developing this application right in your browser:

To create your own application, follow our getting start guides.

Develop on your machine

See the VS Code Getting started documentation for additional details about developing with Visual Studio on Windows.

Develop using Codespaces

WebAssembly

1. Install the suggested Uno Platform extension
2. Once the C# environment is setup, with the commmand palette use the command "Omnisharp: Select project" (or click on the project name in the status bar)
3. Select the MyApp.Wasm project
4. Using a terminal, navigate to the MyApp.Wasm folder
5. Type dotnet run
6. Once the compilation is done, a server will open on port 5000
7. In the Ports tab (next to the Terminal tab), right click to make both the port 5000 and the other dotnet opened port (with uno.ui.remotecontrol in the running process column) to "public".

   Failure to make both ports public will prevent the app from starting properly.

8. Codespaces will suggest to open a new browser window or as a preview window

See the section for examples below of changes to the application.

See the VS Code Getting started documentation for additional details about developing with VS Code.

Develop using Gitpod

How to develop for WebAssembly

1. Install the suggested Uno Platform extension
2. Once the C# environment is setup, with the commmand palette use the command "Omnisharp: Select project" (or click on the project name in the status bar)
3. Select the MyApp.Wasm project
4. Using a terminal, navigate to the MyApp.Wasm folder
5. Type dotnet run
6. Once the compilation is done, a server will open on port 5000
7. In the Ports activity (on the left), click to padlock on both the port 5000 and the other dotnet opened port (with a number over 30000) to make ports public.

   Failure to make both ports public will prevent the app from starting properly.

8. Gitpod will suggest to open a new browser window or as a preview window

See the section for examples below of changes to the application.

See the VS Code Getting started documentation for additional details about developing with VS Code.

How to develop for Linux (Skia.Gtk)

1. As Gitpod will suggest, open the port 6080 as a browser preview to get access to the X11 environment.
2. Once the C# environment is setup, with the commmand palette use the command "Omnisharp: Select project" (or click on the project name in the status bar)
3. Select the MyApp.Skia.Gtk project
4. To run your application, either:
   • Using a terminal, navigate to the MyApp.Skia.Gtk folder and type dotnet run
   • In the debug activity section on the left, select Skia.GTK (Debug) in drop down, the press F5 or Ctrl+F5 to start the application without the debugger.
5. Gitpod will suggest to open a new browser window or as a preview window

See the section for examples below of changes to the application.

See the VS Code Getting started documentation for additional details about developing with VS Code.

Making additional modifications

• Change some XAML content:
  • Open the src/MyApp.Shared/MainPage.xaml
  • Make some changes, such as Hello, world! to Hello, Uno!
  • No need to save, see that the application's text has changed !
• Change some C# code:
  • Stop the running application with Ctrl+C
  • Open the src/MyApp.Shared/MainPage.xaml
  • Replace the TextBlock definition with the following attribute:

    <StackPanel>
        <TextBlock x:Name="myTextBlock" Text="Hello, world!" Margin="20" FontSize="30" />
        <Button Content="Click me!" Click="{x:Bind OnClickMe}" />
    </StackPanel>

  • Save the file
  • Open the src/MyApp.Shared/MainPage.xaml.cs
  • Immediately after the MainPage constructor, add the following:

    public void OnClickMe()
    {
        myTextBlock.Text = DateTime.Now.ToString();
    }

  • Save the file
  • Start the application again with dotnet run
  • Refresh the Live Preview using the small refresh icon (not the full browser tab)
  • The time is showing !
  • Without stopping the application, in the src/MyApp.Shared/MainPage.xaml.cs, change the code to the following:

    public void OnClickMe()
    {
        myTextBlock.Text = "Hello Uno! " + DateTime.Now.ToString();
    }

  • Still without restarting the application, click the button again
  • The text is now changed thanks to C# Hot Reload!