Xamarin.Forms - oxyplot 不在 CollectionView 内显示
Posted
技术标签:
【中文标题】Xamarin.Forms - oxyplot 不在 CollectionView 内显示【英文标题】：Xamarin.Forms - oxyplot not displaying inside CollectionView 【发布时间】：2021-12-28 15:25:21 【问题描述】：我正在使用 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" 我会再次调用数据，但它会关闭扩展器，因为它将再次为集合视图抓取数据。
【问题讨论】：
Model="Binding chart.Model"
现在试试这个@Jason
@Jason，它仍然没有工作，因为条形图仍然没有显示
您是否在其他测试中使用了相同的模型类？您是否为图表使用了相同大小的容器？
你能做一个公开的 github repo 来演示 oxyplot 的使用和 bug 吗？
【参考方案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。
【讨论】：
以上是关于Xamarin.Forms - oxyplot 不在 CollectionView 内显示的主要内容，如果未能解决你的问题，请参考以下文章
Xamarin.Forms - 创建新页面时不存在InitializeComponent