如何使用MVVM和Xamarin.Forms ListView ItemSelected事件来检索所选项目的绑定属性？

Question

我正在使用Xamarin.Forms并尝试使用MVVM体系结构。

我有一个ContentPage，上面有一个简单的列表视图。列表视图具有绑定到我的ViewModel的项源属性。我可以很好地填充列表。所有项目均按应有的方式显示。

当我单击列表中的项目时，我需要根据所选项目导航到其他页面。这是行不通的。仅当我直接引用我的基础模型（这不是我想做的）时，它才有效

我有ListView.ItemSelected事件编码。但是，Item Selected事件无法确定所选List Item的“ display_text”是什么。如何实现此目的而不必直接从我的视图（页面）中引用我的模型？

主页代码：

public partial class MainPage : ContentPage
{
    private int intPreJobFormID = 0;
    public MainPage()
    {
        InitializeComponent();
        BindingContext = new MainPageViewModel();

        Label lblHeader = new Label
        {
            Text = "HW Job Assessments",
            FontSize = ViewGlobals.lblHeader_FontSize,
            HorizontalOptions = ViewGlobals.lblHeader_HorizontalOptions,
            FontAttributes = ViewGlobals.lblHeader_FontAttributes,
            TextColor = ViewGlobals.lblHeader_TextColor
        };

        //Create the Main Menu Items List View
        var lvMain = new ListView
        {
            //Pull down to refresh list
            IsPullToRefreshEnabled = true,

            //Define template for displaying each item.
            //Argument of DataTemplate constructor is called for each item. It must return a Cell derivative.
            ItemTemplate = new DataTemplate(() =>
            {
                //Create views with bindings for displaying each property.
                Label lblDisplayText = new Label();
                lblDisplayText.SetBinding(Label.TextProperty, "display_text");
                lblDisplayText.FontSize = Device.GetNamedSize(NamedSize.Medium, typeof(Label));


                //Return an assembled ViewCell.
                return new ViewCell
                {
                    View = new StackLayout
                    {
                        Padding = new Thickness(20, 5, 0, 0),
                        Orientation = StackOrientation.Horizontal,
                        Children =
                        {
                            new StackLayout
                            {
                                VerticalOptions = LayoutOptions.Center,
                                Spacing = 0,
                                Children =
                                {
                                    lblDisplayText
                                }
                            }
                        }
                    }
                };
            })
        };
        lvMain.SetBinding(ListView.ItemsSourceProperty, "MainMenuItems");
        lvMain.ItemSelected += lvMain_ItemSelected;

    }

    private async void lvMain_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var lv = (ListView)sender;

        if (e.SelectedItem == null)
        {
            return; //ItemSelected is called on deselection which results in SelectedItem being set to null
        }

        //var item = e.SelectedItem as TableMainMenuItems; //This is what I DON'T want to use because it references my Model directly.
      var item = e.SelectedItem;

        switch (item.display_text) //This is what I need. I can't get this unless I reference my Model "TableMainMenuItems" directly.
        {
            case "Forms List":
                await Navigation.PushAsync(new FormsListPage());
                break;

            case "New Pre-Job":
                await Navigation.PushAsync(new PreJobPage(intPreJobFormID));
                break;
        }

        //Comment out if you want to keep selections
        lv.SelectedItem = null;
    }
}

MainPageViewModel代码：

public class MainPageViewModel
{

    public int intPreJobFormID = 0;
    private DatabaseApp app_database = ViewModelGlobals.AppDB;
    private DatabaseFormData formdata_database = ViewModelGlobals.FormDataDB;
    private IEnumerable<TableMainMenuItems> lstMaineMenuItems;
    private IEnumerable<TableFormData> lstRecentJobs;

    public string DisplayText { get; set; }
    public IEnumerable<TableMainMenuItems> MainMenuItems
    {
        get { return lstMaineMenuItems; }
        set
        {
            lstMaineMenuItems = value;
        }
    }

    public IEnumerable<TableFormData> RecentJobs
    {
        get { return lstRecentJobs; }
        set
        {
            lstRecentJobs = value;
        }
    }

    public MainPageViewModel()
    {
        intPreJobFormID = app_database.GetForm(0, "Pre-Job Assessment").Id;
        MainMenuItems = app_database.GetMainMenuItems();
        RecentJobs = formdata_database.GetFormAnswersForForm(intPreJobFormID).OrderByDescending(o => o.date_modified);

    }

}

Answer 1

有两种方法可以检索所选项目的绑定属性。

我个人更喜欢在视图中处理逻辑，因为它使代码更简单。

1. 处理视图中的逻辑

转换item为您的模型类型： var item = e.SelectedItem as TableMainMenuItems;

async void lvMain_ItemSelected(object sender, SelectedItemChangedEventArgs e)
{
    var listView = (ListView)sender;
    listView.SelectedItem = null; 

    if (e?.SelectedItem is TableMainMenuItems item)
    {
        switch (item.display_text)
        {
            case "Forms List":
                await Navigation.PushAsync(new FormsListPage());
                break;

            case "New Pre-Job":
                await Navigation.PushAsync(new PreJobPage(intPreJobFormID));
                break;
        }
    }
}

2. 处理视图模型中的逻辑

看法

使用 aCommand<T>在视图和视图模型之间松散耦合 ItemSelected 逻辑。在视图模型中创建一个event，当视图模型完成逻辑时将触发该视图模型。

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        var viewModel = new MainPageViewModel();
        BindingContext = viewModel;
        ...
        viewModel.NavigationRequested += (s,e) => Device.BeginInvokeOnMainThread(async () => await Navigation.PushAsync(e));
    }       

    ...

    void lvMain_ItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        var listView = (ListView)sender;
        listView.SelectedItem = null;

        var viewModel = (MainPageViewModel)BindingContext;

        viewModel.ListViewItemSelectedCommand?.Invoke(e);
    }
}

视图模型

public class MainPageViewModel
{
    //...
    Command<SelectedItemChangedEventArgs> _listViewItemSelectedCommand;
    //...
    public event EventHandler<Page> NavigationRequested;
    //...
    public Command<SelectedItemChangedEventArgs> ListViewItemSelectedCommand => _listViewItemSelectedCommand ??
    (_listViewItemSelectedCommand = new Command<SelectedItemChangedEventArgs>(ExecuteListViewItemSelectedCommand));
    //...
    void ExecuteListViewItemSelectedCommand(SelectedItemChangedEventArgs e)
    {
        var item = e as TableMainMenuItems;

        switch (item?.display_text)
        {
            case "Forms List":
                OnNavigationRequested(new FormsListPage());
                break;

            case "New Pre-Job":
                OnNavigationRequested(new PreJobPage(0));
                break;
        }
    }

    void OnNavigationRequested(Page pageToNavigate) => NavigationRequested?.Invoke(this, pageToNavigate);
    //...
}