UWP – HOW TO DETECT THE RIGHT BUTTON

In this simple tutorial is explained how to detect if the right button is clicked.
For simplicity there are two different Button and and a TextBlock component. The first button is the right button and the second is the wrong.  The TextBlock component explain what is the bbutton that was clicked.

Let’s start to see .xaml script

<Page
x:Class=”UWP_tutorials.RightButton.RightButton”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
xmlns:local=”using:UWP_tutorials.RightButton”
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>
<Grid.RowDefinitions>
<RowDefinition Height=”0.3*”></RowDefinition>
<RowDefinition Height=”*”></RowDefinition>
<RowDefinition Height=”0.3*”></RowDefinition>
</Grid.RowDefinitions>

<TextBlock Grid.Row=”0″ Text=”CLICK THE RIGHT BUTTON” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”40″ FontWeight=”SemiBold” FontStyle=”Italic”></TextBlock>

<Grid Grid.Row=”1″ Background=”LightGreen”>
<Grid.RowDefinitions>
<RowDefinition Height=”*”></RowDefinition>
<RowDefinition Height=”*”></RowDefinition>
<RowDefinition Height=”*”></RowDefinition>
</Grid.RowDefinitions>

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

<Button Grid.Column=”0″ Grid.Row=”1″ Content=”CLICK ME” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”60″ Click=”Right”></Button>
<Button Grid.Column=”1″ Grid.Row=”1″ Content=”CLICK ME” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”60″ Click=”Wrong”></Button>
<TextBlock x:Name=”answer” Grid.Row=”2″ Grid.ColumnSpan=”2″ Text=”” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”40″ FontWeight=”SemiBold”></TextBlock>

</Grid>

<Button Grid.Row=”2″ Content=”Back” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”60″ Click=”Back”></Button>

</Grid>
</Page>

Analyze it!

  • <Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height=”0.3*”></RowDefinition>
    <RowDefinition Height=”*”></RowDefinition>
    <RowDefinition Height=”0.3*”></RowDefinition>
    </Grid.RowDefinitions>
    They divide the screen into three rows and the second is the highest.
  • <TextBlock Grid.Row=”0″ Text=”CLICK THE RIGHT BUTTON” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”40″ FontWeight=”SemiBold” FontStyle=”Italic”></TextBlock>
    It is the title.
  • <Grid Grid.Row=”1″ Background=”LightGreen”>
    <Grid.RowDefinitions>
    <RowDefinition Height=”*”></RowDefinition>
    <RowDefinition Height=”*”></RowDefinition>
    <RowDefinition Height=”*”></RowDefinition>
    </Grid.RowDefinitions><Grid.ColumnDefinitions>
    <ColumnDefinition Width=”*”></ColumnDefinition>
    <ColumnDefinition Width=”*”></ColumnDefinition>
    </Grid.ColumnDefinitions>
    Using these lines the secondo row, that is Grid.Row=”1″, is dived in three new rows and two columns.
  • <Button Grid.Column=”0″ Grid.Row=”1″ Content=”CLICK ME” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”60″ Click=”Right”></Button>
    <Button Grid.Column=”1″ Grid.Row=”1″ Content=”CLICK ME” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”60″ Click=”Wrong”></Button>
    These are two buttons that are respectively in the first and second column. When they are clicked are called two different functions that are ‘Right’ and ‘Wrong’.
    Grid.Row in this case represents the second row of the secondo row of the screen because it is encapsulated in a Grid Grid.Row=”1″ control.
  • <TextBlock x:Name=”answer” Grid.Row=”2″ Grid.ColumnSpan=”2″ Text=”” HorizontalAlignment=”Center” VerticalAlignment=”Center” FontSize=”40″ FontWeight=”SemiBold”></TextBlock>
    The TextBlock represents  what button is clicked. It has a specific tag that is ‘answer’. We can access to it using this tag.

All the layout is ready.
Now we have to link these components to the code-behind that is 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.RightButton
{
/// <summary>
/// Pagina vuota che può essere usata autonomamente oppure per l’esplorazione all’interno di un frame.
/// </summary>
public sealed partial class RightButton : Page
{
public RightButton()
{
this.InitializeComponent();
}

private void Back(object sender, RoutedEventArgs e)
{
this.Frame.Navigate(typeof(MainPage));
}

private void Right(object sender, RoutedEventArgs e)
{
answer.Text = “It’s the right button!”;
}

private void Wrong(object sender, RoutedEventArgs e)
{
answer.Text = “It’s the wrong button!”;
}
}
}

Analyze it.

  • private void Right(object sender, RoutedEventArgs e)
    {
    answer.Text = “It’s the right button!”;
    }
    When the right button is clicked we can change the text component of the TextBlock using its specific tag.

 

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 detect the right 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 *