Xamarin 表单数据绑定

Question

我刚开始使用 Xamarin，所以我决定创建一个项目，以便掌握事情的窍门。对于我的项目，我有这些详细信息页面，根据您选择的页面将显示图表和一些带有特定于该页面的数据的文本。我可以使用 bindingcontext 轻松显示文本，但我不知道如何为图表传递数据。我正在使用微图来生成图表。

ItemDetailPage.xaml.cs

using System; 
using Xamarin.Forms;
using System.Collections.Generic;
using Microcharts; 
using Entry = Microcharts.Entry;
using SkiaSharp; 

namespace TestApp
{
    public partial class ItemDetailPage : ContentPage
    {


        List<Microcharts.Entry> entries = new List<Microcharts.Entry>
        {
               new Entry(200)
                {
                    Label = "January",
                    ValueLabel = "200",
                    Color = SKColor.Parse("#266489")
                },
                new Entry(400)
                {
                    Label = "February",
                    ValueLabel = "400",
                    Color = SKColor.Parse("#68B9C0")
                },
                new Entry(-100)
                {
                    Label = "March",
                    ValueLabel = "-100",
                    Color = SKColor.Parse("#90D585")
                }

        };

        ItemDetailViewModel viewModel;

        // Note - The Xamarin.Forms Previewer requires a default, parameterless constructor to render a page.
        public ItemDetailPage()
        {

            Initialize(null); 


        }

        public ItemDetailPage(ItemDetailViewModel viewModel)
        {
            Initialize(viewModel); 
        }

        public void Initialize(ItemDetailViewModel viewModel) {
            InitializeComponent(); 
            Chart1.Chart = new RadialGaugeChart { Entries = entries }; 
            if (viewModel == null) { 
                var item = new Item
                {
                    Text = "Item 1",
                    Description = "This is an item description."
                };

                viewModel = new ItemDetailViewModel(item);

                Console.WriteLine(item.Text);


            }

            BindingContext = viewModel;



        }



    }
}

ItemDetailPage.xaml

    <?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:forms = "clr-namespace:Microcharts.Forms;assembly=Microcharts.Forms" x:Class="TestApp.ItemDetailPage" Title="{Binding Title}">
      <ContentPage.Content> 

        <StackLayout> 


                <Label TextColor="#77d065" FontSize = "20" Text="{Binding Item.Text}" />
                <Label TextColor="#77d065" FontSize = "20" Text="{Binding Item.Info}" />
                <forms:ChartView x:Name="Chart1" HeightRequest = "150"/>  

        </StackLayout>



</ContentPage.Content>
</ContentPage>

ItemDetailViewModel.cs

使用系统；

namespace TestApp
{
    public class ItemDetailViewModel : BaseViewModel
    {
        public Item Item { get; set; }
        public ItemDetailViewModel(Item item = null)
        {
            Title = item?.Text;
            Item = item;
        }
    }
}

ItemsPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace TestApp
{
    public partial class ItemsPage : ContentPage
    {
        ItemsViewModel viewModel;

        public ItemsPage()
        {
            InitializeComponent();

            BindingContext = viewModel = new ItemsViewModel();
        }

        async void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
        {
            var item = args.SelectedItem as Item;
            if (item == null)
                return;

            await Navigation.PushAsync(new ItemDetailPage(new ItemDetailViewModel(item)));

            // Manually deselect item
            ItemsListView.SelectedItem = null;
        }

        async void AddItem_Clicked(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new NewItemPage());
        }

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

            if (viewModel.Items.Count == 0)
                viewModel.LoadItemsCommand.Execute(null);
        }
    }
}

项目列表

   items = new List<Item>();
        var mockItems = new List<Item>
        {
            new Item { Id = Guid.NewGuid().ToString(), Text = "First item", Description="This is an item description.", Info = "Some More Info", label1 = "value1" },
            new Item { Id = Guid.NewGuid().ToString(), Text = "Second item", Description="This is an item description.",label1 = "value2" },
            new Item { Id = Guid.NewGuid().ToString(), Text = "Third item", Description="This is an item description.", label1 = "value3" },
            new Item { Id = Guid.NewGuid().ToString(), Text = "Fourth item", Description="This is an item description." },
            new Item { Id = Guid.NewGuid().ToString(), Text = "Fifth item", Description="This is an item description." },
            new Item { Id = Guid.NewGuid().ToString(), Text = "Sixth item", Description="This is an item description." },
        };

因此，例如我的目标是让图表中条目之一的标签对应于 item 的 label1 值。

如果有人可以为我指明如何完成此任务的正确方向，那就太好了。

Answer 1

您在方法Initialize(...) 中获得了ItemDetailViewModel，因此您可以使用从ItemsPage 传递的项目来自定义您的图表，例如：

// Do not use the default entries
Chart1.Chart = new RadialGaugeChart(); //{ Entries = entries };

// Modify the entry in entries(for instance the first one)
var singleEntry = entries[0];

Microcharts.Entry entry = new Microcharts.Entry(float.Parse(viewModel.Item.label1))
{
    Label = singleEntry.Label,
    ValueLabel = viewModel.Item.label1,
    Color = singleEntry.Color
};
entries[0] = entry;
// At last initialize the chart's Entries 
Chart1.Chart.Entries = entries;

Answer 2

只需添加此行并将此示例中要说的大小设置为 20f，但可以是为您服务的任何人

Chart1.Chart.LabelTextSize = 30f;