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

Question

我正在使用 Xamarin.Forms 并尝试使用 MVVM 架构。

我有一个内容页面，上面有一个简单的 ListView 。 ListView 的项目源属性绑定(bind)到我的 ViewModel。我可以很好地填充列表。所有项目都按其应有的方式显示。

当我单击列表中的某个项目时，我需要根据所选项目导航到不同的页面。这是行不通的。只有当我直接引用我的底层模型时它才会起作用(这不是我想要做的)

我已经编码了 ListView.ItemSelected 事件。但是，“Item Selected”事件无法确定所选列表项的“display_text”是什么。如何实现此目的，而无需直接从 View (页面)引用模型？

主页代码:

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

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

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

1。处理 View 中的逻辑

Actor 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。处理 View 模型中的逻辑

查看

使用 Command<T>在 View 和 View 模型之间松散地耦合 ItemSelected 逻辑。创建 event在 View 模型中，当 View 模型完成逻辑时将触发。

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

View 模型

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