How To Build A Windows 8 App

Build your outset WinUI 3 app (Part 1)

As office of the Windows App SDK , WinUI 3 provides a modernized UI framework for building Windows 10 and Windows 11. This 3-part blog aims to help members new to Windows development quickly build familiarity using the Window App SDK through a fun sample app.

This post is only function one of the 3-role Windows App SDK blog and is scoped to showing you how to use WinUI iii controls to create a unproblematic working user interface. Office 2 and three are for windowing and single instancing.

Sample app overview

Nosotros are going to build an app with buttons that produce drum sounds (DrumPad). Every bit simple equally this demo app is, it shows some cool things you lot tin exercise right abroad with the Windows App SDK (WinAppSDK):

Working with simple and easy-to-use UI controls from Windows UI Library (WinUI) iii
Customizing windowing options so that the user can multitask with the app always on top or have a full immersive experience
Making the app single-instanced to reduce synchronization bug betwixt instances

Prerequisites

Install tools for developing apps for Windows 10 and Windows 11 here .
Create a WinUI iii app using the Blank App, Packaged (WinUI iii in Desktop) template, and proper noun it DrumPad.

Project template structure

In the WinUI 3 project template, most of our code will live in MainWindow.xaml and MainWindow.xaml.cs

MainWindow.xaml is a XAML file where we volition ascertain all of our UI elements, called "controls", that will brand up the visual layer of our application.
MainWindow.xaml.cs is the C# code-behind file where we will put all the logic that lets u.s.a. collaborate with our application.

UI layout design

The following WinUI 3 controls are used to represent components of a drum pad:

DropDownButton : includes a chevron to indicate a menu can be opened
ToggleSwitch : a switch that tin be toggled between dark/light mode
Push : has a click user interaction and will trigger a unique drum sound
Grid: fabricated of rows and columns and is used to position the other controls

Deleting partial template code

The default project template comes with some blocks of code yous'll want to delete so nosotros can supersede them with our own markup and implementation:

MainWindow.xaml:

<!-- Delete the following template code -->  <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">     <Button 10:Proper noun="myButton" Click="myButton_Click">Click Me</Button> </StackPanel>

MainWindow.xaml.cs:

// Delete the post-obit template code  private void myButton_Click(object sender, RoutedEventArgs e) {     myButton.Content = "Clicked"; }

Defining the layout

In your MainWindow.xaml nosotros will showtime past defining the prepare of nested grids and specify their controls and positioning. Open MainWindow.xaml in the XML editor view and inside the element add this content:

<!-- Add Grid CODE -->  <Grid>     <Grid.RowDefinitions>         <RowDefinition Tiptop="Auto"/>         <RowDefinition Height="*"/>     </Grid.RowDefinitions>      <Grid Margin="12">         <Grid.ColumnDefinitions>             <ColumnDefinition Width="*" />             <ColumnDefinition Width="Motorcar" />         </Grid.ColumnDefinitions>         <!-- STEP 1: Add DropDownButton & ToggleSwitch Code -->     </Grid>          <Filigree x:Name="Control1" Grid.Row="1" ColumnSpacing="30" RowSpacing="12"           VerticalAlignment="Center" HorizontalAlignment="Heart">         <!-- Pace 3: Define column & row positioning -->         <!-- STEP 4: Add Styling for BUTTON -->         <!-- Footstep 2: Add Push CODE -->     </Filigree> </Grid>

Note : Machine and * are used to specify the summit and width above to create a responsive layout. The controls held within the Grids are not fixed in size and tin adjust to make full in spaces equally the user resizes the app window.

Setting upwards remaining controls

STEP 1: Add together DropDownButton & ToggleSwitch:

<DropDownButton Content="Display" Grid.Cavalcade="0" VerticalAlignment="Eye" HorizontalAlignment="Left" Width="118" >     <DropDownButton.Flyout>         <MenuFlyout Placement="Lesser">             <MenuFlyoutItem Text="Default"/>             <MenuFlyoutItem Text="Compact Overlay"/>             <MenuFlyoutItem Text="Fullscreen"/>         </MenuFlyout>     </DropDownButton.Flyout> </DropDownButton>  <ToggleSwitch AutomationProperties.Proper name="simple ToggleSwitch" ten:Proper noun="dark_switch" Filigree.Cavalcade="1" CornerRadius="3" VerticalAlignment="Center"  HorizontalAlignment="Right" MinWidth="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />

Footstep 2: Add together Buttons:

<Push button Background="#FF0000" Grid.Row="0" Grid.Column="0" Content="Kick ane"/> <Button Background="#C4425A" Grid.Row="0" Grid.Cavalcade="1" Content="Kick 2"/> <Push button Background="#D41DD8" Grid.Row="0" Filigree.Cavalcade="2" Content="Kick 3"/> <Push Background="#6A21A3" Filigree.Row="0" Grid.Column="3" Content="Kick 4"/>  <Button Background="#C4425A" Grid.Row="1" Grid.Cavalcade="0" Content="Clap ane"/> <Button Background="#D41DD8" Grid.Row="i" Grid.Column="i" Content="Clap 2"/> <Push Background="#6A21A3" Filigree.Row="1" Grid.Column="2" Content="Clap 3"/> <Button Background="#473DB8" Grid.Row="ane" Grid.Column="3" Content="Clap 4"/>  <Button Background="#D41DD8" Grid.Row="2" Grid.Column="0" Content="Open Hat one"/> <Button Background="#6A21A3" Filigree.Row="2" Grid.Cavalcade="1" Content="Open up Hat 2"/> <Button Background="#473DB8" Grid.Row="ii" Filigree.Column="2" Content="Open up Hat 3"/> <Button Background="#26AAC7" Grid.Row="2" Grid.Column="3" Content="Open Chapeau 4"/>  <Button Background="#6A21A3" Grid.Row="3" Grid.Column="0" Content="Snare ane"/> <Button Groundwork="#473DB8" Grid.Row="3" Grid.Column="one" Content="Snare 2"/> <Button Groundwork="#26AAC7" Grid.Row="iii" Grid.Column="2" Content="Snare iii"/> <Push button Groundwork="#1A7BD6" Grid.Row="three" Grid.Cavalcade="3" Content="Snare 4"/>

Step three: Specify how the Grid should position these Buttons:

<Grid.ColumnDefinitions>     <ColumnDefinition Width="*" />     <ColumnDefinition Width="*" />     <ColumnDefinition Width="*" />     <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions>  <Grid.RowDefinitions>     <RowDefinition Pinnacle="*" />     <RowDefinition Height="*" />     <RowDefinition Height="*" />     <RowDefinition Height="*" /> </Grid.RowDefinitions>

Pace 4: Utilise standardized styling to all the Buttons:

Effect

Equally uncomplicated as that, we should have a working visual layer built out using WinUI 3 controls. Choose x64 as your target platform, so press F5 to run the project solution. You should encounter: