Create a Single Page App with Uno Platform

Download the complete sample
-- Estimated time to complete: 10 minutes --

In this tutorial you will learn how to:

  • Add the Uno Platform Project Templates to Visual Studio
  • Create a new Project with Uno Platform
  • Use the ElementName property for element-to-element binding

The tutorial walks you through creating a small multi-platform application with Uno Platform – a small app containing only a simple horizontal slider control.
Also, you will learn how to run your applications on all platforms supported by Uno Platform.

Getting Started

  1. Open Visual Studio and click on Create new project.

  2. Search for the Uno templates, select the Cross-Platform App (Uno Platform) then click Next.

  3. Name your app then click Next.

  4. In your Shared project, open up MainPage.xaml

  5. Add a StackPanel around your TextBlock

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="Hello World" Margin="20" FontSize="30" />
        </StackPanel>
    </Grid>
    
  6. Add a Slider

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="Hello World" Margin="20" FontSize="30" />
            <Slider x:Name="slider"/>
        </StackPanel>
    </Grid>
    
  7. Bind the Text value of your TextBlock to the value of the Slider

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <TextBlock Text="{Binding Value, ElementName=slider}" Margin="20" FontSize="30" />
            <Slider x:Name="slider"/>
        </StackPanel>
    </Grid>
    
  8. Select UWP as the Startup Project, select the x86 platform, then Run
    Note: To change the startup project from the Solution Explorer, right-click the desired project and choose "Set as StartUp Project" from the context-sensitive menu that is displayed. You can also choose this menu item from the Project menu.

    build-uwp

    Result!
    uwp-slider-demo

  9. Select WASM as the Startup Project and Run

    build-wasm

    Result!
    wasm-slider-demo

Congratulations, you’ve just built your first multi-platform application with Uno Platform! Feel free to select some other platform heads as your Startup Project and run them – just make sure you have all prerequisites installed to run on all other platforms.