使用Xamarin的Listview中的微图 [英] Microcharts in Listview Using Xamarin

问题描述

我正在使用xamarin.forms，我需要在listview内创建图形，如何使用微图在listview内创建图形。

I'm using xamarin.forms and I need to create graphs inside of listview, how to create graphs inside of listview using microcharts.

这是我的代码xaml：

This is my code in xaml:

            <ListView.ItemTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout Orientation="Vertical">

                            <!--<StackLayout.GestureRecognizers>
                                <TapGestureRecognizer
                                    Tapped="TargetList_Tapped"/>
                            </StackLayout.GestureRecognizers>-->
                            <Grid
                                  HeightRequest="10"/>
                            <customRenderer:CustomFrame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="White" HeightRequest="30" Padding="15">

                                <StackLayout Orientation="Vertical" >
                                    <!--<Image x:Name="sam"/>-->


                                    <Label Text="{Binding AreaNo}"
                                       TextColor="Black"
                                       Font="Bold"/>

                                    <StackLayout Margin="0, -5, 0, 0" Orientation="Horizontal">
                                        <forms:ChartView x:Name="Chart1" HeightRequest="150"/>
                                        <Label Text="Last Covered On:" 
                                           TextColor="Black"
                                           Font="10"
                                           FontAttributes="Bold"
                                           Opacity="0.6"/>

                                        <Label Text="{Binding DateCovered}" 
                                           TextColor="Black"
                                           Font="10"
                                           FontAttributes="Bold"
                                           Opacity="0.6"/>
                                    </StackLayout>

                                </StackLayout>

                            </customRenderer:CustomFrame>
                            <customRenderer:CustomFrame Padding="0" Margin="0, -10, 0, 0">
                                <Image x:Name="sampleImage" Source="Rectangle_Inactive.png" HorizontalOptions="FillAndExpand" Aspect="AspectFill"/>
                            </customRenderer:CustomFrame>


                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

这是我在xaml.cs中的代码：

This is my code in xaml.cs:

namespace PrismUnityApp6.Views
{
public partial class MainPage : ContentPage
{

    List<Entry> entries = new List<Entry>
    {
        new Entry(200)
        {
            Color = SKColor.Parse("#008000"),
        },
        new Entry(400)
        {
            Color = SKColor.Parse("#FFFFFF")
        }

    };

    public MainPage()
    {

        InitializeComponent();

        Chart1.Chart = new RadialGaugeChart { Entries = entries };

    }
}

}

我尝试了这段代码，但是使用listview时无法在xaml.cs文件中获得图表的名称。

I tried this code but I can't get the name of the chart in xaml.cs file while using listview.

任何建议将不胜感激。谢谢。

Any suggestion will be appreciated. Thank you.

推荐答案

您在ItemTemplate中拥有图表。可能有很多图表，但它们的名称可能不同。正确的方法是在ItemTemplate中使用绑定。

You have chart inside ItemTemplate. Possibly there could many charts and they can't have same name. Correct approach is to use binding inside ItemTemplate.

讨论了类似的问题此处。

该示例仅用于演示其可能如何工作。在尝试了此演示之后，请确保您学习了MVVM模式并在项目中使用了它。

This example is just for demonstration how it could possibly work. After you try this demo make sure you learn MVVM pattern and use it in your project.

MainPage.xaml

<ContentPage.Content>
    <ListView
       x:Name="MyListview">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <microcharts:ChartView Chart="{Binding ChartData}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    List<MyChart> MyCharts;

    public MainPage()
    {
        InitializeComponent();
        MyCharts = new List<MyChart>();
        PopulateCharts();
    }

    private void PopulateCharts()
    {
        MyCharts.Add(new MyChart() { ChartData = Chart1 });
        MyCharts.Add(new MyChart() { ChartData = Chart2 });
        MyListview.ItemsSource = MyCharts;
    }

    public class MyChart
    {
        public Chart ChartData { get; set; }
    }

    public Chart Chart1 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "iOS",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "Shared",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.White
    };


    public Chart Chart2 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "Android",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "UWP",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.Yellow
    };
}

我在博客文章中也提到了使用MVVM模式的一个很好的例子在此链接上。

Also in the blog post that I mentioned there is a nice example using MVVM pattern here on this link.

这篇关于使用Xamarin的Listview中的微图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！