Xamarin.Forms: Oxyplot takes entire page

Question

I have successfully generated a plot using oxyplot in Xamarin.Forms, but I cannot stop oxyplot taking the entire page.

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.

But the banner briefly appears and then is over written by the oxyplot.

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.

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.

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>

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

Answer 1

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

View Model:

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

I also struggle with this problem, and the jsanalytics solution is correct. I noticed that using BindingContext = this; and creating a Model property in the page is not working! The Model property needs to be a property in a separate Viewmodel class.

This code does not work:

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