Xamarin.Forms - oxyplot not displaying inside CollectionView

Question

. 。 Answers to this question are eligible for a +500 reputation bounty. user979331 is looking for an . 。

I am using Oxyplot and honestly its the best chart builder out there for xamarin forms. I was able to build my chart outside of the collection view just to see what it would look like. Now I want to add in a collection view but it is not appearing, what am I doing wrong?

Here is my collectionview

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

Here is what I am assigning to my collectionview

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

ReportsClass item = new ReportsClass();

item.chart = new MainPageViewModel();

newsKidList.Add(item);

Kids.ItemsSource = newKidList;

Here is my ReportsClass

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

And here is my view model

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

    }

UPDATE

My Reports Class changed

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

This code in my 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;

Still nothing is showing

UPDATE

I didn't really think of it at the time, but my oxyplot is inside an expander:

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

When I put my oxyplot out the extender but still inside the collectionview it does appear.

UPDATE

I am open to an alternative to the collectionview seeing as the collectionview sometimes has unwanted behavour.

I did get my oxplot to appear but using Expander Tapped attribute Tapped="Expander_Tapped" and I would call the data again, but it would close the expander because it would be grabbing the data for the collection view again.

Answer 1

For future readers: The issues in question are solved by Error This PlotModel is already in use by some other PlotView control in OxyPlot chart Q&A.

---

• "I did get my oxyplot to appear by using Expander Tapped attribute..."

In view:

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

In code-behind:

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

---

• "but it would close the expander because it would be grabbing the data for the collection view again."

Add lines to 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;
    }
    ...
}