如何設置使用數據綁定MVVM

Question

一個listpicker的selectedItem屬性我有一個listpicker我的分類詳細信息頁面

<toolkit:ListPicker HorizontalAlignment="Left" Name="ListPickerCategoryTypes" 
           ItemsSource="{Binding CategoryTypes, Mode=TwoWay}" Header="Category Types;" 
           VerticalAlignment="Top" Width="438" Margin="9,6,0,0" SelectedItem="{Binding CategoryTypeName, Mode=TwoWay}" > 
       <toolkit:ListPicker.ItemTemplate> 
        <DataTemplate> 
         <TextBlock Text="{Binding CategoryTypeName}" Tag="{Binding Id}"></TextBlock> 
        </DataTemplate> 

       </toolkit:ListPicker.ItemTemplate> 


      </toolkit:ListPicker> 

列表選擇器正確地填充上，但是，當我瀏覽到詳細信息頁面將selectedItem從未設置？

我有一個類別名稱文本框，正確顯示的類別名稱被選中，所以我知道它有數據只是不知道我在做什麼錯誤 與listpicker。我想也許這是我沒有使用CategoryTypeName我試圖使用我的模型上的類別類型ID。

我正在使用MVVM，所以我希望能夠在我的視圖模型中做到這一點。

Addtional Code to help SettingProduct視圖列出了列表框中的所有產品。

<Grid x:Name="ContentPanel" 
       Grid.Row="1" 
       Margin="12,0,12,0"> 
      <ListBox x:Name="TileList" ItemTemplate="{StaticResource TileProductDataTemplate}" 
         ItemsSource="{Binding DisplayProducts}" 
         Margin="6,20,6,-8" 
         SelectedItem="{Binding SelectedProduct, Mode=TwoWay}" > 
       <Custom:Interaction.Triggers> 
        <i:EventTrigger EventName="Tap"> 
         <GalaSoft_MvvmLight_Command:EventToCommand Command="{Binding EditDetailsPageCommand}" /> 
        </i:EventTrigger> 
       </Custom:Interaction.Triggers> 
       <ListBox.ItemsPanel> 
        <ItemsPanelTemplate> 
         <toolkit:WrapPanel/> 
        </ItemsPanelTemplate> 
       </ListBox.ItemsPanel> 
      </ListBox> 
     </Grid> 

對產品的事件命令執行的抽頭

...

this.EditDetailsPageCommand = new RelayCommand(this.GotoEditProductDetail, this.CanGotoEditProductDetail); 

public void GotoEditProductDetail() 
     { 


      //Messenger.Default.Send<NavigateToPageMessage>(new NavigateToPageMessage() { PageName = "SettingsProductDetail", SendObject = DisplayProducts }); 

      // Messenger.Default.Send<NavigateToPageMessage>(new NavigateToPageMessage(){PageName = "SettingsProductDetail", SendObject = SelectedProduct}); 
      Navigator.NavigateTo("SettingsProductDetail", SelectedProduct); 
     } 

它定位到德SettingsProductDetail查看並在該線路上構造它的錯誤設置的DataContext

時SettingsProductDetail Xaml

<toolkit:ListPicker HorizontalAlignment="Left" Name="ListPickerCategoryTypes" 
           ItemsSource="{Binding CategoryTypes}" 
           Header="Product Types;" 
           VerticalAlignment="Top" Width="438" Margin="9,6,0,0" 
           SelectedItem="{Binding SelectedCategoryType, Mode=TwoWay}" 
           > 
       <toolkit:ListPicker.ItemTemplate> 
        <DataTemplate> 
         <TextBlock Text="{Binding CategoryTypeName}" ></TextBlock> 
        </DataTemplate> 

       </toolkit:ListPicker.ItemTemplate> 


      </toolkit:ListPicker> 
public SettingsProductDetail() 
     { 
      InitializeComponent(); 
      this.DataContext = new ViewModel.SettingsProductDetailViewModel(Navigator.Object); 


     } 

在我的viewmodel for所述SettingsProductDetail 我有兩個屬性一個用於TEH的ItemSource和一個用於將selectedItem

public ObservableCollection<CategoryType> CategoryTypes 
     { 
      get { return _categoryType; } 
      set 
      { 
       if (value != _categoryType) 
       { 
        _categoryType = value; 
        base.RaisePropertyChanged("CategoryType"); 
       } 
      } 
     } 

     public Model.CategoryType SelectedCategoryType 
     { 
      get { return _selectedCategoryType; } 
      set 
      { 
       if (value != _selectedCategoryType) 
       { 
        _selectedCategoryType = value; 
        base.RaisePropertyChanged("SelectedCategoryType"); 
       } 
      } 
     } 

在構建體是我在哪裏填充從產品視圖傳遞的對象的SelectedCategoryType。

public SettingsProductDetailViewModel(object sendObject) 
     { 
      if (IsInDesignMode) 
      { 
       // Code runs in Blend --> create design time data. 
      } 
      else 
      { 
       ProductDetail = sendObject as DisplayProducts; 

       if (ProductDetail == null) 
       { 
        ProductDetail = new DisplayProducts(); 
       } 
       else 
       { 
        SelectedCategoryType = new CategoryType(); 
        SelectedCategoryType.Id = ProductDetail.FkCategoryTypeID; 
        SelectedCategoryType.CategoryTypeName = ProductDetail.CategoryTypeName; 
       } 

       _TheStoreDataContext = new TheStoreDataContext(ConnectionString); 
       PopulateHelperObjects(); 
       SettingsProductDetailSaveCommand = new RelayCommand<Model.Product>(param => SaveRecord(), param => (ProductDetail != null)); 
       SettingsProductDetailCancelCommand = new RelayCommand(CancelRecord,() => true); 
      } 
     } 

Answer 1

您的視圖模型需要有一個叫做CategoryTypeSelected財產，這將是類型T，其中T是都是你用你的ItemsSource綁定集合CategoryTypes中的對象的類型。這樣，CategoryTypeSelected將始終是從列表中選擇的項目。你這樣綁定它：

<toolkit:ListPicker HorizontalAlignment="Left" Name="ListPickerCategoryTypes" 
        ItemsSource="{Binding CategoryTypes, Mode=TwoWay}" ...... 
        SelectedItem="{Binding CategoryTypeSelected, Mode=TwoWay}" > 

當然，你的ViewModel需要實現INotifyPropertyChanged。

Answer 2

好吧，我現在有工作...

//It was my constructor and how I was setting the property. changed the constructor to this... if (ProductDetail == null) 
       { 
        ProductDetail = new DisplayProducts(); 
       } 
       else 
       { 
        SelectedCategoryType = new CategoryType {CategoryTypeName = ProductDetail.CategoryTypeName}; 
        //SelectedCategoryType.Id = ProductDetail.FkCategoryTypeID; 
       } 

//然後更改屬性二傳手這個...設置 {

   if (_categoryType.Contains(value)) 
       { 
        _selectedCategoryType = value; 
        base.RaisePropertyChanged("SelectedCategoryType"); 
       } 
       else 
       { 
        _selectedCategoryType = _categoryType.FirstOrDefault((o) => o.CategoryTypeName == value.CategoryTypeName); 
        base.RaisePropertyChanged("SelectedCategoryType"); 
       } 


       //if (value != _selectedCategoryType) 
       //{ 
       // _selectedCategoryType = value; 
       // base.RaisePropertyChanged("SelectedCategoryType"); 
       //} 
      }