Xamarin.Forms：Oxyplot占據整個頁面

Question

我已經在Xamarin.Forms中使用oxyplot成功生成了一個圖，但是我無法停止oxyplot占用整個頁面。

我正在輪播中的其他頁面上使用stacklayout，並且在每個頁面上都有一個橫幅作為嵌入式stacklayout，並希望該圖出現在該頁面下方的嵌入式stacklayout中。

但是橫幅會短暫出現，然后由oxyplot覆蓋。

我發現存在這樣的事實，即由於存在已知問題，應該使用Grid而不是stacklayout，但是grid也不起作用。

任何幫助表示感謝！ 這可能是一個綁定問題，例如，如果我刪除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;
    }
}

Answer 2

我也為這個問題而苦惱，而jsanalytics解決方案是正確的。 我注意到使用BindingContext = this; 並且在頁面中創建Model屬性不起作用！ Model屬性必須是單獨的Viewmodel類中的屬性。

此代碼不起作用：

XAML：

<StackLayout>
    <Button Text="Update" x:Name="cmdUpdate" Clicked="cmdUpdate_Clicked" />
    <oxy:PlotView Model="{Binding Model}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"/>
</StackLayout>

CS：

public partial class MainPage : ContentPage
{
    public PlotModel Model = ExampleGenerator.LineSeries();

    public MainPage()
    {
        InitializeComponent();

        BindingContext = this;
    }
}