How to bind command correctly in my custom control WPF

Question

Here's my control:

<UserControl.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <Border BorderThickness="0.5" BorderBrush="DarkGray">
            <Grid Height="30">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>

                <CheckBox Command="{Binding DataContext.CheckCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" Content="{Binding Name}" IsChecked="{Binding IsChecked}"  Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" Width="Auto"/>

                <Button Command="{Binding DataContext.UpCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
                                    Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" Margin="1" ToolTip="Up" BorderBrush="{x:Null}" Background="{x:Null}">
                    <Image Source="/Resources/Icons/sort_up.png"/>
                </Button>

                <Button 
                        Command="{Binding DataContext.DownCommand, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}"
                        Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="1" ToolTip="Down" BorderBrush="{x:Null}" Background="{x:Null}">
                    <Image Source="/Resources/Icons/sort_down.png"/>
                </Button>

            </Grid>
        </Border>
    </DataTemplate>
</UserControl.Resources>

And the code in the View Model includes this:

/// <summary>
    /// Moves item up in the custom list
    /// </summary>
    private void UpCommandExecuted()
    {
        if (SelectedItem != null)
        {
            StoredProc Proc = SelectedItem;
            int oldLocation = TheList.IndexOf(SelectedItem);
            if (oldLocation > 0)
            {
                if (SelectedItem.IsChecked || (TheList[oldLocation - 1].IsChecked == SelectedItem.IsChecked))
                {
                    TheList.RemoveAt(oldLocation);
                    TheList.Insert(oldLocation - 1, Proc);
                    SelectedItem = Proc;
                }
            }
        }
    }

I also have a SelectedItem property in VM that is a StoredProcedure (type I made up). This is working, but clicking any of the listbox's item "Up" button causes the SELECTEDITEM to be acted on. I actually want the listbox item where I click the button to be acted on. How can I do this? How do I tell my UpCommandExecuted() method to act on the ListBoxItem where I clicked the Up button, not the actual SelectedItem?

score 1 · Accepted Answer · answered Jun 13 '13 at 17:06

1

Try adding CommandParameter={Binding} to your <Button>. That will pass the data context of the selected item into your command through the ICommand.Execute method.

Otherwise, move the command properties to the a model that represents the items, rather than having a single set of commands defined at the root level. I personally prefer this approach. I like my commands to be parameterless and to always act on the view model class that contains the command.

answered Jun 13 '13 at 17:06

Michael Gunter

12,528
1
24
58

Awesome that worked perfectly thank you thank you thank you! Could you elaborate a little more on how to move the command properties ? – Theodosius Von Richthofen Jun 13 '13 at 17:36
You have a view model class that has the `CheckCommand`, `UpCommand`, and `DownCommand` properties. Presumably, you also have a collection property on that view model class, and you're using that property in the `ItemsSource` of your `ListBox`. Presumably, that collection contains instances of another view model class (the one that contains the `IsChecked` property). Move the command properties from your root class to your item class. As you create each of the item instances, make sure you set the command properties for each item. – Michael Gunter Jun 13 '13 at 17:50
Then in your DataTemplate, just use `Command={Binding CheckCommand}` and the like. Note the greatly simplified binding expression. I find that often indicates a better VM design. – Michael Gunter Jun 13 '13 at 17:51

How to bind command correctly in my custom control WPF

1 Answers1