Bind to event in part of a custom control

Question

I'm trying to implement the example at:

https://github.com/olohmann/WpfRxControls

There are three parts to the custom control:

PART_TextBox

PART_Popup

PART_ListBox

Relevant source:

https://github.com/olohmann/WpfRxControls/blob/master/WpfRxControls/AutoCompleteTextBox.cs

https://github.com/olohmann/WpfRxControls/blob/master/WpfRxControls/Themes/Generic.xaml

All the pieces are in place, and the code using the new control is as follows:

<ctrls:AutoCompleteTextBox
            Grid.Row="1"
            AutoCompleteQueryResultProvider="{Binding AutoCompleteQueryResultProvider}"
            Margin="10" FontSize="20" PopupHeight="300">

</ctrls:AutoCompleteTextBox>

I just need to hook into the ListBox's SelectionChanged event in my pages XAML / ViewModel, how can this be accomplished?

Edit: In XAML / VM, not view code behind. Thus far all view code behinds are empty and I'd like to keep it that way.

I thought there was some way to override PART_ListBox in a ControlTemplate override in MainWindow.XAML?

Edit: Final solution, thanks to mm8

In the AutoCompleteTextBox.cs, create a dependency property of type ICommand:

public const string AutoCompleteSelectionChangedPropertyName = "AutoCompleteSelectionChangedCommand";

        public ICommand AutoCompleteSelectionChangedCommand
        {
            get { return (ICommand) GetValue(AutoCompleteSelectionChangedProperty); }
            set { SetValue(AutoCompleteSelectionChangedProperty, value);}
        }

        public static readonly DependencyProperty AutoCompleteSelectionChangedProperty = DependencyProperty.Register(
            AutoCompleteSelectionChangedPropertyName,
            typeof(ICommand),
            typeof(AutoCompleteTextBox));

In the SetResultText method:

AutoCompleteSelectionChangedCommand?.Execute(autoCompleteQueryResult);

View / ViewModel usage:

<ac:AutoCompleteTextBox Name="AutoComplete" 
    AutoCompleteQueryResultProvider="{Binding AutoCompleteQueryResultProvider}" 
    FontSize="12"
    AutoCompleteSelectionChangedCommand="{Binding CommandEditValueChanged}">
</ac:AutoCompleteTextBox>


public ICommand CommandEditValueChanged { get; set; }

public MainWindowViewModel(){
     CommandEditValueChanged = new DelegateCommand<object>(OnEditValueChanged);
}

private void OnEditValueChanged(object result){
     // do stuff
}

mm8 mm8 · Accepted Answer · 2017-01-22T11:29:04

You could handle the Loaded event of the AutoCompleteTextBox in the view, get a reference to the PART_ListBox in the control template using the FindName method and then hook up an event handler for the SelectionChanged event of the ListBox:

<ctrls:AutoCompleteTextBox
            Grid.Row="1"
            AutoCompleteQueryResultProvider="{Binding AutoCompleteQueryResultProvider}"
            Margin="10" FontSize="20" PopupHeight="300" Loaded="AutoCompleteTextBox_Loaded">

</ctrls:AutoCompleteTextBox>

private void AutoCompleteTextBox_Loaded(object sender, RoutedEventArgs e)
{
    AutoCompleteTextBox actb = sender as AutoCompleteTextBox;
    ListBox lb = actb.Template.FindName("PART_ListBox", actb) as ListBox;
    if (lb != null)
    {
        lb.SelectionChanged += (ss, ee) =>
        {
            MainWindowViewModel vm = DataContext as MainWindowViewModel;
            //invoke a command of the view model or do whatever you want here...
            var selectedItem = lb.SelectedItem;
        };
    }
}

Your view model class has no (and shouldn't have any) reference nor knowledge about the ListBox that is part of the template of the control.

I thought there was some way to override PART_ListBox in a ControlTemplate override in MainWindow.XAML?

Then you will have to override/re-define the entire ControlTemplate of the AutoCompleteTextBox control which seems a bit unnecessary.

MVVM is not about eliminating code from the views - it's about separation of concerns and whether you hook up an event handler from the XAML markup of the view or the code-behind of the very same view makes no difference at all as far as the design pattern is concerned.

Edit: But if you want to keep the code-behind classes clean you could implement this using an attached behaviour:

public class AutoCompleteBoxBehavior
{
    public static ICommand GetSelectionChangedCommand(AutoCompleteTextBox actb)
    {
        return (ICommand)actb.GetValue(SelectionChangedCommandProperty);
    }

    public static void SetSelectionChangedCommand(AutoCompleteTextBox actb, ICommand value)
    {
        actb.SetValue(SelectionChangedCommandProperty, value);
    }

    public static readonly DependencyProperty SelectionChangedCommandProperty =
        DependencyProperty.RegisterAttached(
        "SelectionChangedCommand",
        typeof(ICommand),
        typeof(AutoCompleteBoxBehavior),
        new UIPropertyMetadata(null, OnHandleSelectionChangedEvent));

    private static void OnHandleSelectionChangedEvent(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ICommand command = e.NewValue as ICommand;
        if(command != null)
        {
            AutoCompleteTextBox actb = d as AutoCompleteTextBox;
            actb.Loaded += (ss, ee) =>
            {
                ListBox lb = actb.Template.FindName("PART_ListBox", actb) as ListBox;
                if (lb != null)
                {
                    lb.SelectionChanged += (sss, eee) =>
                    {
                        command.Execute(null);
                    };
                }
            };
        }
    }
}

<ctrls:AutoCompleteTextBox
        Grid.Row="1"
        AutoCompleteQueryResultProvider="{Binding AutoCompleteQueryResultProvider}"
        Margin="10" FontSize="20" PopupHeight="300"
        local:AutoCompleteBoxBehavior.SelectionChangedCommand="{Binding YourCommand}">
 </ctrls:AutoCompleteTextBox>

Introduction to Attached Behaviors in WPF: https://www.codeproject.com/Articles/28959/Introduction-to-Attached-Behaviors-in-WPF

Bind to event in part of a custom control

1 Answers