2014-04-29 32 views
1

我很新MVVM所以忍受着我。綁定ListView與DataTemplates包含UserControls MVVM中的ViewModels

我正在處理包含聯繫人列表的應用程序。我定義了以下模型的聯繫人的用戶控件:

public class Client 
{ 
    public string FirstName { get; set; } 
    public string MiddleName { get; set; } 
    public string LastName { get; set; } 
    public string PhoneNumber { get; set; } 
    public string Address1 { get; set; } 
    public string Address2 { get; set; } 
    public string City { get; set; } 
    public string State { get; set; } 
    public string ZipCode { get; set; } 
    public int CustomerID { get; set; } 

    public string FullName 
    { 
     get 
     { 
      string result = FirstName; 

      if (string.IsNullOrEmpty(result)) 
       result = MiddleName; 
      else if(!string.IsNullOrEmpty(MiddleName)) 
       result += string.Format(" {0}", MiddleName); 

      if (string.IsNullOrEmpty(result)) 
       result = LastName; 
      else if (!string.IsNullOrEmpty(LastName)) 
       result += string.Format(" {0}", LastName); 

      if (string.IsNullOrEmpty(result)) 
       result = ""; 

      return result; 
     } 
    } 
} 

而下面的視圖模型:

public class ClientViewModel : ObservableObject 
{ 
    public Client Customer 
    { 
     get 
     { 
      return _customer; 
     } 
     set 
     { 
      _customer = value; 
      RaisePropertyChangedEvent("Customer"); 
     } 
    } 
    public string FullName { get { return _customer.FullName; } } 
    public string PhoneNumber { get { return _customer.PhoneNumber; } } 
    public string Address1 { get { return _customer.Address1; } } 
    public string Address2 { get { return _customer.Address2; } } 
    public string City { get { return _customer.City; } } 
    public string State { get { return _customer.State; } } 
    public string ZipCode { get { return _customer.ZipCode; } } 

    Client _customer = new Client(); 
} 

而以下幾種觀點:

<UserControl x:Class="LawnCareManager.Views.ClientView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:LawnCareManager.ViewModels" 
      mc:Ignorable="d" 
      d:DesignHeight="180" d:DesignWidth="300"> 
    <UserControl.DataContext> 
     <local:ClientViewModel/> 
    </UserControl.DataContext> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="1*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
      <RowDefinition Height="1*"/> 
     </Grid.RowDefinitions> 
     <Label Grid.Row="0" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="Name: "/> 

     <Label Grid.Row="0" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding FullName}"/> 

     <Label Grid.Row="1" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="Phone Number: "/> 

     <Label Grid.Row="1" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding PhoneNumber}"/> 

     <Label Grid.Row="2" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="Address 1: "/> 

     <Label Grid.Row="2" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding Address1}"/> 

     <Label Grid.Row="3" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="Address 2: "/> 

     <Label Grid.Row="3" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding Address2}"/> 

     <Label Grid.Row="4" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="City: "/> 

     <Label Grid.Row="4" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding City}"/> 

     <Label Grid.Row="5" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="State: "/> 

     <Label Grid.Row="5" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding State}"/> 

     <Label Grid.Row="6" 
       Grid.Column="0" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Right" 
       Margin="10,0,0,0" 
       Content="Zip Code: "/> 

     <Label Grid.Row="6" 
       Grid.Column="1" 
       VerticalAlignment="Center" 
       HorizontalAlignment="Left" 
       Margin="10,0,0,0" 
       Content="{Binding ZipCode}"/> 
    </Grid> 
</UserControl> 

現在,我想創建一個包含在ViewModel中定義的聯繫人列表的用戶控件:

public class ClientsListViewModel : ObservableObject 
{ 
    public ObservableCollection<ClientViewModel> Clients 
    { 
     get { return _clients; } 
     set { _clients = value; } 
    } 

    ObservableCollection<ClientViewModel> _clients = new ObservableCollection<ClientViewModel>(); 

    public ClientsListViewModel() 
    { 
     ClientViewModel client = new ClientViewModel(); 
     client.Customer.FirstName = "John"; 
     client.Customer.LastName = "Doe"; 
     client.Customer.PhoneNumber = "555-555-5555"; 
     client.Customer.Address1 = "1234 Fake Street"; 
     client.Customer.City = "Springfield"; 
     _clients.Add(client); 
    } 
} 

和下面的觀點:

<UserControl x:Class="LawnCareManager.Views.ClientsListView" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:LawnCareManager.ViewModels" 
      xmlns:views="clr-namespace:LawnCareManager.Views" 
      mc:Ignorable="d" 
      d:DesignHeight="300" d:DesignWidth="300"> 
    <UserControl.DataContext> 
     <local:ClientsListViewModel/> 
    </UserControl.DataContext> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="1*"/> 
     </Grid.RowDefinitions> 

     <Label Content="Contacts" 
       Grid.Row="0" 
       Grid.Column="0"/> 
     <ListView Grid.Column="1" Grid.Row="2" Grid.ColumnSpan="2" ItemsSource="{Binding Clients}" x:Name="listView"> 
      <ListView.ItemTemplate> 
       <DataTemplate> 
        <views:ClientView DataContext="{Binding}"/> 
       </DataTemplate> 
      </ListView.ItemTemplate> 
     </ListView> 
    </Grid> 
</UserControl> 

的問題是,在ClientsListView的ClientView ListViewItems不正確結合ClientViewModels的的ObservableCollection。如果我添加更多ClientViewModels,但是ClientView中沒有任何標籤正在填充,則正確數量的ClientView會顯示在列表中。

有人能告訴我我做錯了什麼嗎?任何反饋非常感謝!

+0

你需要給我們一些線索,說明是什麼讓你覺得它是錯的。到目前爲止你寫的東西沒有明顯的問題。 –

+0

對不起加里。我編輯了這個帖子來添加我的問題。 – fightingtxaggie

+0

我現在可以看到問題了。討厭的錯誤。您用於指定客戶端視圖的數據上下文的Xaml使用空客戶端創建視圖。您需要在客戶端視圖xaml中更改數據上下文的聲明。 –

回答

0

這裏的問題是您正在爲InitializeComponent方法中的客戶端視圖構建數據上下文。這是由於Xaml中的靜態聲明造成的。您可以通過添加這行代碼到ClientView構造經驗證明了這一點......

var dc = this.DataContext; 

,並觀察它能夠在「錯誤的時間」空值創建的。

如果您更改ClientView.xaml這些行...

<UserControl.DataContext> 
    <genericMvvm1:ClientViewModel/> 
</UserControl.DataContext> 

這個...

<!--<UserControl.DataContext> 
     <genericMvvm1:ClientViewModel/> 
    </UserControl.DataContext>--> 

你會看到你的客戶得到填充並顯示您所期望的方式。你需要改變你的設計策略,以考慮InitializeComponent的行爲方式,但是這個答案會讓你'失去信心'。

+0

謝謝!在我做出改變後,它按預期工作。 – fightingtxaggie

+0

我爲你編輯了標籤。 –