Launch Visual Studio and create a new WPF Application named GenericEventHandler.

In Window1.xaml, we are going to add a StackPanel containing a few Button elements. Replace the Grid element with the following markup:

        <StackPanel>
            <Button Content="Red" Foreground="Red"/>
            <Button Content="Green" Foreground="Green" />
            <Button Content="Blue" Foreground="Blue" />
        </StackPanel>

Begin to add an attribute to the StackPanel named ButtonBase.Click. IntelliSense will again intervene, and you can accept its defaults. The final attribute should look like this:

ButtonBase.Click="StackPanel_Click"

It will also inject the event handler into the code-behind:

private void StackPanel_Click(object sender, RoutedEventArgs e)
{
}

StackPanel does not have its own Click event. However, we can use an attached event to reference the events raised by its child elements. Attached events work very much like attached properties. They take the form of Type.EventName, where Type is the name of the class that owns the event.

You might be surprised to see ButtonBase.Click instead of Button.Click. IntelliSense chooses ButtonBase for us because it is the control that Button derives from, and Button itself does not implement any events. Actually, you can use either of the two interchangeably here, and the application will behave the same.

Let’s add a place to provide the user with some feedback when we click one of our buttons. Add the following TextBlock under the last Button in the StackPanel:

        <TextBlock x:Name="Output"
                   HorizontalAlignment="Center"
                   Text="What color will you choose?" />

Modify the handler StackPanel_Click to look like this:

        private void StackPanel_Click(object sender, RoutedEventArgs e)
        {
            Button button = (Button) e.Source;
            Output.Text = string.Format(
                          "You chose the color {0}!",
                          button.Content);
            Output.Background = button.Foreground;
        }

Run the application and click the various buttons. We can respond to all the events from the Button elements in a single handler that is attached to their container.

Open the TextEditor project that we began in Hour 8.

Open MainWindow.xaml and locate the UserControl we named toolbar, and then modify the markup so that it matches the following:

        <local:TextEditorToolbar x:Name="toolbar"
                                 DockPanel.Dock="Top"
                                 ComboBox.SelectionChanged="TextEditorToolbar_SelectionChanged" />

Notice that IntelliSense did not help us out here. IntelliSense doesn’t know anything about the internal composition of the UserControl.

We are attaching an event handler to the UserControl itself that will handle all the SelectionChanged events raised by any ComboBox element that it contains. Currently, we only have two, but it’s important to realize that any ComboBox elements added in the future will be picked up by this handler.

Open the code-behind for MainWindow.xaml, and let’s begin to implement the handler we just referenced:

        private void TextEditorToolbar_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ComboBox source = e.OriginalSource as ComboBox;
            if (source == null) return;

            switch (source.Name)
            {
                case "fonts":
                    //change the font face
                    break;
                case "fontSize":
                    //change the font size
                    break;
            }

            body.Focus();
        }

ComboBox.SelectionChanged is a routed event, and thus SelectionChangedEventArgs is a descendant of RoutedEventArgs. We can use the OriginalSource property to get a reference to the ComboBox that raises the event from inside the UserControl.

Because we are handling events raised by multiple elements, we need to identify which element we are dealing with. We use a switch statement based on the Name of the ComboBox. If you examine the XAML of the UserControl, you’ll see that we named our ComboBox elements fonts and fontSize.

Changing the font family and the font size involves formatting the contents of the RichTextBox, and that should be the responsibility of the DocumentManager class, so we’ve temporarily added some place holder comments in the event handler that we’ll fill in after we extend DocumentManager.

On the last line of the method, body.Focus() returns the focus to the RichTextBox from the ComboBox we selected.

Open DocumentManager.cs in the editor. The class encapsulates a RichTextBox, which in turn exposes a property called Selection. This property represents the currently selected text in the RichTextBox. Selection is of type TextSelection, and it has a method, ApplyPropertyValue. This method accepts a dependency property and a value for setting the property. We can use this method to format the currently selected text. Add the following method to DocumentManager:

        public void ApplyToSelection(DependencyProperty property, object value)
        {
            if (value != null)
                _textBox.Selection.ApplyPropertyValue(property, value);
        }

Now we can flesh out the implementation of TextEditorToolbar_SelectionChanged:

        private void TextEditorToolbar_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            ComboBox source = e.OriginalSource as ComboBox;
            if (source == null) return;

            switch (source.Name)
            {
                case "fonts":
                    _documentManager.ApplyToSelection(TextBlock. FontFamilyProperty, source.SelectedItem);
                    break;
                case "fontSize":
                    _documentManager.ApplyToSelection(TextBlock. FontSizeProperty, source.SelectedItem);
                    break;
            }

            body.Focus();
        }

All we are really doing is delegating the work to the DocumentManager class.

Run the application, enter some text, and try to change the font family and size.

We know that we want to update the toolbar when the user changes the selected text in the RichTextBox. We can use the SelectionChanged event to do this. In MainWindow.xaml, modify the RichTextBox so that it matches the following markup:

<RichTextBox x:Name="body"
             SelectionChanged="body_SelectionChanged"
             SpellCheck.IsEnabled="True"
             AcceptsReturn="True"
             AcceptsTab="True"
             BorderThickness="0 2 0 0"/>

We’re not sure yet what we should do in the event handler. We’ll start with the minimal implementation for body_SelectionChanged in the code-behind for MainWindow.xaml.

        private void body_SelectionChanged(object sender, RoutedEventArgs e)
        {
            //update the tool bar
        }

The completed markup for MainWindow.xaml is shown in Listing 9.1.

<Window x:Class="TextEditor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TextEditor"
        Title="Text Editor"
        Height="600"
        Width="800">
    <DockPanel>
        <local:TextEditorMenu x:Name="menu"
                              DockPanel.Dock="Top" />

        <local:TextEditorToolbar x:Name="toolbar"
                                 DockPanel.Dock="Top"
                                 ComboBox.SelectionChanged="TextEditorToolbar_SelectionChanged" />

        <StatusBar DockPanel.Dock="Bottom">
            <TextBlock x:Name="status" />
        </StatusBar>

        <RichTextBox x:Name="body"
                     SelectionChanged="body_SelectionChanged"
                     SpellCheck.IsEnabled="True"
                     AcceptsReturn="True"
                     AcceptsTab="True"
                     BorderThickness="0 2 0 0"/>
    </DockPanel>
</Window>

Let’s think about this for a minute. We’d like to synchronize a lot of items on the toolbar with the selected text. We’ve already identified font size and font family, but there are also toggles for bold, underline, and italic.

All the controls are embedded in the UserControl we named toolbar. We can’t access them directly, so we need to add a method to the UserControl to help us out.

Tackling all five of the formatting options is too much to think about at once, so we’ll begin with synchronizing just the font size.

Open the code-behind for TextEditorToolbar.xaml, and we’ll add a method called SynchronizeWith that we will pass a TextSelection instance into. We’ll call this method to synchronize the toolbar with the currently selected text.

        public void SynchronizeWith(TextSelection selection)
        {
            object size = selection.GetPropertyValue(TextBlock.FontSizeProperty);
            if (size != DependencyProperty.UnsetValue)
            {
                fontSize.SelectedValue = (double)size;
            }
        }

First, we get the font size from the TextSelection argument. We need to call the GetPropertyValue method on selection. This is because we’re dealing with a dependency property that’s owned by TextBlock. After we get the value, we check to make sure that the dependency property has a valid value. Finally, we set the SelectedValue on the ComboBox named fontSize.

Run the application now, enter some text, and then change the font size using the ComboBox. Try setting a few different sizes on various places in the text. Click around the different sized text and you will notice that the value in the ComboBox is updated to reflect the selected text. Also note that the ComboBox displays nothing for text that has not been explicitly sized.

Now let’s do the same thing for the bold toggle button. The “boldness” of the font is referred to as the font’s weight. We happen to have another dependency property, FontWeightProperty, available to us. We can add the following code to the SynchronizeWith method:

object weight = selection.GetPropertyValue (TextBlock.FontWeightProperty);
if (weight != DependencyProperty.UnsetValue)
{
   boldButton.IsChecked = ((FontWeight)weight == FontWeights.Bold);
}

The code for the font’s weight is very similar to the code for the font’s size. If you suspect that the other three properties will be similar, you are correct. This is a good candidate for refactoring, both to simplify our code and to make it more readable. You can use the following abstraction for all the properties. Add this method to TextEditorToolbar:

private void Synchronize<T>(TextSelection selection, DependencyProperty property, Action<T> methodToCall)
{
     object value = selection.GetPropertyValue(property);
     if (value != DependencyProperty.UnsetValue) methodToCall((T)value);
}

This may be a bit confusing, so let’s go over it carefully. The Synchronize method is generic. When we call it, we need to specify a type that corresponds to the type of the dependency property. We provide the TextSelection to examine, the dependency property we are interested in, and a delegate that’s responsible for synchronizing the control on the toolbar.

delegate void Action<T>(T obj);

With this new approach, we’ll need methods to pass as the delegates. Following are the two methods we’ll use for the font size and font weight. Go ahead and add them to the code-behind for TextEditorToolbar.xaml:

        private void SetFontSize(double size)
        {
            fontSize.SelectedValue = size;
        }

        private void SetFontWeight(FontWeight weight)
        {
            boldButton.IsChecked = weight == FontWeights.Bold;
        }

Now let’s bring these new methods together in our refactored event handler:

        public void SynchronizeWith(TextSelection selection)
        {
            Synchronize<double>(selection, TextBlock.FontSizeProperty, SetFontSize);
            Synchronize<FontWeight>(selection, TextBlock. FontWeightProperty, SetFontWeight);
        }

Something that is not immediately obvious is that we have introduced a sort of feedback loop between the controls on the toolbar and the RichTextBox. The handler for SelectionChanged on RichTextBox changes the values of the controls on the toolbar; in turn, these controls change the formatting on the text box. It’s not really a loop, inasmuch as the controls on the toolbar do not raise the SelectionChanged event. Nevertheless, you’ll find the format unexpectedly changing.

We can compensate for this by adding a Boolean to the UserControl indicating whether we are in the process of synchronizing the toolbar. Add the following property using the new automatic property syntax:

        public bool IsSynchronizing {get;private set;}

Now we can modify the handler to set the value of this property:

        public void SynchronizeWith(TextSelection selection)
        {
            IsSynchronizing = true;

            Synchronize<double>(selection, TextBlock.FontSizeProperty, SetFontSize);
            Synchronize<FontWeight>(selection, TextBlock. FontWeightProperty, SetFontWeight);

            IsSynchronizing = false;
        }

The complete code, including the remaining three properties, is shown in Listing 9.2.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Documents;
using System;

namespace TextEditor
{
    /// <summary>
    /// Interaction logic for TextEditorToolbar.xaml
    /// </summary>
    public partial class TextEditorToolbar : UserControl
    {
        public TextEditorToolbar()
        {
            InitializeComponent();
        }

        public bool IsSynchronizing { get; private set; }

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {
            for (double i = 8; i < 48; i += 2)
            {
                fontSize.Items.Add(i);
            }
        }

        public void SynchronizeWith(TextSelection selection)
        {
            IsSynchronizing = true;

            Synchronize<double>(selection, TextBlock.FontSizeProperty, SetFontSize);
            Synchronize<FontWeight>(selection, TextBlock.FontWeightProperty, SetFontWeight);
            Synchronize<FontStyle>(selection, TextBlock.FontStyleProperty, SetFontStyle);
            Synchronize<TextDecorationCollection>(selection, TextBlock.TextDecorationsProperty, SetTextDecoration);
            Synchronize<FontFamily>(selection, TextBlock.FontFamilyProperty, SetFontFamily);

            IsSynchronizing = false;
        }

        private static void Synchronize<T>(TextSelection selection, DependencyProperty property, Action<T> methodToCall)
        {
            object value = selection.GetPropertyValue(property);
            if (value != DependencyProperty.UnsetValue) methodToCall((T)value);
        }
        private void SetFontSize(double size)
        {
            fontSize.SelectedValue = size;
        }

        private void SetFontWeight(FontWeight weight)
        {
            boldButton.IsChecked = weight == FontWeights.Bold;
        }

        private void SetFontStyle(FontStyle style)
        {
            italicButton.IsChecked = style == FontStyles.Italic;
        }

        private void SetTextDecoration(TextDecorationCollection decoration)
        {
            underlineButton.IsChecked = decoration == TextDecorations.Underline;
        }

        private void SetFontFamily(FontFamily family)
        {
            fonts.SelectedItem = family;
        }
    }
}

We need to open the code-behind for the MainWindow.xaml and modify the event handler TextEditorToolbar_SelectionChanged to check for the IsSynchronizing property. Here’s the modified handler:

        private void TextEditorToolbar_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (toolbar.IsSynchronizing) return;

            ComboBox source = e.OriginalSource as ComboBox;
            if (source == null) return;

            switch (source.Name)
            {
                case "fonts":
                    _documentManager.ApplyToSelection(TextBlock. FontFamilyProperty, source.SelectedItem);
                    break;
                case "fontSize":
                    _documentManager.ApplyToSelection(TextBlock. FontSizeProperty, source.SelectedItem);
                    break;
            }

            body.Focus();
        }

The complete code-behind for MainWindow.xaml is shown in Listing 9.3.

Run the application. At this point, you need to use Ctrl+B, Ctrl+U, and Ctrl+I to modify the formatting of the text. These keyboard gestures are built in to the RichTextBox.

using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;

namespace TextEditor
{
    public partial class MainWindow : Window
    {
        private DocumentManager _documentManager;

        public MainWindow()
        {
            InitializeComponent();
            _documentManager = new DocumentManager(body);
        }

        private void TextEditorToolbar_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            if (toolbar.IsSynchronizing) return;

            ComboBox source = e.OriginalSource as ComboBox;
            if (source == null) return;

            switch (source.Name)
            {
                case "fonts":
                    _documentManager.ApplyToSelection(TextBlock. FontFamilyProperty, source.SelectedItem);
                    break;
                case "fontSize":
                    _documentManager.ApplyToSelection(TextBlock. FontSizeProperty, source.SelectedItem);
                    break;
            }

            body.Focus();
        }

        private void body_SelectionChanged(object sender, RoutedEventArgs e)
        {
            toolbar.SynchronizeWith(body.Selection);
        }
    }
}

Create a new project called PreviewEvents.

Open Window1.xaml and enter the markup from Listing 9.4. Notice that we wire the KeyDown and PreviewKeyDown events for every element to a single handler.

<Window x:Class="PreviewEvents.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        KeyDown="Handler"
        PreviewKeyDown="Handler"
        Title="Window1" Height="300" Width="300">
    <DockPanel KeyDown="Handler"
               PreviewKeyDown="Handler">
        <ListBox x:Name="Output"
                 DockPanel.Dock="Left"
                 Margin="0 0 10 0"
                 KeyDown="Handler"
                 PreviewKeyDown="Handler"/>
        <Grid KeyDown="Handler"
              PreviewKeyDown="Handler">
            <StackPanel KeyDown="Handler"
                        PreviewKeyDown="Handler">
                <Button KeyDown="Handler"
                        PreviewKeyDown="Handler"
                        Content="My Button"/>
                <TextBox KeyDown="Handler"
                         PreviewKeyDown="Handler"
                         Text="My TextBox"/>
            </StackPanel>
        </Grid>
    </DockPanel>
</Window>

Now we implement the handler. The entire code-behind is in Listing 9.5. This handler logs the events by adding items to the ListBox. Preview events are prefixed with “v” to indicate that they are tunneling down; the KeyDown events are prefixed with “^” to indicate that they are bubbling up.

We then check to see if sender is the original source of the event. If so, we are at the bottom. That is the point where the event stops tunneling and begins to bubble. This is actually a hack and it won’t work for the ListBox, but it’s good enough for this demonstration.

Finally, we check to see if sender is the root element. If it is, we are at the end of the event’s route.

using System.Windows.Input;

namespace PreviewEvents
{
    public partial class Window1
    {
        public Window1()
        {
            InitializeComponent();
        }

        private void Handler(object sender, KeyEventArgs e)
        {
            bool isPreview = e.RoutedEvent.Name.StartsWith("Preview");
            string direction = isPreview ? "v" : "^";

            Output.Items.Add(string.Format("{0} {1}",
                                           direction,
                                           sender.GetType().Name));

            if (sender == e.OriginalSource && isPreview)
                Output.Items.Add("-{bounce}-");

            if (sender == this && !isPreview)
                Output.Items.Add(" -end- ");
        }
    }
}

Run the application. Click various elements and then press a key. This should help you gain an understanding of how the events are routed in WPF.