在 TabbedPage（Xamarin 表單）中填充選擇器信息

Question

我一直在嘗試在標簽頁之間傳輸/填充數據。 我想要做的一般想法是在“插入/編輯”頁面中插入產品信息，然后可以在“概述”頁面中查看。 保存的產品填充在列表視圖中。

我對 MVVM 和 Xamarin 很陌生。 我遇到的問題是，當用戶從“概覽”頁面的列表視圖中單擊一個項目時，它應該填充“插入/編輯”頁面中存儲的信息，以便用戶可以編輯產品信息。 我能夠顯示除選擇器之外的大部分產品信息。 它只是顯示為空。

我的 TabbedViewModel 錯了嗎？ 有人可以指出我正確的方向嗎？ 下面是我的標簽頁 xaml 代碼。

<TabbedPage 
... 
...>
    <Views:InsertEdit Title="Insert/Edit" Icon="edit.png" BindingContext="{Binding productViewModel}"></Views:InsertEdit>
    <Views:Overview Title="Overview" Icon="list.png"></Views:Overview>
</TabbedPage>

我使用 TabbedViewModel 在“插入/編輯”頁面和“概覽”頁面之間綁定產品信息

namespace Prototype
{
    public class TabbedViewModel
    {
        public Product productViewModel { set; get; }

        public TabbedViewModel(Product product)
        {
            productViewModel = product;
        }
    }
}

產品信息根據產品型號

public class Product
{
        [PrimaryKey, AutoIncrement]
        public int id { get; set; }
        public string productCode { get; set; }
        public string description { get; set; }
        public string merchant { get; set; }
        public string remarks { get; set; }
        public string conditionCode { get; set; }
        public string conditionName { get; set; }
        
}

產品條件按照 ProductCondition 模型

public class ProductCondition
{
        
        public string conditionCode { get; set; }
        public string conditionName { get; set; }
        
}

在選擇器列表中，僅顯示 conditionName。 但是當將產品信息保存到 Product 表中時，conditionName 和 conditionCode 存儲在一起。

下面是我的 InsertEdit 內容頁面代碼

public partial class InsertEdit : ContentPage
{
    Product product;

    public InsertEdit()
    {
        InitializeComponent();
        InitializeData();
    }
    
    private async void InitializeData()
    {
        List<ProductCondition> conditionList = await App.DbHelper.GetConditionListAsync();
        picker.ItemsSource = conditionList;
    }

    // Upon clicking enter key in the entry text field, search for product info based on the product code user has keyed in
    async void EditorProductCode_Completed(object sender, EventArgs e)
    {
        var text = ((Entry)sender).Text; //cast sender to access the properties of the Entry

        if (string.IsNullOrEmpty(text))
        {
            await DisplayAlert("Warning", "Invalid", "OK");
        }
        else
        {

            product = await App.DbHelper.GetProduct(text);
            populateData();
        }
    }

    async void populateData() {
        if (product == null)
        {
            product = new Product();
            product = null;
            await DisplayAlert("Warning", "Invalid product code.", "OK");
        }

        picker.SelectedItem = ((List<ProductCondition>)picker.ItemsSource).FirstOrDefault(c => c.conditionCode == product.conditionCode);

        BindingContext = product;
    }

   
   // Upon clicking the save button
    async void OnSaveButtonClicked(object sender, EventArgs e)
    {
        product.conditionCode = ((ProductCondition)picker.SelectedItem).conditionCode;
        product.conditionName = ((ProductCondition)picker.SelectedItem).conditionName;
        await App.DbHelper.SaveProductAsync(product);

        DependencyService.Get<IMessage>().LongAlert("Product has been saved!");

    }

}

下面是選擇器 xaml 代碼

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="2.1*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="5*" />
    </Grid.ColumnDefinitions>
    <Label Text="Product Condition" 
       HorizontalOptions="Start"
       VerticalOptions="Center"/>
    <Label Grid.Column="1"
       HorizontalOptions="Start"
       VerticalOptions="Center"
       Text=":"/>
    <Picker Grid.Column="2"
        Title="Select Condition" 
        x:Name="picker" 
        FontSize="13"
        ItemDisplayBinding="{Binding conditionName}"
        />
</Grid>

下面是我的 InsertEdit 內容頁面代碼

public partial class Overview : ContentPage
{
    public Overview()
    {
        InitializeComponent();
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();

        Quantity.Text = "Quantity : " + (await App.DbHelper.GetProductTableCount()).ToString();

        lvItems.BeginRefresh();

        List<Product> productList = await App.DbHelper.GetProductListAsync();

        lvItems.ItemsSource = productList;
        lvItems.EndRefresh();

    }

    async void OnListViewItemSelected(object sender, SelectedItemChangedEventArgs e)
    {
        if (e.SelectedItem != null)
        {
            Product product = e.SelectedItem as Product;

            var tab = this.Parent as TabbedPage;
            tab.BindingContext = new TabbedViewModel(product);
            tab.CurrentPage = tab.Children[0];

            /*await Navigation.PushAsync(new TabbedPage
            {
                BindingContext = new TabbedViewModel(product)
            });*/
        }
    }
}

如果有人能指出我正確的方向，我真的很感激。 我已經嘗試了幾天，上面的代碼是我能得出的最好的代碼。 我只是失去了對如何填充選擇器的信息。

Answer 1

在產品類中添加 ProductCondition 類對象，然后填充。

public class Product
{
        [PrimaryKey, AutoIncrement]
        public int id { get; set; }
        public string productCode { get; set; }
        public string description { get; set; }
        public string merchant { get; set; }
        public string remarks { get; set; }
        public ProductCondition productCondition { get; set; }            
}

在選擇器中添加 SelectedItem

<Picker Grid.Column="2"
        Title="Select Condition" 
        x:Name="picker" 
        FontSize="13"
        ItemDisplayBinding="{Binding conditionName}"
        SelectedItem="{Binding MyItemSelected,Mode="TwoWay"}"
        />

視圖模型

private ProductCondition myItemSelected = new ProductCondition();

public ProductCondition MyItemSelected
{
  get => myItemSelected;
  set
  {
     myItemSelected = value;
     OnPropertyChanged("MyItemSelected");
  }
}

然后在你導航之前

MyItemSelected = selectedProduct.productCondition;