如何使用数据绑定MVVM设置listpicker的selectedItem

时间:2013-07-22 18:07:28

标签: windows-phone-7 xaml data-binding mvvm

我的分类详情页面上有一个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,所以我希望能够在我的视图模型中执行此操作。

添加代码以提供帮助 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 View并在构造函数中设置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);


        }

在SettingsProductDetail的viewmodel中 我有两个属性,一个用于项目源,一个用于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);
            }
        }

2 个答案:

答案 0 :(得分:4)

您的ViewModel需要有一个名为CategoryTypeSelected的属性,该属性为T类型,其中T是您用于绑定ItemsSource的集合CategoryTypes中的对象类型。这样,CategoryTypeSelected将始终是从列表中选择的项目。你像这样绑定它:

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

当然,您的ViewModel需要实现INotifyPropertyChanged。

答案 1 :(得分:0)

好的我现在有了它的工作......

//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;
                }

//然后将属性setter更改为this ... set                 {

                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");
                //}
            }