本文介绍了如何使用数据绑定MVVM设置列表选择器的selectedItem的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的类别详细信息页面上有一个列表选择器

I have a listpicker on my Category details page

 <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吗?

The list picker populates correctly but when I navigate to the details page the selectedItem is never set?

我有一个类别名称文本框,可以正确显示所选的类别名称,因此我知道它具有数据,只是不确定我在做什么错误
列表选择器。我以为是我没有使用CategoryTypeName,而是想使用模型上的Category Type ID。

I have a category Name textbox that is correctly displaying the category name that was selected so I know it has the data just not sure what I am doing wrong with the listpicker. I thought maybe it was that I wasnt using the CategoryTypeName I was trying to use the Category Type ID that is on my model.

我正在使用MVVM,所以我想能够在我的视图模型中做到这一点。

I am using MVVM so I would like to be able to do this in my view model.

帮助
的附加代码SettingProduct视图列出了我在列表框中拥有的所有产品。

Addtional Code to helpThe SettingProduct view lists all the products I have in a listbox.

<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>

在执行事件命令时点击产品...

on the tap of a product the event command executes...

    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

It navigates to teh SettingsProductDetail View and in the constructor it errors on this line when setting the DataContext

SettingsProductDetail Xaml

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
我有两个属性,一个用于ItemSource,一个用于selectedItem

In my viewmodel for the SettingsProductDetail I have two properties one for teh Itemsource and one for the 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。

In the construct is where I am populating the SelectedCategoryType from the object passed from the product view.

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


推荐答案

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

Your ViewModel needs to have a property called CategoryTypeSelected which will be of the type T, where T is the type of objects that are in the collection CategoryTypes which you used to bind your ItemsSource. This way, the CategoryTypeSelected will always be the item selected from the list. You bind it like this:

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

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

Of course, your ViewModel needs to implement INotifyPropertyChanged.

这篇关于如何使用数据绑定MVVM设置列表选择器的selectedItem的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

11-02 08:58