How can I raise a custom Routed Event from a DataTemplate?

Question

I have a User Control,called dCB_Props that contains several objects, most importantly a ComboBox that's bound to an Observable Collection. Though the collection can take any object, it will normally take a UserControl called EditDeleteItem . I've set dCB_Props to use EditDeleteItem as an ItemsTemplate but the events aren't fired. If, on the other hand, I add an instance of EditDeleteItem then the events will get fired. I can't add items this way because the EditDeleteItem will host other controls and I'd need to use different DataTemplates.

EditDeleteItem has two Routed Events called EditClick and DeleteClick .

When the collection changes it fires an event that checks if the item added is of type EditDeleteItem . If so, then it adds handlers to the two aforementioned events.

Part of the xaml for EditDeleteClick:

<WrapPanel x:Name="wp" HorizontalAlignment="Right" Visibility="Hidden" VerticalAlignment="Center" Margin="0,0,5,0">
    <Button x:Name="PART_Edit" Width="20" Height="20" Content="{DynamicResource dPen}" Style="{DynamicResource dTranspButton}" Click="btnEdit_Click"/> 
    <Button x:Name="PART_Delete" Width="20" Height="20" Content="{DynamicResource dCross}" Style="{DynamicResource dTranspButton}" Click="btnDelete_Click"/> 
</WrapPanel>
<Label Content="{TemplateBinding Content}"  Margin="2,0,45,0" Padding="0,0,0,0" HorizontalAlignment="Left" VerticalContentAlignment="Center"/>

Part of the xaml for dCB_Props:

<ComboBox HorizontalContentAlignment="Stretch" x:Name="PART_cb" Background="Transparent" Margin="0,0,0.367,0" d:LayoutOverrides="HorizontalAlignment" ItemsSource="{Binding Items, ElementName=dcb}" IsDropDownOpen="{Binding IsDropDownOpen,ElementName=dcb, Mode=TwoWay}" Grid.ColumnSpan="3" Style="{DynamicResource DaisyComboBox}" />
<Button x:Name="PART_Edit" Width="20" Height="20" Content="{DynamicResource dPen}" Visibility="Hidden" Style="{DynamicResource dTranspButton}" Margin="2.581,1.48,17.778,-1.48" Grid.Column="1" Click="btnEdit_Click"/>
<Button x:Name="PART_Delete" Width="20" Height="20" Content="{DynamicResource dCross}" Visibility="Hidden" Margin="22.602,1.48,-2.243,-1.48" Style="{DynamicResource dTranspButton}" Grid.Column="1" Click="btnDelete_Click"/>
<Button x:Name="PART_Add" Content="+" Grid.Column="3" Margin="0,0,0,0" Style="{DynamicResource dTranspButton}" Click="btnAdd_Click"/>

Note the above two are codes just for objects, I've left out Column Definitions, Event Triggers, etc.

Part of dCB_Props.xaml.cs code is:

public partial class dCB_Props : UserControl
{
    public dCB_Props()
    {
        this.InitializeComponent();
        Items= new ObservableCollection<object>();
        Items.CollectionChanged += new System.Collections.Specialized.NotifyCollectionChangedEventHandler(Items_CollectionChanged);
    }

    void Items_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
    {
        if (e.Action == System.Collections.Specialized.NotifyCollectionChangedAction.Add)
        {
            foreach (var o in e.NewItems)
            {
                if (o.GetType() == typeof(EditDeleteItem))
                {
                    EditDeleteItem itm = (EditDeleteItem)o;
                    itm.EditClick += new RoutedEventHandler(ItemEdit_Click);
                    itm.DeleteClick += new RoutedEventHandler(ItemDelete_Click);
                }
            }
        }
    }
  ...//I've left some code here since I don't deem it's that important for the situation
    private void ItemEdit_Click(object sender, RoutedEventArgs e)
    {
        DependencyObject d = GetTemplateChild("PART_cb");
        if (d == null) return;
        ComboBox cb = (ComboBox)d;
        if (cb.SelectedItem != null) RaiseEvent(new RoutedEventArgs(EditClickEvent, e.OriginalSource));
    }
}

The above works if I add an item of type EditDeleteItem and remove the ItemTemplate property for the Label that resides inside dCB_Props . It also works if I set the ItemTemplate, shown below, in EditDeleteItem 's ContentTemplate. But, as mentioned, I need to use different Data Templates so I assume all Data Templates will have to reside in a Resource Dictionary and then I'd have to use a Template Selector.

Data Template:

<DataTemplate x:Shared="false" x:Key="TagTemplate">
        <local:EditDeleteItem x:Name="edItem">
            <local:EditDeleteItem.Content>
                <StackPanel>
                    <TextBlock Text="{Binding Path=Content.Label}"/>
                    <CheckBox Content="Isolated" IsChecked="{Binding Content.IsIsolated}"/>
                    <CheckBox Content="Match Case" IsChecked="{Binding Content.MatchCase}"/>
                    <CheckBox Content="Include" IsChecked="{Binding Content.Include}"/>
                </StackPanel>
            </local:EditDeleteItem.Content>
        </local:EditDeleteItem>
</DataTemplate> 

I believe I need to use command bindings. But not really sure where to put the CommandBindings, and not so sure how to use them, though I've read a page or two.

Thanks, Hassan

Answer 1

The events are fired, but you don't catch them, because subscription in Items_CollectionChanged never occurs if ItemTemplate is used.

You should understand how ItemsControl (and ComboBox) works with ItemsSource. ItemsControl use ItemContainerGenerator to populate its visual tree. Each item from ItemsSource wrap into container which derived from ContentControl. Then item is set as a Content, ItemTemplate is set as ContentTemplate and so on. When you put EditDeleteItem into ItemTemplate it becomes a part of visual tree but not an item. That's why there is no EditDeleteItem in e.NewItems and no subscription.

The right way is Commands, as you mentioned. You should declare two commands:

public class EditDeleteItem : UserControl
{
    ...
    public static readonly RoutedUICommand EditCommand = new RoutedUICommand(...);
    public static readonly RoutedUICommand DeleteCommand = new RoutedUICommand(...);
    ...
}

Now the part of template may look like:

<WrapPanel ...>
    <Button ... Command="{x:Static EditDeleteItem.EditCommand}"/>
    <Button ... Command="{x:Static EditDeleteItem.DeleteCommand}"/>
</WrapPanel>

Then you add command bindings to dCB_Props:

public partial class dCB_Props : UserControl
{
    static dCB_Props()
    {
        ...
        CommandManager.RegisterClassCommandBinding(
            typeof(dCB_Props),
            new CommandBinding(EditDeleteItem.EditCommand, OnEditCommandExecuted));
        CommandManager.RegisterClassCommandBinding(
            typeof(dCB_Props),
            new CommandBinding(EditDeleteItem.DeleteCommand, OnDeleteCommandExecuted));
        ...
    }
    ...
}

You need to implement OnEditCommandExecuted and OnDeleteCommandExecuted in order to handle corresponding commands from EditDeleteItem.

I hope I understood your question correctly ;)