Published Date : 2020年10月11日10:02

Uno Platform入門
Let's start Uno Platform

This blog has an English translation

YouTubeにアップした動画、「【日本語解説】Uno Platform入門【Uno Platform】」の補足説明の記事です。

Here's a little more about the 「【Uno Platform】Let's start Uno Platform」 video I uploaded to YouTube.


I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.


There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.


Table of Contents

① 動画の説明
① Video Description

C#とXAMLでAndroid、WebAssembly、iOS、Windows 10のアプリを

Try the Uno Platform, which enables cross-platform development of

クロスプラットフォーム開発できるUno Platformを使ってみよう!

Android, WebAssembly, iOS, and Windows 10 apps in C# and XAML!

まずはVisual Studio Installerを起動して、必要な環境を整えましょう。

Start the Visual Studio Installer and set up the necessary environment.


Check the workload you need for development and install it.


After installing [ASP.NET and Web Development], [Mobile Development with .NET]


and [Universal Windows Platform Development], start Visual Studio.

Uno Platformを試す前に、環境が正しく整っているかを確認していきます。

Before you try out the Uno Platform, make sure your environment is in place.

新しいプロジェクトの作成の画面で、[ASP.NET Core Web アプリケーション]を選択します。

On the Create New Project screen, select [ASP.NET Core Web Application].

[.NET Core]とそのヴァージョンを指定して、[Webアプリケーション]を選択します。

Specify [.NET Core] and its version, then select [Web Application].

Visual Studioが立ち上がったら、特に何もしないで、そのまま[プレイボタン]を押します。

When Visual Studio starts up, just press [play button] without doing anything.


When the browser is up and [Welcom] is displayed, it is OK.

続いてXamarinを確認します。Visual Studioを閉じて、また新しいプロジェクトを作成します。

Then check Xamarin. Close Visual Studio and create a new project.

[モバイルアプリ Xamarin.Forms]を選択します。

Select [Mobile App Xamarin.Forms].


Select [Blank] and check the items you want to develop.


If developer mode is not turned on, the window will start automatically, so turn developer mode on.


If you want to manually turn on developer mode, go from [Start menu] to [Settings] to [Updates and Security] to [For Developers].

[Android SDK ライセンスの同意]の画面が表示されるので、同意ボタンを押します。

When the [Android SDK Preview License] screen appears, press the consent button.


Right-click [App Name.Android] in [Solution Explorer] and select [Set to Startup Project].

[Android Emulator]と表示されている[プレイボタン]を押すと、[既定のAndroidデバイスを作成する]という画面が立ち上がるので、

When you press [Play button] which is displayed as [Android emulator], the [Create a default Android device] screen is displayed,

デフォルトか、お好きな[Android Emulator]をインストールします。

So select the [Default Android Emulator] displayed or [Android Emulator] of your choice to install.

すると、インストールした[Android Emulator]の名前が[プレイボタン]に表示されているので、その[プレイボタン]を押します。

Then, the name of the installed [Android Emulator] is displayed in [play button], so press [play button].

Android Emulatorが立ち上がり、[Welcom to Xamarin.Forms!]が表示されていれば成功です。

If the Android Emulator is up and [Welcom to Xamarin.Forms!] is displayed, it's a success.

全ての環境が整ったのを確認したので、Uno Platformを確認します。Visual Studioを閉じて、また新しいプロジェクトを作成します。

Now that we have confirmed that everything is ready, we will check the Uno Platform. Close Visual Studio and create a new project.


Select [Manage Extensions] from the [Extensions] menu above.

[オンライン]を選択、[検索ウィンドウ]に[Uno]と入力、そして表示されている[Uno Platform Solution Templates]をダウンロードします。

Select [Online], enter [Uno] for [Search window], and download the displayed [Uno Platform Solution Templates].

Visual Studioを閉じて、また新しいプロジェクトを作成します。

Close Visual Studio and create a new project again.

新しいプロジェクトの作成の画面で、[Cross-Platform App Uno Platform]を選択します。

On the Create New Project screen, select [Cross-Platform App Uno Platform].

再度[Android SDK ライセンスの同意]の画面が表示されることがあるので、同意ボタンを押します。

The [Android SDK Preview License] screen may appear again, so press the consent button.


When the project starts up, Android is set to [startup project] by default, so press [play button].

android emulatorの画面にデフォルトの[Hello World!]が表示されれば成功です。

If the default [Hello World!] appears on the screen of Android emulator, it is successful.


[App Name.Shared] contains platform common code.


Basically, if you change XAML and C# here, the apps on all platforms will be optimized.


Try running your app on WASM or UWP.


Let's start the XAML Designer and change the layout visually.


Select UWP from the drop-down menu provided to close and reopen the file.


Let's change the text on the XAML designer. You can see that the XAML itself under the XAML Designer has also changed.


Now let's create a button that displays a pop-up window when clicked.


<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <TextBlock x:Name="textBlockHelloUno" Text="こんにちは。ウーノ!" Margin="20" FontSize="30" />
    <Button x:Name="buttonAlert" Content="クリックしてね!" Click="AlertFunc" FontSize="30" Margin="20"/>


In [MainPage.xaml.cs], write the code for the processing when the button is pressed.

using System;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace App
    public sealed partial class MainPage : Page
        public MainPage()

        private async void AlertFunc(object sender, RoutedEventArgs e)
            var dialog = new MessageDialog("こんにちは。ウーノ!");
            await dialog.ShowAsync();


Check out the changes in UWP, Android, and more.


That's all. Thank you for your hard work.