Create a Single Page App with Uno Platform

Download the complete sample

Note

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.

Before you start the tutorial

If you haven't prepared your dev environment for Uno Platform app development yet, the Setting up the Environment page will guide you through installing all the prerequisites.

Getting Started

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

   

2. Search for the Uno templates, select the Uno Platform App then click Next.

   

3. Name your app then click Next.

4. In the project Wizard:

   1. Choose the Blank template, then Customize
   2. In Framework, choose .NET 7.0
   3. In Platforms, choose your own list including WebAssembly and Windows
   4. In Presentation, choose the MVVM Presentation
   5. In Extensions, choose the Frame navigation and Console logging

5. After a few seconds, a banner may appear at the top of the editor asking to reload projects. Click Reload projects.

   

6. In your MyApp Class Library project, open up MainPage.xaml

7. On the top left corner of the XAML editor, make sure to select MyApp (net7.0-windows.10.0.XXX) in the dropdown

8. Replace the inner content of the Page with the following

   <Grid>
       <StackPanel>
           <TextBlock Text="Hello Uno Platform" Margin="20" FontSize="30" />
       </StackPanel>
   </Grid>
   

9. Add a Slider

   <Grid>
       <StackPanel>
           <TextBlock Text="Hello World" Margin="20" FontSize="30" />
           <Slider x:Name="slider"/>
       </StackPanel>
   </Grid>
   

10. Bind the Text value of your TextBlock to the value of the Slider

    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Value, ElementName=slider}" Margin="20" FontSize="30" />
            <Slider x:Name="slider"/>
        </StackPanel>
    </Grid>
    

11. Select MyApp.Windows 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.

    

    Result!
    

12. Select MyApp.Wasm as the Startup Project and Run

    

    Result!
    

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.

Next:

Got questions? Want to learn more? Looking for production-ready examples? Check out the next tutorial page. We will walk you through a BugTracker sample and build out a full Uno Platform app.