Wednesday, March 13, 2019

UWP Tip #26 - Playing on the Uno Platform Playground

Have you heard of the Uno Platform project? Uno enables UWP developers to truly create universal C# applications with UWP XAML. Reuse your views, view models and supporting code across Windows 10, iOS, Android and the web (via WebAssembly).

Get started by visiting the Uno web site, read some how-to articles on their blog, and check out the source code on GitHub. Then download Visual Studio extension installer (.VSIX) from their latest GitHub release, and do a File-->New Project in Visual Studio.

But this is a post for next time. Today, we're going to take a look at how you can try Uno on any computer, regardless of what tools or extensions are installed. Let's try the Uno Platform Playground.

In any modern web browser, simply go to Here is the screen that will greet you.

You get a neat little editor in the browser complete with XAML Editor, another editor to create JSON sample data for your page's data context, and a live preview pane that creates the page via WebAssembly. The left side has what appears to be a toolbox, but is actually a series of links for viewing the sample/starter code for each control, along with a handful of more extensive samples. At the top, you can click run to render your page or keep AutoRun checked to get a live preview as you modify the XAML and data. The Save Snippet link in the upper-right corner will copy the XAML snippet to your clipboard.

Add a little XAML of your own and maybe a line of data in the JSON, and watch the live preview render the output with your updates.

I added a horizontal StackPanel containing a HyperlinkButton and two Button elements.

<StackPanel Orientation="Horizontal" Spacing="10">
    <HyperlinkButton Content="Windows Dev Center"
    <Button Content="Click Me"/>
    <Button Content="Click Me Too"/>

Let's have a look at the "Cards" sample.

This sample uses a ListView with a DataTemplate to create the look and feel of cards. The ListView's ItemsSource is set to the JSON in the Data Context editor. You can edit any of this and watch the preview pane reload with your changes. Remember to click Run if you have disabled AutoRun.

The Playground is a great place to play with the tools and copy some of your "play code" into a real live project in Visual Studio. Curious about how the Playground was built? That source code is also available. View it here.

Go play today, and leverage your UWP skills across every platform! Happy coding and #uwpeverywhere! Tags: ,,