Create a Single Page App with Uno Platform
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
Getting Started
Open Visual Studio and click on
Create new project
.Search for the
Uno
templates, select theUno Platform App
then clickNext
.Name your app then click
Next
.Choose a list of platforms, including WebAssembly and WinUI
In your
Shared
project, open upMainPage.xaml
Add a
StackPanel
around yourTextBlock
<Grid> <StackPanel> <TextBlock Text="Hello World" Margin="20" FontSize="30" /> </StackPanel> </Grid>
Add a
Slider
<Grid> <StackPanel> <TextBlock Text="Hello World" Margin="20" FontSize="30" /> <Slider x:Name="slider"/> </StackPanel> </Grid>
Bind the
Text
value of yourTextBlock
to the value of theSlider
<Grid> <StackPanel> <TextBlock Text="{Binding Value, ElementName=slider}" Margin="20" FontSize="30" /> <Slider x:Name="slider"/> </StackPanel> </Grid>
Select
Windows
as the Startup Project, select thex86
platform, thenRun
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!
Select
WASM
as the Startup Project andRun
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.