如何将UserControl绑定到ViewModel

Question

连接两个组件时遇到麻烦：

视图：

<UserControl x:Class="CoolPlaces.Views.ListItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="480" d:DesignWidth="480">

    <ListBox ItemsSource="{Binding ListViewModel}">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Path=Name, Mode=OneWay}" />
                    <TextBox Text="{Binding Path=Description, Mode=OneWay}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</UserControl>

主页视图的一部分：其中包括上述用户控件：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <views:ListItem Height="300" />
</Grid>

视图模型：

namespace CoolPlaces.ViewModels
{
    public class ListViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<BasicModel> _places;

        public ObservableCollection<BasicModel> Places {
            get {
                return _places;
            }
            set {
                _places = value;
                RaisePropertyChanged("Places");
            }
        }

        public ListViewModel() { 
            Places = new ObservableCollection<BasicModel>(_loadPlaces());
        }

        private IEnumerable<BasicModel> _loadPlaces() {
            return //some hard coded objects
        }
    }
}

主页

namespace CoolPlaces
{
    public partial class MainPage : PhoneApplicationPage
    {
        private ListViewModel vm;

        // Constructor
        public MainPage()
        {
            InitializeComponent();
            vm = new ListViewModel();
        }
    }
}

Answer 1

你近了 您需要将DataContext设置为等于ViewModel。

public partial class MainPage : PhoneApplicationPage
{
    private ListViewModel vm;

    // Constructor
    public MainPage()
    {
        InitializeComponent();
        DataContext = vm = new ListViewModel();
    }
}

然后，您的ListBox不需要绑定到它。 而是将其绑定到ViewModel上的Places属性：

<ListBox ItemsSource="{Binding Places}">