Today I start learning UWP named Universal Windows Platform and this is the subject of this short intro tutorial.
In the past, I used the old Windows Forms and the new Universal Windows Platform (UWP) has a very similar operation to build the forms.
About the Windows Presentation Foundation (WPF) is a UI framework that creates desktop client applications that supports a broad set of application development features, including an application model, resources, controls, graphics, layout, data binding, documents, and security.
Both Windows Forms and WPF are old, and Microsoft is pointing developers towards its Universal Windows Platform (UWP) instead.
Windows Forms (.NET) is the framework for Windows desktop applications that were introduced at the same time as .NET itself in 2002.
Windows Presentation Foundation is a GUI framework for .NET and was introduced with .NET Framework 3.0 in 2006, part of the Vista wave of technology.
The new one is the Universal Windows Platform (UWP) and provides a common type system, APIs, and application model for all devices that run Windows 10.
There are also other options for the desktop, such as Power Apps, Xamarin Forms if you still want to use .NET or Electron but these options is not the subject of this tutorial.
Let’s start with a good tutorial created by Microsoft, see this webpage, where you can find a video tutorial pretty similar to this tutorial.
If you using the Visual Studio 2019 then you need to use these steps:
Create a new project – Windows TempateStudio (Universal Windows) and use the Next button.
The next window wizard dialog will let you set all settings for your project, like Project name, Location – on disk, and Solution name – the name of the application.
Press the button Create and the Visual Studio I.D.E. will open.
Click on MainPage.xaml and you’ll see open in the left area with the design of the Universal Windows Platform (UWP) window form.
You can add buttons and graphics elements from Toolbox, like an old-style Windows Form.
This file has a new structured format like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <Page x:Class="UWP_test_001.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:UWP_test_001" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <Grid> <Button x:Name="SayHelloButton" Content="Button" Margin="60,166,0,0" VerticalAlignment="Top" Click="SayHelloButton_Click"/> <TextBox x:Name="textBox1" HorizontalAlignment="Left" Margin="60,45,0,0" Text="Hello there!" TextWrapping="Wrap" VerticalAlignment="Top" Width="360" Height="80" FontSize="36" TextAlignment="Center" BorderThickness="1,1,8,6"/> </Grid> </Page> |
The access to each element can be done using the Properties area from the right where you can find all of these properties.
The file named MainPage.xaml.cs will link the C# source code from this form design.
For example, if you add a button to the form and you want to use the click option, then into Properties area click on the lightning icon and you can edit all events.
Search the Click area and use double-click on the edit box.
You will see the edit box is filled with this text: Button_Click and into the MainPage.xaml.cs is added a new source code:
1 2 3 4 | private void Button_Click(object sender, RoutedEventArgs e) { } |
Now you can add source code to link the click event Button.
I used the video tutorial from Microsoft and I make my changes to get the color value.
I added a new edit box and I named textBox2.
With a simple conversion, I was able to get the HEX value for each color.
Let’s see the source code:
1 2 3 4 5 6 7 8 9 10 11 | private void SayHelloButton_Click(object sender, RoutedEventArgs e) { byte[] rgb = GetRandomBytes(3); var new_color = Color.FromArgb(255, rgb[0], rgb[1], rgb[2]); // Create a solid brush using the three random number var randomColorBrush = new SolidColorBrush(new_color); // Set boot the text color and the text box border to the ... textBox1.BorderBrush = randomColorBrush; textBox1.Foreground = randomColorBrush; textBox2.Text = new_color.ToString(); } |
The result is this:
Very simple to use it.