How to subscribe to UserControl events

Question

Hello, I want to place a button which handles print requests on my page's bottom application bar. The application bar itself is a usercontrol.  Clicking the button should raise an event which can be handled in the visible page's code behind.  The print contract is in the MainPage's (and on other printable pages) code behind. 

This is what I have so far:

Mainpage XAML:

<Page.BottomAppBar>
        <AppBar>
            <Controls:BottomAppBar />
        </AppBar>
    </Page.BottomAppBar>

UserContral "BottomAppBar" Code behind:

public event EventHandler PrintButtonClicked;
private void Button_tapped(object sender, TappedRoutedEventArgs e)
        {
            Button button = sender as Button;
            switch (button.Name)
            {
              
              case "PrintButton": if (PrintButtonClicked != null)
                    {
                        PrintButtonClicked(this, EventArgs.Empty);
                    }
                    break;
            }
        }

How do I subscribe to the usercontol's PrintButtonClicked event in my MainPage code behind?

Answer 1

Here is how your control's XAML should look like

<UserControl
    x:Class="MsdnSample15072014.MyBottomAppBar"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MsdnSample15072014"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="150">
    <Grid>
        <Button Content="Print" x:Name="printContent"/>
    </Grid>
</UserControl>

Here is its code behind

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

namespace MsdnSample15072014
{
    public sealed partial class MyBottomAppBar : UserControl
    {
        public MyBottomAppBar()
        {
            this.InitializeComponent();
        }

        public event RoutedEventHandler PrintClick
        {
            add
            {
                printContent.Click += value;
            }
            remove
            {
                printContent.Click -= value;
            }
        }
    }
}

Now to use it in a Page, here is XAML

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    </Grid>
    <Page.BottomAppBar>
        <AppBar>
            <control:MyBottomAppBar PrintClick="printThePageContent" />
        </AppBar>
    </Page.BottomAppBar>
</Page>

And here is the code behind

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

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

        private void printThePageContent(object sender, RoutedEventArgs e)
        {
            //Do what you want
        }
    }
}

---

-- Vishal Kaushik --

Please 'Mark as Answer' if my post answers your question and 'Vote as Helpful' if it helps you. Happy Coding!!!

My Samples

My Codeplex Project

Answer 2

Thanks.  It works exactly as I wanted.