Xamarin.Forms:Oxyplot占用整个页面

Question

我已经使用Xamarin.Forms中的oxyplot成功生成了一个情节,但是我无法阻止整个页面的氧气图.

我在旋转木马的其他页面上使用stacklayout,并且在每个页面上都有一个横幅作为嵌入式stacklayout,并且希望将绘图显示在下面的嵌入式stacklayout中.

但横幅短暂出现,然后由氧气图写过.

我发现引用Grid应该使用Grid而不是stacklayout,因为存在已知问题,但网格也不起作用.

任何帮助感激不尽!这可能是一个约束性问题,例如,如果我删除Model ="{Binding Model}"它仍然有效!它忽略了HeightRequest ="100"而只是填充页面.我显然在这里遗漏了一些东西.

这是xaml代码,我已经注释掉了网格尝试,"oxy:PlotView"中的各种选项是我尝试的最后一个:

<?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代码:

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

Answer 1

就像我们在评论部分中提到的那样,整个页面Content正在被替换为PlotView.此外,您的绑定已被破坏.所以,这里有一些关于如何做的示例代码:

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