This is probably stating the obvious but I’m a big advocate for rich client applications. With the recent advances in PWAs I’m looking down the barrel of having to concede to all those fellow developers that have jacked themselves up on as many JavaScript frameworks they can find and now charge through the roof because they’re one of only a handful who actually understand the difference between == and ===. I’m sure the time will come but for now, it may be that the Uno Platform can help me leverage my UWP skills in building apps for iOS, Android and the Web (via WebAssembly).
In my previous post I covered Getting Started with Platform Uno where I simply used the extension to create a new project and discussed running it on various platforms. One of the features of UWP that I really like is that ability to gracefully handle different screen sizes through the use of Visual States. So I figured I’d give states a go in my basic Uno app. Here’s the XAML (note there’s no code behind) for my MainPage:
<Page x_Class=”UnoGettingStarted.MainPage”
mc_Ignorable=”d”>
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x_Name=”SizeGroup”>
<VisualState x_Name=”Small”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”0″ />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target=”MainContent.Visibility”
Value=”Collapsed” />
</VisualState.Setters>
</VisualState>
<VisualState x_Name=”Large”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”1000″ />
</VisualState.StateTriggers>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<StackPanel VerticalAlignment=”Stretch”
x_Name=”MainContent”
HorizontalAlignment=”Stretch”>
<TextBlock Text=”Hello, world !”
Margin=”20″
FontSize=”30″ />
<Button Content=”Test”
Click=”TestClick” />
</StackPanel>
</Grid>
</Page>
This XAML shows two Visual States, “Small,” hides the MainContent StackPanel, and “Large” which has no setters, so is the default states of the page. I’ve added an AdaptiveTrigger to both states for clarity. The “Small” Visual State for window sizes from 0; The “Large” Visual State for window sizes over 1000.
Whilst this is a relatively simple example, when I build and run this, it not only works on UWP (expected) but also on Wasm. The image below shows the output – the red text has been added afterwards to indicate which Visual State the page is in.
Serious props to the Platform Uno team, this is awesome.