Xamarin.Forms

Question

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

这是我的collection视图

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

这是我分配给 collectionview

的内容

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

ReportsClass item = new ReportsClass();

item.chart = new MainPageViewModel();

newsKidList.Add(item);

Kids.ItemsSource = newKidList;

这是我的报告Class

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

    }

更新

我的报告 Class 已更改

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 移出扩展器但仍在 collection 视图中时，它确实出现了。

更新

我愿意接受 collection 视图的替代方案，因为 collection 视图有时会出现不良行为。

我确实让我的 oxplot 出现了，但是使用了 Expander Tapped 属性 Tapped="Expander_Tapped" 我会再次调用数据，但是它会关闭扩展器，因为它会抓取 collection 的数据再次查看。

Answer 1

对于未来的读者：有问题的问题已通过 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.

Xamarin.Forms - oxyplot 未显示在 CollectionView 中

Xamarin.Forms - oxyplot not displaying inside CollectionView

c#

xamarin

oxyplot