Xamarin.Forms - oxyplot 不在 CollectionView 内显示

Question

我正在使用 Oxyplot，老实说，它是用于 xamarin 表单的最佳图表生成器。我能够在集合视图之外构建我的图表，只是为了看看它会是什么样子。现在我想添加一个集合视图，但它没有出现，我做错了什么？

这是我的收藏视图

<CollectionView x:Name="Kids">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                     <oxy:PlotView Model="{Binding chart}" HeightRequest="200" WidthRequest="100" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
</CollectionView>

这是我分配给我的收藏视图的内容

List<ReportsClass> newKidList = new List<ReportsClass>();

ReportsClass item = new ReportsClass();

item.chart = new MainPageViewModel();

newsKidList.Add(item);

Kids.ItemsSource = newKidList;

这是我的 ReportsClass

public class ReportsClass
    {
        public MainPageViewModel chart { get; set; }
        
    }

这是我的视图模型

public class MainPageViewModel
    {
        public PlotModel Model { get; set; }

        

        public MainPageViewModel()
        {
            CategoryAxis xaxis = new CategoryAxis();
            xaxis.Position = AxisPosition.Bottom;
            xaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            xaxis.MinorTickSize = 0;
            xaxis.MajorTickSize = 0;
            xaxis.TextColor = OxyColors.Gray;
            xaxis.FontSize = 10.0;
            xaxis.Labels.Add("S");
            xaxis.Labels.Add("M");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("W");
            xaxis.Labels.Add("T");
            xaxis.Labels.Add("F");
            xaxis.Labels.Add("S");
            xaxis.GapWidth = 10.0;
            

            LinearAxis yaxis = new LinearAxis();
            yaxis.Position = AxisPosition.Left;
            yaxis.MajorGridlineStyle = LineStyle.None;
            xaxis.MinorGridlineStyle = LineStyle.None;
            yaxis.MinorTickSize = 0;
            yaxis.MajorTickSize = 0;
            yaxis.TextColor = OxyColors.Gray;
            yaxis.FontSize = 10.0;
            yaxis.FontWeight = FontWeights.Bold;
            

            ColumnSeries s2 = new ColumnSeries();
            s2.TextColor = OxyColors.White;

            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(20),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(30),
                Color = OxyColor.Parse("#02cc9d")

            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(40),
                Color = OxyColor.Parse("#02cc9d")
            });
            s2.Items.Add(new ColumnItem
            {
                Value = Convert.ToDouble(50),
                Color = OxyColor.Parse("#02cc9d")
            });


            Model = new PlotModel();
            Model.Axes.Add(xaxis);
            Model.Axes.Add(yaxis);
            Model.Series.Add(s2);
            Model.PlotAreaBorderColor = OxyColors.Transparent;
        }

    }

更新

我的报告类发生了变化

public class ReportsClass
        {
            public PlotModel chart { get; set; }
            
        }

我的 xaml.cs 中的这段代码

List<ReportsClass> newKidList = new List<ReportsClass>();
    
    ReportsClass item = new ReportsClass();
    
    MainPageViewModel mv = new MainPageViewModel();

    item.chart = mv.Model;
    
    newsKidList.Add(item);
    
    Kids.ItemsSource = newKidList;

什么都没有显示

更新

当时我并没有真正想到，但我的 oxyplot 在扩展器中：

<CollectionView x:Name="Kids">
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <xct:Expander>
                        <xct:Expander.Header>
                            <Frame Padding="0" CornerRadius="10" Margin="5" BackgroundColor="White" HasShadow="False">
                                <StackLayout>
                                    <Grid BackgroundColor="#f8f8f8">
                                        <StackLayout Padding="5" Orientation="Horizontal">
                                            <Image x:Name="kidProfile" Source="{Binding image}" WidthRequest="75" HeightRequest="75" HorizontalOptions="Start" Aspect="AspectFill" />
                                            <StackLayout Orientation="Vertical">
                                                <Label Text="{Binding first_name}"></Label>
                                                <StackLayout Orientation="Horizontal">
                                                    <Label Text="Grade: " FontSize="Small"></Label>
                                                    <Label Text="{Binding grade}" FontSize="Small"></Label>
                                                </StackLayout>
                                            
                                            </StackLayout>
                                        </StackLayout>
                                        <Image Margin="20" HorizontalOptions="End" Source="arrowDown.png" HeightRequest="15">
                                            <Image.GestureRecognizers>
                                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>
                                            </Image.GestureRecognizers>
                                        </Image>
                                    </Grid>
                                </StackLayout>
                            </Frame>
                        </xct:Expander.Header>
                        <Grid Padding="10">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <StackLayout x:Name="KidData">
                                    
                                    <Grid WidthRequest="150" HeightRequest="150" HorizontalOptions="Center" VerticalOptions="Center" Padding="0,10,0,20">
                                        <oxy:PlotView HeightRequest="200" WidthRequest="200" Model="{Binding chart}" Grid.Column="0" Grid.Row="0" />
                                    </Grid>
                                    
                                </StackLayout>
                            </Grid>
                    </xct:Expander>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

当我把我的 oxyplot 放在扩展器之外，但它仍然在 collectionview 中时，它确实出现了。

更新

我对collectionview 的替代方案持开放态度，因为collectionview 有时会出现不受欢迎的行为。

我确实让我的 oxplot 出现，但使用 Expander Tapped 属性 Tapped="Expander_Tapped" 我会再次调用数据，但它会关闭扩展器，因为它将再次为集合视图抓取数据。

Answer 1

对于未来的读者：有问题的问题由Error This PlotModel is already in use by some other PlotView control in OxyPlot chart Q&A 解决。

---

• “通过使用 Expander Tapped 属性，我确实让我的 oxyplot 出现了......”

在视图中：

<xct:Expander Tapped="Expander_Tapped" ...

在代码隐藏中：

void Expander_Tapped(System.Object sender, System.EventArgs e)
{
    ...
}

---

• “但它会关闭扩展器，因为它会再次抓取集合视图的数据。”

向 Expander_Tapped 添加行：

void Expander_Tapped(System.Object sender, System.EventArgs e)
{
    // --- ADD THESE LINES ---
    if (ReferenceEquals(sender, expander)) {
        // User is tapping the existing expander. Don't do anything special.
        return;
    }
    ...
}

---

涉及使用 OnPropertyChanged 的​​其他细节可以在其他问题的代码中看到。

或github ToolmakerSteve, repo OxyplotApp1。