从MainWindow在UserControl中调用事件

Question

I have a UserControl with a Button and a ListView.

Model

public class Item
{
    private string _name = string.Empty;

    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
        }
    }
}

ViewModel

public class ViewModel : NotifyProperty
{
    private Command addCommand;
    public ICommand AddCommand
    {
        get
        {
            if (addCommand == null)
                addCommand = new Command(addItem);
            return addCommand;
        }
    }

    private ObservableCollection<Item> _itemCollection;

    public ViewModel()
    {

        ItemCollection = new ObservableCollection<Item>();
        Item newItem = new Item();
        newItem.Name = "Joe";
        ItemCollection.Add(newItem);
    }

    public ObservableCollection<Item> ItemCollection
    {
        get
        {
            return _itemCollection;
        }
        set
        {
            _itemCollection = value;
            OnPropertyChanged("ItemCollection");
        }
    }

    private void addItem(Object obj)
    {
        Item newItem = new Item();
        newItem.Name = "Chris";
        ItemCollection.Add(newItem);
    }
}

UserControl (XAML)

<UserControl.DataContext>
    <local:ViewModel />
</UserControl.DataContext>

<UserControl.Resources>
    <DataTemplate x:Key="ItemTemplate">
        <StackPanel Orientation="Vertical">
            <Label Content="{Binding Name}" />
        </StackPanel>
    </DataTemplate>
</UserControl.Resources>

<Grid>
    <DockPanel>
        <Button Width="100" Height="30" Content="Add" Command="{Binding AddCommand}" DockPanel.Dock="Top" />
        <ListView ItemTemplate="{StaticResource ItemTemplate}" ItemsSource="{Binding ItemCollection}" />
    </DockPanel>
</Grid>

I then add this to my MainWindow like so

 public partial class MainWindow : Window
{

    public MainWindow()
    {
        InitializeComponent();
        this.mainContentControl.Content = new ListControl();

    }
}

This works fine and when I click the "Add" button the name "Chris" gets added to the ListView.

Now I add a button to MainView and bind its Command property to my ViewModel like so:

<Grid>
    <DockPanel>
        <Button Width="100" Height="30" Content="Add" Command="{Binding AddCommand}" DockPanel.Dock="Top">
            <Button.DataContext>
                <local:ViewModel />
            </Button.DataContext>
        </Button>
        <ContentControl x:Name="mainContentControl" />
    </DockPanel>       
</Grid>

When I click this button in the MainWindow the command is sent to the ViewModel, the addItem event gets called, the name "Chris" gets added to the ItemCollection, but the ListView doesn't update. What am I doing wrong?

Answer 1

Is your ViewModel being set as the data context of another element somewhere else (either in XAML or code-behind).

Where you're setting it as the data context against the button, that will instantiate a new instance of the view model, so any interaction with the instance the button has access to will not update across other instances.

The button will inherit the data context from ancestor elements (eg the window etc), so you shouldn't need to set it, but if you do need a separate data context for the button, then I'd recommend creating the instance of ViewModel as a resource and then just referencing that for the elements that need access to it.