Xamarin.Forms : Oxyplot이 전체 페이지 걸림

Question

Xamarin.Forms에서 oxyplot을 사용하여 플롯을 성공적으로 생성했지만 전체 페이지를 가져 오는 동안 oxyplot을 중지 할 수 없습니다.

나는 회전 목마의 다른 페이지에서 stacklayout을 사용하고 각각에 대해 포함 된 스택 레이아웃으로 배너를 가지고 있으며 그 아래에 포함 된 스택 레이아웃에 플롯을 표시하려고합니다.

그러나 배너가 잠깐 나타난 다음 옥시 도트가 덮어 씁니다.

알려진 문제점이 있으므로 그리드가 stacklayout 대신 사용되어야한다는 사실에 대한 참조가 있지만 그리드가 작동하지 않습니다.

도움을 주신 모든 분들께 감사드립니다. 바인딩 문제 일 수 있습니다. 예를 들어 Model = "{Binding Model}"을 제거하면 작동합니다. HeightRequest = "100"을 무시하고 페이지를 채우고 있습니다. 나는 분명히 여기에 뭔가 빠져있다.

이

는 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" 
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입니다 : "옥시 : PlotView"나는 시도 마지막이다 코드 :

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