Question

I have a bit of a problem binding a button command to a property of an “outer” data context.

The image below shows the layout I have. I’m trying to bind the CommandParameter of the “Clear” button (outlined in red) to the LocationId. The ItemsControl repeats an ObservableCollection of Locations (see below for Location definition).

The Clear button is basically trying to REMOVE the Addresses attached to the Location, to clear down the DataGrid. To do that I need to pass the LocationId to the ViewModel.

The actual command is triggered perfectly but the binding on the CommandParameter isn’t quite right.

Here are the underlying classes of Location & Address:

class Location 
{   
    int Id;
    ObservableCollection<Address> Addresses;
}

class Address
{
    string AddressText;
}

And here is the XAML commented with three alternative attempts & error messages:

<ItemsControl ItemsSource="{Binding Locations, Mode=TwoWay}">
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <StackPanel VerticalAlignment="Stretch" />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Id}"/>
      <sdk:DataGrid x:Name="ResponseDataGrid" ItemsSource="{Binding Addresses}">
        <sdk:DataGrid.Columns>
          <sdk:DataGridTextColumn Header="Response" Width="*" Binding="{Binding AddressText}"/>
          <sdk:DataGridTemplateColumn Width="100">
            <sdk:DataGridTemplateColumn.HeaderStyle>
              <Style TargetType="sdk:DataGridColumnHeader">
                <Setter Property="ContentTemplate">
                  <Setter.Value>
                    <DataTemplate>
                      <Button Content="Clear" 
                              Command="{Binding DataContext.ClearLocationCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                              CommandParameter="{Binding Id, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
                      <!--System.Windows.Data Error: BindingExpression path error: 'Id' property not found on 'System.Windows.Controls.ItemsControl' -->

                      <!--CommandParameter="{Binding ItemsSource.Id, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>-->
                      <!--System.Windows.Data Error: BindingExpression path error: 'Id' property not found on 'System.Collections.ObjectModel.ObservableCollection`1[UI.Location]' -->

                      <!--This gives me the ID but uses a specific index so only works for the first repeated Location-->
                      <!--CommandParameter="{Binding ItemsSource[0].Id, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>-->
                    </DataTemplate>
                  </Setter.Value>
                </Setter>
              </Style>
            </sdk:DataGridTemplateColumn.HeaderStyle>
            <sdk:DataGridTemplateColumn.CellTemplate>
              <DataTemplate>
                <Button Content="Accept">
                  <i:Interaction.Triggers>
                    <i:EventTrigger EventName="Click">
                      <i:InvokeCommandAction 
                        Command="{Binding DataContext.SelectedAddressCommand , RelativeSource={RelativeSource AncestorType=ItemsControl}}" 
                        CommandParameter="{Binding SelectedItem, RelativeSource={RelativeSource AncestorType=sdk:DataGrid}}"/>
                    </i:EventTrigger>
                  </i:Interaction.Triggers>
                </Button>
              </DataTemplate>
            </sdk:DataGridTemplateColumn.CellTemplate>
          </sdk:DataGridTemplateColumn>
        </sdk:DataGrid.Columns>
      </sdk:DataGrid>
    </DataTemplate>
  </ItemsControl.ItemTemplate>
</ItemsControl>

From the errors, it seems that the button can’t quite see the repeated Location object, it can either see the collection of Locations or a specific indexed Location but not the repeated, generated Location that I NEED!

Thanks!

Answer 1

So you have a ViewModel with an ObservableCollection<Location> And clicking on Clear clears the ObservableCollection<Address> of the specified Location, right?

Why don’t you just place the Clear command into the Location class? I dont know about the logic triggered by this command, but doing so you will be able to acces to the correct location Id property.

Edit: here it is my example working:

Classes

public class Location
{
    public Location(int id, IEnumerable<Address> addresses)
    {
        this.Id = id;
        this.Addresses =new ObservableCollection<Address>(addresses);
        this.ClearLocationCommand = new RelayCommand<int>(e => MessageBox.Show(string.Format("Clear command called on Location {0}", this.Id)));
    }

    public int Id { get; set; }
    public ObservableCollection<Address> Addresses { get; set; }

    public ICommand ClearLocationCommand { get; set; }
}

public class Address
{
    public Address(string text)
    {
        this.AddressText = text;
    }

    public string AddressText { get; set; }
}

public class MainWindowViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public MainWindowViewModel()
    {
        Locations = new ObservableCollection<Location>(new []
            {
                new Location(1, new [] { new Address("A1") }), 
                new Location(2, new [] { new Address("A2"), new Address("A3"), }), 
            });
    }

    public ObservableCollection<Location> Locations { get; set; }

    private void OnPropertyChanged(string porpertyName)
    {
        var e = this.PropertyChanged;
        if (e != null)
        {
            e(this, new PropertyChangedEventArgs(porpertyName));
        }
    }
}

XAML

<Window x:Class="TestBindingButtons.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:TestBindingButtons="clr-namespace:TestBindingButtons" Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
    <TestBindingButtons:MainWindowViewModel />
</Window.DataContext>
<Grid>
    <ItemsControl ItemsSource="{Binding Locations, Mode=TwoWay}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel VerticalAlignment="Stretch" />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Id}"/>
                    <DataGrid x:Name="ResponseDataGrid" ItemsSource="{Binding Addresses}">
                        <DataGrid.Columns>
                            <DataGridTextColumn Header="Response" Width="*" Binding="{Binding AddressText}"/>
                            <DataGridTemplateColumn Width="100">
                                <DataGridTemplateColumn.HeaderStyle>
                                    <Style TargetType="DataGridColumnHeader">
                                        <Setter Property="ContentTemplate">
                                            <Setter.Value>
                                                <DataTemplate>
                                                    <Button Content="Clear"
                                                            Command="{Binding DataContext.ClearLocationCommand, RelativeSource={RelativeSource AncestorType=ItemsControl}}"
                                                            />
                                                </DataTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </DataGridTemplateColumn.HeaderStyle>
                                <DataGridTemplateColumn.CellTemplate>
                                    <DataTemplate>
                                        <Button Content="Accept">

                                        </Button>
                                    </DataTemplate>
                                </DataGridTemplateColumn.CellTemplate>
                            </DataGridTemplateColumn>
                        </DataGrid.Columns>
                    </DataGrid>
                </StackPanel>                    
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>
</Window>

PD:
I didn’t posted the implementation of RelayCommand, use your own.
I didn’t used your “sdk” framework, just plain microsoft stuff.