none
wire event of a buttons inside a usercontrol RRS feed

  • Question

  • hi,

    i have a usercontrol with 3 buttons

    <UserControl x:Class="reuseOfControls.UserControl1"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                 mc:Ignorable="d">
        <Border BorderBrush="Red"
                BorderThickness="6">
            <StackPanel Orientation="Horizontal">
                <Button Content="Save"
                        Width="63"
                        x:Name="SaveButton" />
                <Button Content="Cancel"
                        Width="70"
                        x:Name="CancelButton" />
                <Button Content="Close"
                        Width="69"
                        x:Name="CloseButton" />
    
            </StackPanel>
        </Border>
    </UserControl>

    how can i wire an event for each button when i declare the control in XAML

    something like this :

     <local:UserControl1 Height="50"
                         OnSaveButton="con_1_SaveButton"
                         OnCancelButton="con_1_CancelButton"/>
     <local:UserControl1 Height="50" 
                         OnSaveButton="con_2_SaveButton"
                         OnCancelButton="con_2_CancelButton"/>

    i know that i need to define an event on my usercontrol ,

    public event ClickHandler OnSaveButton;

    public event ClickHandler OnCancelButton;

    but how do i wire those event to the buttons inside the usercontrol ?






    Monday, August 26, 2013 6:22 PM

Answers

  • You will need to use a Routed Event Handler or Routed Command Handler to do this.  Using commands is preferable, although there are some more complicated issues with that. 

    For a Routed Event Handler, you need to include an event in your XAML for your button:

    <Button Content="Save" Width="63" x:Name="SaveButton" Click="SaveButton_Click" />

    In your code-behind (this is why the command is better), you will need the following:

    private void SaveButton_Click(object sender, RoutedEventArgs e)
    {
        RaiseSaveEvent(sender);
    }
    
    private void RaiseSaveEvent(object sender)
    {
        RoutedEventArgs e = new RoutedEventArgs();
        e.RoutedEvent = SaveEvent;
        e.Source = sender;
        OnSave(e);
    }
    
    public static readonly RoutedEvent SaveEvent = EventManager.RegisterRoutedEvent("Save", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(UserControl1));
    
    public event RoutedEventHandler Save
    {
        add
        {
            AddHandler(SaveEvent, value);
        }
        remove
        {
            RemoveHandler(SaveEvent, value);
        }
    }
    
    protected virtual void OnSave(RoutedEventArgs e)
    {
        RaiseEvent(e);
    }

    Now you have an event in your UserControl called Save that can be set to events in your main page.  In your case, you would set it to the con_1_SaveButton event for your first instance of your UserControl1 and to the con_2_SaveButton event for the second instance. 

    <local:UserControl1 Height="50" x:Name="con_1" Save="con_1_SaveButton" />
    <local:UserControl1 Height="50" x:Name="con_2" Save="con_2_SaveButton" />

    Hope this helps!


    Christine A. Piffat

    • Marked as answer by Hani Safa Wednesday, August 28, 2013 5:58 PM
    Monday, August 26, 2013 8:53 PM

All replies

  • You will need to use a Routed Event Handler or Routed Command Handler to do this.  Using commands is preferable, although there are some more complicated issues with that. 

    For a Routed Event Handler, you need to include an event in your XAML for your button:

    <Button Content="Save" Width="63" x:Name="SaveButton" Click="SaveButton_Click" />

    In your code-behind (this is why the command is better), you will need the following:

    private void SaveButton_Click(object sender, RoutedEventArgs e)
    {
        RaiseSaveEvent(sender);
    }
    
    private void RaiseSaveEvent(object sender)
    {
        RoutedEventArgs e = new RoutedEventArgs();
        e.RoutedEvent = SaveEvent;
        e.Source = sender;
        OnSave(e);
    }
    
    public static readonly RoutedEvent SaveEvent = EventManager.RegisterRoutedEvent("Save", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(UserControl1));
    
    public event RoutedEventHandler Save
    {
        add
        {
            AddHandler(SaveEvent, value);
        }
        remove
        {
            RemoveHandler(SaveEvent, value);
        }
    }
    
    protected virtual void OnSave(RoutedEventArgs e)
    {
        RaiseEvent(e);
    }

    Now you have an event in your UserControl called Save that can be set to events in your main page.  In your case, you would set it to the con_1_SaveButton event for your first instance of your UserControl1 and to the con_2_SaveButton event for the second instance. 

    <local:UserControl1 Height="50" x:Name="con_1" Save="con_1_SaveButton" />
    <local:UserControl1 Height="50" x:Name="con_2" Save="con_2_SaveButton" />

    Hope this helps!


    Christine A. Piffat

    • Marked as answer by Hani Safa Wednesday, August 28, 2013 5:58 PM
    Monday, August 26, 2013 8:53 PM
  • thanks a lot .. worked just fine :)
    Wednesday, August 28, 2013 5:58 PM
  • thanks a lot for your help
    Monday, September 16, 2013 11:52 AM