Xamarinを使用したリストビュー内のマイクロチャート

Question

私はxamarin.formsを使用しています。リストビュー内でグラフを作成する必要があります。

これは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私はMVVMパターンhere on this linkを使用して良い例がある言及したブログ記事でも

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 
    }; 
} 

。