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>

这是相关的oxyplotxaml.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 class.

中成为属性

此代码无效：

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

Xamarin.Forms: Oxyplot 占据整个页面

Xamarin.Forms: Oxyplot takes entire page

c#

xaml

oxyplot

xamarin.forms