UWP Development, Outputting Numbers on Repeated Buttons in the Body

In today’s software development environment, the intuitive experience for users is increasingly emphasized. In particular, UWP (Universal Windows Platform) focuses on providing a consistent user experience across various devices. In this course, we will cover how to implement a feature that ‘displays a number on repeated buttons’ while developing UWP applications.

Objectives

Through this course, users will implement the following features:

  • A function that increments a number every time the user clicks a button
  • How to dynamically create UI elements to manage multiple buttons and the displayed numbers
  • How to structure UWP applications using XAML and C#

Setting Up the Development Environment

Before starting UWP application development, the following development environment must be set up:

  • Windows 10 or later
  • Visual Studio 2019 or later
  • Installation of Visual Studio components that support UWP development

Creating a Project

Open Visual Studio and follow the steps to create a new UWP project:

  1. Select ‘New’ from the ‘File’ menu and click on ‘Project’.
  2. Choose ‘Blank App’ and then select the UWP app template.
  3. Set the project’s name and storage location, then click the ‘Create’ button.

Structuring the XAML Layout

Now, let’s modify the XAML file to set up a space to display buttons and numbers. Open the MainPage.xaml file and change it as follows:

<Page
    x:Class="YourAppNamespace.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YourAppNamespace"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel x:Name="ButtonContainer">
            <TextBlock x:Name="CounterText" FontSize="30" Text="Number: 0" />
        </StackPanel>
    </Grid>
</Page>

In the above code, we used StackPanel to stack the buttons and numbers. We also used the TextBlock element to display the current number.

Writing C# Code

After modifying the XAML file, we will write C# code to implement the button click events and number increment logic. Open the MainPage.xaml.cs file and add the code below:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;

namespace YourAppNamespace
{
    public sealed partial class MainPage : Page
    {
        private int buttonCount = 0;

        public MainPage()
        {
            this.InitializeComponent();
            SetupButtons();
        }

        private void SetupButtons()
        {
            for (int i = 0; i < 5; i++)
            {
                Button btn = new Button();
                btn.Content = $"Button {i + 1}";
                btn.Width = 200;
                btn.Click += Button_Click;
                ButtonContainer.Children.Add(btn);
            }
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            buttonCount++;
            CounterText.Text = $"Number: {buttonCount}";
        }
    }
}

In the code above, we:

  • Called the SetupButtons method in the constructor to dynamically create the buttons.
  • Connected a click event to each button so that when the user presses a button, the Button_Click method is triggered.
  • Incremented the buttonCount variable on button clicks and updated the TextBlock text to display the current value.

Checking the Results

Now, build and run the project to check the results. When the app runs, the created buttons will be displayed on the screen. You will see the number increasing every time you click a button. Through this process, we learned some important concepts of UWP:

  • Dynamic UI structure
  • Event handling
  • Data binding and updating

Additional Practice Problems

Now that the basic implementation is complete, consider the following additional practice problems to deepen your understanding:

  • Modify the functionality to allow the user to input the total number of buttons to create that many buttons.
  • Add a button to decrease the number and a reset button to create various states.
  • Research how to add animation effects on button clicks to provide visual feedback to users.

Conclusion

This course covered how to implement repeated buttons that display numbers using UWP development. We learned how to handle events and create dynamic UI through basic XAML layout structure and C# code writing. UWP is a great platform for creating applications that can be used across various devices, providing users with a better experience.

Now you have the foundational knowledge necessary to develop various apps using UWP. If you wish to implement more advanced features, consider learning about the diverse APIs and patterns of UWP.

In the next course, we will cover other advanced features and best practices of UWP, so please stay tuned.

Thank you.