UI mockup

Pomotimer/App.xaml

@@ -3,5 +3,8 @@
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:local="using:Pomotimer">
+    <Application.Resources>
+        <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />
+    </Application.Resources>
 
 </Application>

Pomotimer/MainPage.xaml

@@ -2,13 +2,89 @@
     x:Class="Pomotimer.MainPage"
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-    xmlns:local="using:Pomotimer"
+    xmlns:controls="using:Microsoft.UI.Xaml.Controls"
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:Pomotimer"
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-    mc:Ignorable="d"
-    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
+    mc:Ignorable="d">
 
     <Grid>
-
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="*" />
+        </Grid.RowDefinitions>
+        <Grid Grid.Row="0" Grid.Column="0">
+            <RichTextBlock HorizontalAlignment="Center" VerticalAlignment="Center">
+                <Paragraph>
+                    <Run FontSize="60" FontWeight="Bold">
+                        40
+                    </Run>
+                    <Run FontSize="30" FontWeight="SemiBold">
+                        :00
+                    </Run>
+                </Paragraph>
+            </RichTextBlock>
+        </Grid>
+        <Grid Grid.Row="0" Grid.Column="1">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="*" />
+                    <RowDefinition Height="*" />
+                </Grid.RowDefinitions>
+                <Grid.ColumnDefinitions>
+                    <ColumnDefinition Width="*" />
+                </Grid.ColumnDefinitions>
+                <controls:NumberBox
+                    x:Name="WorkMinutesInput"
+                    Grid.Row="0"
+                    Grid.Column="0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Header="Work time:"
+                    LargeChange="10"
+                    Minimum="0"
+                    SmallChange="5"
+                    SpinButtonPlacementMode="Inline"
+                    Value="40" />
+                <controls:NumberBox
+                    x:Name="RestMinutesInput"
+                    Grid.Row="1"
+                    Grid.Column="0"
+                    HorizontalAlignment="Center"
+                    VerticalAlignment="Center"
+                    Header="Rest time:"
+                    LargeChange="5"
+                    Minimum="0"
+                    SmallChange="1"
+                    SpinButtonPlacementMode="Inline"
+                    Value="5" />
+            </Grid>
+        </Grid>
     </Grid>
+    <Page.BottomAppBar>
+        <CommandBar
+            Background="Transparent"
+            DefaultLabelPosition="Right"
+            IsOpen="True">
+            <AppBarButton
+                Icon="Play"
+                Label="Start"
+                Visibility="Visible" />
+            <AppBarButton
+                Icon="Pause"
+                Label="Pause"
+                Visibility="Collapsed" />
+            <AppBarButton
+                Icon="Redo"
+                Label="Reset"
+                Visibility="Collapsed" />
+            <AppBarButton Icon="Add" Label="+1min" />
+            <AppBarButton Icon="Add" Label="+5min" />
+            <AppBarButton Icon="Add" Label="+10min" />
+        </CommandBar>
+    </Page.BottomAppBar>
 </Page>

Pomotimer/MainPage.xaml.cs

@@ -5,6 +5,7 @@ using System.Linq;
 using System.Runtime.InteropServices.WindowsRuntime;
 using Windows.Foundation;
 using Windows.Foundation.Collections;
+using Windows.UI.ViewManagement;
 using Windows.UI.Xaml;
 using Windows.UI.Xaml.Controls;
 using Windows.UI.Xaml.Controls.Primitives;
@@ -13,6 +14,7 @@ using Windows.UI.Xaml.Input;
 using Windows.UI.Xaml.Media;
 using Windows.UI.Xaml.Navigation;
 
+
 // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=402352&clcid=0x409
 
 namespace Pomotimer
@@ -25,6 +27,12 @@ namespace Pomotimer
         public MainPage()
         {
             this.InitializeComponent();
+
+            Size defaultSize = new Size(500, 250);
+
+            ApplicationView.PreferredLaunchViewSize = defaultSize;
+            ApplicationView.GetForCurrentView().SetPreferredMinSize(defaultSize);
+            ApplicationView.PreferredLaunchWindowingMode = ApplicationViewWindowingMode.PreferredLaunchViewSize;
         }
     }
 }

Pomotimer/Pomotimer.csproj

@@ -153,6 +153,9 @@
     <PackageReference Include="Microsoft.NETCore.UniversalWindowsPlatform">
       <Version>6.2.9</Version>
     </PackageReference>
+    <PackageReference Include="Microsoft.UI.Xaml">
+      <Version>2.3.200213001</Version>
+    </PackageReference>
   </ItemGroup>
   <PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
     <VisualStudioVersion>14.0</VisualStudioVersion>