Question

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

这是我在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中的代码：

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文件中图表的名称。

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

Answer 1

您在ItemTemplate中有图表。可能有许多图表，他们可能没有相同的名称。正确的方法是在ItemTemplate中使用绑定。

讨论了类似问题here。

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

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模式here on this link的好例子。

Listview中的微图表使用Xamarin

1 个答案: