UWP Development, Event Handlers and Code Behind

UWP (Universal Windows Platform) is an application platform designed to operate on a variety of Windows devices. UWP applications provide various functions necessary for creating user interfaces (UI), handling events, and structuring business logic. In this article, we will detail event handlers and code behind, which are key components of UWP development. Additionally, we will guide you with example code for immediate application in practice.

1. UWP Application Structure

UWP applications consist of the following main components:

  • XAML: A markup language that defines the user interface.
  • C# or VB.NET: Programming languages used to define the application’s business logic.
  • Code Behind Files: C# or VB.NET files that connect the UI elements defined in XAML with event handlers.

2. What is an Event Handler?

An event handler is a method that executes when a specific event occurs. In UWP, event handlers are used to handle interactions such as a user clicking a button or selecting an item from a list. This helps maintain the connection between the UI and business logic.

2.1 Types of Events

UWP provides various types of events. Common events include:

  • Click: Occurs when a button is clicked.
  • TextChanged: Occurs when the text in a text box changes.
  • SelectionChanged: Occurs when the selection in a ComboBox or ListBox changes.
  • Loaded: Occurs when a page is loaded.

3. What is Code Behind?

Code behind refers to C# or VB.NET files associated with XAML files that define UI elements and their behavior. For instance, the actions to perform when a button is clicked are defined in the code behind. Code behind exists as files with the same name as the XAML file but with .cs or .vb extensions.

3.1 Creating Code Behind

When you create a new UWP project in Visual Studio, a code behind file is automatically generated along with the default XAML file. Users can write event handler methods in this file to control the behavior of UI elements.

4. Example: Handling Button Click Events

In this section, we will look at an example of how to handle button click events in a basic UWP application.

4.1 Writing the XAML File

The following XAML code defines a simple UI containing a button and a text block:

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

    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
            <Button x:Name="MyButton" Content="Click Me" Click="MyButton_Click"/>
            <TextBlock x:Name="MyTextBlock" Text="Hello, World!" Margin="0,20,0,0" FontSize="24"/>
        </StackPanel>
    </Grid>
</Page>

4.2 Writing Code Behind

To handle the button click event above, the code behind file is written as follows:

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

namespace MyUwpApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void MyButton_Click(object sender, RoutedEventArgs e)
        {
            MyTextBlock.Text = "Button Clicked!";
        }
    }
}

5. Rules for Events

When creating event handlers, it is recommended to follow these rules:

  • Give event handler names meaningful descriptions. For example: MyButton_Click.
  • Event handlers should always be defined with private access modifiers.
  • Event handlers perform event handling and UI update tasks.

6. Handling Complex Events

Event handlers can implement more complex logic. For instance, you can implement actions when a user selects an item from a ComboBox, or dynamically change UI elements based on input text.

6.1 Handling SelectionChanged Event of ComboBox

<ComboBox x:Name="MyComboBox" SelectionChanged="MyComboBox_SelectionChanged">
    <ComboBoxItem Content="Option 1"/>
    <ComboBoxItem Content="Option 2"/>
    <ComboBoxItem Content="Option 3"/>
</ComboBox>

Code behind:

private void MyComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ComboBox comboBox = sender as ComboBox;
    if (comboBox != null && comboBox.SelectedItem != null)
    {
        ComboBoxItem selectedItem = (ComboBoxItem)comboBox.SelectedItem;
        MyTextBlock.Text = $"You selected: {selectedItem.Content}";
    }
}

7. Data Binding and Events

In UWP, the MVVM (Model-View-ViewModel) pattern can be utilized to separate UI and business logic through data binding. In this case, event handling is managed in the view model, while the UI is automatically updated according to data binding.

7.1 Creating a ViewModel

using System.ComponentModel;

public class MyViewModel : INotifyPropertyChanged
{
    private string _text;

    public string Text
    {
        get { return _text; }
        set
        {
            if (_text != value)
            {
                _text = value;
                OnPropertyChanged(nameof(Text));
            }
        }
    }

    public void OnButtonClick()
    {
        Text = "Button Clicked from ViewModel!";
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

7.2 Setting Up Binding

ViewModel can be bound in XAML as follows:

<Page.DataContext>
    <local:MyViewModel />
</Page.DataContext>

Set the button Click event to be called from the ViewModel:

<Button Content="Click Me" Click="OnButtonClick"/>

8. Conclusion

In this article, we explored the importance of event handlers and code behind in UWP application development. Event handlers link the user interface to business logic, and code behind defines UI behavior. This flow is essential for building robust UWP applications. We hope this has been helpful in your development journey.

This example lays the foundation for UWP application development and prepares you to extend into more complex applications. Through continuous practice and application, we encourage you to develop your own amazing applications.