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>

项目详细信息查看Model.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

你有ItemDetailViewModel方法的Initialize(...)，所以你可以使用从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;