UWP – HOW TO COUNT CLICKS ON A BUTTON

In this simple tutorial is explained how to count the clicks on a button and show them.
First of all we have to set the layout of the screen with two columns with the same width.
We do this in the following way

<Grid.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>

The character * means the width of the screen. In this way there are two colomns that they have the same width.
Now we have to add two different controls. One is the button and the second is the textbox as the following image

We can set the controls in this way

<Button  Grid.Column=”0″ VerticalAlignment=”Center” HorizontalAlignment=”Center” Content=”CLICK HERE” FontSize=”45″ Click=”Click”></Button>
<TextBox x:Name=”counter”  Grid.Column=”1″ VerticalAlignment=”Center” HorizontalAlignment=”Center” Text=”0″ FontSize=”50″ TextAlignment=”Center”></TextBox>

Let’s analyze the different components.
Grid.Column means that the specific controls must be inserted in the specific column. Remember that the first column is the number 0.
VerticalAlignment represents the alignmet compared to the parent control. For example the button is positioned in the middle of the first colomn.
HorizontalAlignment is the same reasoning of the VerticalAlignment.
Content for the Button and Text for the TextBox represents the content of the controls.
-The topic of the Click is the function that is called when a button is clicked.
x:Name is a sort of label that represent and identify the control .

This is all the .xaml script.

<Page
x:Class=”UWP_tutorials.CountClick.CountClick”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:UWP_tutorials.CountClick”
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.ColumnDefinitions>
<ColumnDefinition Width=”*”/>
<ColumnDefinition Width=”*”/>
</Grid.ColumnDefinitions>

<Button  Grid.Column=”0″ VerticalAlignment=”Center” HorizontalAlignment=”Center” Content=”CLICK HERE” FontSize=”45″ Click=”Click”></Button>
<TextBox x:Name=”counter” Grid.Column=”1″ VerticalAlignment=”Center” HorizontalAlignment=”Center” Text=”0″ FontSize=”50″ TextAlignment=”Center”></TextBox>

</Grid>
</Page>

Let’s start to see .xaml.cs file. Only one function is required. It is the function that is called when the button is clicked. What we have to do is to increase a variable that represents the number of the click (so it’s an int variable) and a variable that represents the text of the control TextBox.
Start to declare them.

int click;
TextBox counterText;

In the Start function, that is the function that is called with the same name of the page (in my case CountClick) we have to set the variables.

click = 0;
counterText= this.FindName(“counter”) as TextBox;

With the second line we find the object that has the x:Name called “counter”

We need a function that is called Click and get two parameters.
private void Click(object sender, RoutedEventArgs e)
The first is the object that send the event that is the button.

private void Click(object sender, RoutedEventArgs e)
{
click++;
counterText.Text = click.ToString();
}

With the second line we can accedd to the component Text of the controls and set it with the number of clicks.

This is all the .xaml.cs script.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.InteropServices.WindowsRuntime;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

// Il modello di elemento Pagina vuota è documentato all’indirizzo https://go.microsoft.com/fwlink/?LinkId=234238

namespace UWP_tutorials.CountClick
{
/// <summary>
/// Pagina vuota che può essere usata autonomamente oppure per l’esplorazione all’interno di un frame.
/// </summary>
public sealed partial class CountClick : Page
{
int click;
TextBox counterText;

public CountClick()
{
this.InitializeComponent();
click = 0;
counterText= this.FindName(“counter”) as TextBox;
}

private void Click(object sender, RoutedEventArgs e)
{
click++;
counterText.Text = click.ToString();
}

}
}

If you run the application you can see how the script works and counts the number click.

 

YOU CAN DOWNLOAD THE EXAMPLE FROM HERE

The example is integrated in a solution that contains all the UWP tutorials. It is available from here


A simple tutorial about how to count click on a button.
For any problem and info contact me! I will reply as soon as possible.
cuomomario@hotmail.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *