如何在xamarin.forms的新页面内显示存储在Firebase RealtimeDataBase中的数据？

Question

我创建了一个RealTimeDatabase，其中存储了一些数据，例如公司名称。当我单击“存储数据”时，我进入一个选项卡式页面。那么，我如何仅可视化公司名称（如tabbedPage的标题）？

Answer 1

您只需要从RealtimeDataBase获取数据，然后将其绑定到您的页面，

例如：

模型公司：

public class Company
{
    public int CompanyId { get; set; }
    public string CompanyName { get; set; }

}

创建FireBaseHelp，操作firabase：

public class FirebaseHelper
{
    FirebaseClient firebase = new FirebaseClient("https://androiddemo-f9385.firebaseio.com/");

    public async Task<List<Company>> GetAllCompanies()
    {

        return (await firebase
          .Child("Companies")
          .OnceAsync<Company>()).Select(item => new Company
          {
              CompanyName = item.Object.CompanyName,
              CompanyId = item.Object.CompanyId
          }).ToList();
    }

    public async Task AddCompay(int companyId,string companyName)
    {

        await firebase
          .Child("Companies")
          .PostAsync(new Company() { CompanyId = companyId, CompanyName = companyName});
    }

    public async Task<Company> GetCompany(int companyId)
    {
        var allCompanies = await GetAllCompanies();
        await firebase
          .Child("Companies")
          .OnceAsync<Company>();
        return allCompanies.Where(a => a.CompanyId == companyId).FirstOrDefault();
    }

}

创建选项卡式页面CompanyPage：

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CompanyPage : TabbedPage
{
    public CompanyPage(List<Company> allCompanies)
    {
        foreach (var item in allCompanies)
        {
            Children.Add(new MyCompanyPage(item));
        }
    }
}

创建MyCompanyPage.xaml.cs，选项卡式页面的子级（在此处设置BindingContext来绑定数据）。

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class MyCompanyPage : ContentPage
{
    public MyCompanyPage(Company company)
    {
        InitializeComponent();
        BindingContext = company;
    }
}

MyCompanyPage.xaml，根据需要绑定companyName：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:d="http://xamarin.com/schemas/2014/forms/design"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         Title="{Binding CompanyName}"
         x:Class="XamarinFirebase.MyCompanyPage">
 <ContentPage.Content>
    <StackLayout>
        <Label Text="{Binding CompanyName}"
            VerticalOptions="CenterAndExpand" 
            HorizontalOptions="CenterAndExpand" />
    </StackLayout>
 </ContentPage.Content>
</ContentPage>

然后在MainPage中，当您单击按钮时，它将查询FireBase并获取数据。

  private async void BtnRetrive_Clicked(object sender, EventArgs e)
    {          
        var allCompanies = await firebaseHelper.GetAllCompanies();
        Navigation.PushAsync(new CompanyPage(allCompanies));
    }

您可以阅读Data Binding和这是效果的gif（添加三个cpmpanies并将其显示在tabbedpage中）：