Xamarin.Forms:Oxyplot 需要整个页面 [英] Xamarin.Forms: Oxyplot takes entire page
问题描述
我已经在 Xamarin.Forms 中使用 oxyplot 成功生成了一个绘图，但我无法阻止 oxyplot 占据整个页面.
I have successfully generated a plot using oxyplot in Xamarin.Forms, but I cannot stop oxyplot taking the entire page.
我在轮播中的其他页面上使用 stacklayout，并在每个页面上都有一个横幅作为嵌入式 stacklayout，并希望该图显示在其下方的嵌入式 stacklayout 中.
I am using stacklayout on other pages in a carousel, and have a banner as a embedded stacklayout on each and want to have the plot appear in an embedded stacklayout below that.
但是横幅短暂出现，然后被 oxyplot 覆盖.
But the banner briefly appears and then is over written by the oxyplot.
我发现参考了这样一个事实，即应该使用 Grid 而不是 stacklayout，因为存在已知问题，但 grid 也不起作用.
I found references to the fact that Grid should be used instead of stacklayout as there are known issues, but grid doesn't work either.
感谢收到任何帮助！这可能是一个绑定问题，例如，如果我删除 Model="{Binding Model}" 它仍然有效！它忽略了 HeightRequest="100" 而只是填充页面.我显然在这里遗漏了一些东西.
Any help gratefully received! It may be a binding issue, for example if I remove the Model="{Binding Model}" it stills works! And it is ignoring the HeightRequest="100" and just filling the page. I am obviously missing something here.
这是xaml代码，我已经注释掉了网格尝试，oxy:PlotView"中的各种选项是我最后尝试的:
This is the xaml code, I have commented out the grid attempt, and the various options in the "oxy:PlotView " are the last I tried:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="RentGuru2.PieCosts"
xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
Padding="0, 20, 0, 0"
BackgroundColor="#21b09c">
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Horizontal" BackgroundColor="#21b09c" HeightRequest="60">
<Image Source = "BannerLogo.png" />
<Label Text="Costs breakdown" FontSize="Large" TextColor="White" Margin="10" VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout HeightRequest="300">
<oxy:PlotView Model="{Binding Model}" VerticalOptions="Center" HorizontalOptions="FillAndExpand"
HeightRequest="100" WidthRequest="100" />
</StackLayout>
</StackLayout>
<!--<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Grid.Column ="0" Source = "BannerLogo.png" />
<Label Grid.Row="0" Grid.Column ="1" Text="Costs breakdown" FontSize="Large" TextColor="White" Margin="10" VerticalTextAlignment="Center"/>
<oxy:PlotView Grid.Row="1" Grid.ColumnSpan ="2" Model="{Binding Model}" VerticalOptions="Center" HorizontalOptions="Center" />
</Grid>-->
</ContentPage>
这是相关的 oxyplot xaml.cs 代码:
This is the relevant oxyplot xaml.cs code:
namespace RentGuru2
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class PieCosts : ContentPage
{
public PieCosts ()
{
InitializeComponent ();
}
protected override void OnAppearing()
{
Content = new PlotView
{
Model = CreatePieChart()
};
}
private PlotModel CreatePieChart()
{
var model = new PlotModel
{
Title = "Costs breakdown",
Padding = new OxyThickness(50, 30, 50, 40),
TitleFontSize = 22,
TitleColor = OxyColors.White
//Title = "",
//Padding = new OxyThickness(50, 30, 50, 40),
//TitleFontSize = 1,
//TitleColor = OxyColors.White,
};
var ps = new PieSeries
{
StrokeThickness = .25,
InsideLabelPosition = .8,
AngleSpan = 360,
StartAngle = 0,
LabelField = "{2:0.0}",
FontSize = 15,
TextColor = OxyColors.White
};
推荐答案
就像我们在评论部分提到的，整个页面的 Content 被一个 PlotView 替换.此外，您的绑定已损坏.所以，这里有一些关于如何做到这一点的示例代码:
Like we mentioned in the comments section, the entire page's Content is being replaced by a PlotView. Also, your binding is broken. So, here's some sample code on how to do it:
XAML:
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:App39"
xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms"
x:Class="App39.MainPage">
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="5*"/>
<RowDefinition Height="5*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Label Grid.Row="0"
Grid.ColumnSpan="2"
Text="My Sample App"
FontAttributes="Bold"
FontSize="Large"
VerticalOptions="Center"
HorizontalOptions="Center" />
<oxy:PlotView
Grid.Row="1"
Grid.Column="1"
Model="{Binding Model}"/>
<Image Grid.Row="2"
Grid.Column="0"
Source="pic111.jpg"
Aspect="Fill" />
<BoxView Grid.Row="1"
Grid.Column="0"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Color="LightBlue"/>
<BoxView Grid.Row="2"
Grid.Column="1"
HorizontalOptions="Fill"
VerticalOptions="Fill"
Color="LightSeaGreen"/>
</Grid>
</ContentPage.Content>
CS:
public partial class MainPage : ContentPage
{
SampleViewModel vm;
public MainPage()
{
InitializeComponent();
vm = new SampleViewModel();
BindingContext = vm;
}
}
查看模型:
public class SampleViewModel
{
public PlotModel Model { get; set; }
public SampleViewModel()
{
Model = GetModel();
}
private PlotModel GetModel()
{
var plotModel1 = new PlotModel();
plotModel1.Title = "Sample Pie Chart";
plotModel1.Background = OxyColors.LightGray;
var pieSeries1 = new PieSeries();
pieSeries1.StartAngle = 90;
pieSeries1.FontSize = 18;
pieSeries1.FontWeight = FontWeights.Bold;
pieSeries1.TextColor = OxyColors.LightGray;
pieSeries1.Slices.Add(new PieSlice("A", 12));
pieSeries1.Slices.Add(new PieSlice("B", 14));
pieSeries1.Slices.Add(new PieSlice("C", 16));
plotModel1.Series.Add(pieSeries1);
return plotModel1;
}
}
这篇关于Xamarin.Forms:Oxyplot 需要整个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
