Xamarin을 사용한 목록보기의 마이크로 차트

Question

저는 xamarin.forms를 사용하고 있으며, 목록보기 내부에 그래프를 작성해야하며, microcharts를 사용하여 listview 내부에서 그래프를 작성하는 방법이 필요합니다.

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

    } 
} 

}

이 코드를 시도했다가하지만 난 얻을 수

이 XAML에서 내 코드입니다 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 
    }; 
} 

.