Intersoft ClientUI Documentation
Walkthrough: Handle Routed Events using EventManager
Intersoft ClientUI 8 > ClientUI Fundamentals > Routed Events Overview > Walkthrough: Handle Routed Events using EventManager

This walkthrough shows you how to handle routed events in your application.

In this walkthrough, you perform the following tasks:

Prerequisites

You need the following components to complete this walkthrough:

Creating a new ClientUI Application Project

The first step is to create a new ClientUI Application project using Intersoft ClientUI Application project template in Visual Studio.

To create the ClientUI MVVM Application project

  1. Start Visual Studio 2010.
  2. Create a new ClientUI MVVM Application project using Intersoft ClientUI Application project template. To learn more, see Walkthrough: Create New Intersoft ClientUI Application Template.

Creating the View

This section steps you through the process of creating a page that uses a variety of ClientUI controls such as UXTextBox, UXPasswordBox, UXComboBox, UXComboBoxItem, UXCheckBox and UXButton.

To create the View

  1. Open MainPage.xaml.
  2. Add the ContentControl, Reset all properties of ContentControl. Set the HorizontalContentAlignment and VerticalContentAlignment properties of ContentControl into Stretch.
  3. Add the Border inside the ContentControl. Reset all properties of Border except set the Width property to 500 and Height property to 300.
  4. Add the StackPanel inside the Border. Reset all properties of the StackPanel.
  5. Add the TextBlock inside the StackPanel. Set the following properties of TextBlock as below.
    Properties Value
    Text Signup Form
    FontSize 16
    FontWeight Bold
  6. Add the UXSeparator.
    XAML
    Copy Code 
    <Grid x:Name="LayoutRoot">
    <ContentControl Name="contentControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
        <Border BorderBrush="Silver" BorderThickness="1" Name="border1" Width="500" Height="300">
            <StackPanel Name="stackPanel1">
                <TextBlock Height="23" Name="textBlock1" Text="Signup Form" FontSize="16" FontWeight="Bold" />
                <Intersoft:UXSeparator Name="uXSeparator1" />
            </StackPanel>
        </Border>
    </ContentControl>
</Grid>

  7. Add the FieldLabel. Set the Header property into Choose a user name and HeaderWidth property of FieldLabel to 200.
    Reset the value of Text property and set the Width property of UXTextBox to 150.
  8. Add another FieldLabel. Set each Header property to Real name, Email address and Password.
    Replace the last UXTextBox with UXPasswordBox inside the FieldLabel. Set the Width property of UXPasswordBox to 150.
    XAML
    Copy Code 
    <StackPanel Name="stackPanel1">
    ...
    <Intersoft:FieldLabel Header="Choose a user name" Name="fieldLabel1" HeaderWidth="200">
        <Intersoft:UXTextBox Width="150" />
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel Header="Real name" Name="fieldLabel2" HeaderWidth="200">
        <Intersoft:UXTextBox Width="150" />
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel Header="Email address" Name="fieldLabel3" HeaderWidth="200">
        <Intersoft:UXTextBox Width="150" />
    </Intersoft:FieldLabel>
    <Intersoft:FieldLabel Header="Password" Name="fieldLabel4" HeaderWidth="200">
        <Intersoft:UXPasswordBox Name="uXPasswordBox1" Width="150" />
    </Intersoft:FieldLabel>
</StackPanel>

  9. Add another FieldLabel. Set the Header property to How did you hear about us.
    Replace the UXTextBox with UXComboBox inside the FieldLabel. Set the Width property of UXComboBox to 150.
    XAML
    Copy Code 
    <StackPanel Name="stackPanel1">
    ...
    <Intersoft:FieldLabel Header="How did you hear about us" Name="fieldLabel5" HeaderWidth="200">
        <Intersoft:UXComboBox Name="uXComboBox1" Width="150" />
    </Intersoft:FieldLabel>
</StackPanel>
  10. Add three UXComboBoxItem inside the UXComboBox. Set the Content property of each UXComboBoxItem to Search Engine, Website and From Friends.
    XAML
    Copy Code 
    <Intersoft:UXComboBox Name="uXComboBox1" Width="150">
    <Intersoft:UXComboBoxItem Content="Search Engine"/>
    <Intersoft:UXComboBoxItem Content="Website"/>
    <Intersoft:UXComboBoxItem Content="From Friends"/>
</Intersoft:UXComboBox>

  11. Add the FieldLabel. Reset the Header property of FieldLabel.
    Replace the UXTextBox with UXCheckBox inside the FieldLabel. Set the Content property of UXCheckBox to I agree to terms and conditions.
    XAML
    Copy Code 
    <StackPanel Name="stackPanel1">
    ...
    <Intersoft:FieldLabel Name="fieldLabel6" HeaderWidth="200">
        <Intersoft:UXCheckBox Content="I agree to terms and conditions" Name="uXCheckBox1" />
    </Intersoft:FieldLabel>
</StackPanel>

  12. Add the FieldLabel. Reset the Header property of FieldLabel.
    Replace the UXTextBox with UXButton inside the FieldLabel. Set the Content property of UXButton to Sign me up.
    XAML
    Copy Code 
    <StackPanel Name="stackPanel1">
    ...
    <Intersoft:FieldLabel Name="fieldLabel7" HeaderWidth="200">
        <Intersoft:UXButton Content="Sign me up" Name="uXButton1" />
    </Intersoft:FieldLabel>
</StackPanel>

  13. Add the StackPanel inside the first StackPanel. Reset All Layout properties and set the Orientation property of the StackPanel to Horizontal.
  14. Add the two TextBlock inside the StackPanel. Set each Text property of TextBlock to Current Event: and Idle.
    XAML
    Copy Code 
    <ContentControl Name="contentControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
    <Border BorderBrush="Silver" BorderThickness="1" Name="border1" Width="500" Height="300">
        <StackPanel Name="stackPanel1">
            ...
            <StackPanel Name="stackPanel2" Orientation="Horizontal">
                <TextBlock Height="23" Name="textBlock2" Text="Current Event:" />
                <TextBlock Height="23" Name="textBlock3" Text="Idle" />
            </StackPanel>
        </StackPanel>
    </Border>
</ContentControl>

Creating the RoutedEvent handler

This section steps you through the process of creating the handler for each RoutedEvent such as KeyUp event for UXTextBox, SelectionChanged event for UXComboBox and CheckedStateChanged event for UXCheckBox.

When triggered, all those events will call the SetEventStatus to display the which event is currently being triggered.

To create the RoutedEvent handler

  1. Open the MainPage.xaml.cs.
  2. Create SetEventStatus method and copy the following code.
    C#
    Copy Code 
    private void SetEventStatus(string status)
{
    textBlock3.Text = status;

    // reset status in 1s
    Utility.ExecuteTimeOut(1,
        () =>
        {
            textBlock3.Text = "Idle";
        });
}
  3. Create a new static constructor to register the class handler for KeyUpEvent, SelectionChangedEvent and CheckedStateChangedEvent.
    C#
    Copy Code 
    static MainPage()
{
    // register class-level routed event handler
    // this enables the event of all instances with the same type to be handled at once
    EventManager.RegisterClassHandler(typeof(MainPage), Keyboard.KeyUpEvent, new KeyEventHandler(OnKeyUp), true);
    EventManager.RegisterClassHandler(typeof(MainPage), UXComboBox.SelectionChangedEvent, new Intersoft.Client.Framework.SelectionChangedEventHandler(OnSelectionChanged));
    EventManager.RegisterClassHandler(typeof(MainPage), UXCheckBox.CheckedStateChangedEvent, new ISRoutedEventHandler(OnIsCheckedChanged));
}
  4. Handle the KeyUpEvent at OnKeyUp method.
    C#
    Copy Code 
    private static void OnKeyUp(object sender, KeyEventArgs e)
{
    if (e.OriginalSource is ISButton || e.OriginalSource is ISTextBox || e.OriginalSource is ISSelectionControl)
    {
        MainPage page = sender as MainPage;

        if (!e.Handled && KeyStroke.IsCharacter(e.Key) || KeyStroke.IsNumeric(e.Key))
        {
            page.SetEventStatus("Typing...");
            e.Handled = true;
        }
    }
}
  5. Handle the SelectionChangedEvent at OnSelectionChanged method.
    C#
    Copy Code 
    private static void OnSelectionChanged(object sender, Intersoft.Client.Framework.SelectionChangedEventArgs e)
{
    MainPage page = sender as MainPage;
    page.SetEventStatus("ComboBox selection changed...");

    e.Handled = true;
}
  6. Handle the CheckedStateChangedEvent at OnIsCheckedChanged method.
    C#
    Copy Code 
    private static void OnIsCheckedChanged(object sender, ISRoutedEventArgs e)
{
    MainPage page = sender as MainPage;
    page.SetEventStatus("CheckBox check state changed...");

    e.Handled = true;
}
  7. Run the project. You will see that the current event is idle.

    When you type, you will see the status become Typing...

    When you select the UXComboBox, the status become ComboBox selection changed...

    When you select the UXCheckBox, the status become Check box state changed...

Conclusion

In this walkthrough, you have learned how to create ClientUI project using project template. You also learned how to create delegates that handle the routed events for various UI Controls such as UXTextBox, UXPasswordBox, UXComboBox, UXComboBoxItem, UXCheckBox.

For more information about routed events and its concepts, see Routed Events Overview.

Complete Code Listing

This section lists the complete code used in this walkthrough.


MainPage.xaml

XAML
Copy Code 
<Intersoft:UXPage 
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:Intersoft="http://intersoft.clientui.com/schemas"
        x:Class="RoutedEvents.MainPage" 
        Title="MainPage Page"
        d:DesignWidth="640" d:DesignHeight="480">

    <Grid x:Name="LayoutRoot">
        <ContentControl Name="contentControl1" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
            <Border BorderBrush="Silver" BorderThickness="1" Name="border1" Width="500" Height="300">
                <StackPanel Name="stackPanel1">
                    <TextBlock Height="23" Name="textBlock1" Text="Signup Form" FontSize="16" FontWeight="Bold" />
                    <Intersoft:UXSeparator Name="uXSeparator1" />
                    <Intersoft:FieldLabel Header="Choose a user name" Name="fieldLabel1" HeaderWidth="200">
                        <Intersoft:UXTextBox Width="150" />
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Real name" Name="fieldLabel2" HeaderWidth="200">
                        <Intersoft:UXTextBox Width="150" />
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Email address" Name="fieldLabel3" HeaderWidth="200">
                        <Intersoft:UXTextBox Width="150" />
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="Password" Name="fieldLabel4" HeaderWidth="200">
                        <Intersoft:UXPasswordBox Name="uXPasswordBox1" Width="150" />
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Header="How did you hear about us" Name="fieldLabel5" HeaderWidth="200">
                        <Intersoft:UXComboBox Name="uXComboBox1" Width="150">
                            <Intersoft:UXComboBoxItem Content="Search Engine"/>
                            <Intersoft:UXComboBoxItem Content="Website"/>
                            <Intersoft:UXComboBoxItem Content="From Friends"/>
                        </Intersoft:UXComboBox>
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Name="fieldLabel6" HeaderWidth="200">
                        <Intersoft:UXCheckBox Content="I agree to terms and conditions" Name="uXCheckBox1" />
                    </Intersoft:FieldLabel>
                    <Intersoft:FieldLabel Name="fieldLabel7" HeaderWidth="200">
                        <Intersoft:UXButton Content="Sign me up" Name="uXButton1" />
                    </Intersoft:FieldLabel>
                    <StackPanel Name="stackPanel2" Orientation="Horizontal">
                        <TextBlock Height="23" Name="textBlock2" Text="Current Event:" />
                        <TextBlock Height="23" Name="textBlock3" Text="Idle" />
                    </StackPanel>
                </StackPanel>
            </Border>
        </ContentControl>
    </Grid>
</Intersoft:UXPage>

MainPage.xaml.cs

C#
Copy Code 
using System.Windows;
using Intersoft.Client.Framework;
using Intersoft.Client.Framework.Input;
using Intersoft.Client.UI.Navigation;
using Intersoft.Client.UI.Aqua.UXCollection;
using Intersoft.Client.UI.Aqua;

namespace RoutedEvents
{
    public partial class MainPage : UXPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        static MainPage()
        {
            // register class-level routed event handler
            // this enables the event of all instances with the same type to be handled at once
            EventManager.RegisterClassHandler(typeof(MainPage), Keyboard.KeyUpEvent, new KeyEventHandler(OnKeyUp), true);
            EventManager.RegisterClassHandler(typeof(MainPage), UXComboBox.SelectionChangedEvent, new Intersoft.Client.Framework.SelectionChangedEventHandler(OnSelectionChanged));
            EventManager.RegisterClassHandler(typeof(MainPage), UXCheckBox.CheckedStateChangedEvent, new ISRoutedEventHandler(OnIsCheckedChanged));
        }

        private static void OnSelectionChanged(object sender, Intersoft.Client.Framework.SelectionChangedEventArgs e)
        {
            MainPage page = sender as MainPage;
            page.SetEventStatus("ComboBox selection changed...");

            e.Handled = true;
        }

        private static void OnIsCheckedChanged(object sender, ISRoutedEventArgs e)
        {
            MainPage page = sender as MainPage;
            page.SetEventStatus("CheckBox check state changed...");

            e.Handled = true;
        }

        private static void OnKeyUp(object sender, KeyEventArgs e)
        {
            if (e.OriginalSource is ISButton || e.OriginalSource is ISTextBox || e.OriginalSource is ISSelectionControl)
            {
                MainPage page = sender as MainPage;

                if (!e.Handled && KeyStroke.IsCharacter(e.Key) || KeyStroke.IsNumeric(e.Key))
                {
                    page.SetEventStatus("Typing...");
                    e.Handled = true;
                }
            }
        }

        private void SetEventStatus(string status)
        {
            textBlock3.Text = status;

            // reset status in 1s
            Utility.ExecuteTimeOut(1,
                () =>
                {
                    textBlock3.Text = "Idle";
                });
        }
        // Executes when the user navigates to this page.
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {

        }
    }
}
See Also
UXTextBox Class
UXButton Class

Concepts

Routed Events Overview

Other Resources

Locating the Samples in Local Installation
Walkthroughs and How-to Topics