Xamarin.Forms PCL/SAPペイントコード3のカスタムレンダリング

Question

みんな！私はPaintcode 3を使って作業していて、Xamarin.Forms（PCL/SAP）プロジェクトで働いています。私は今すぐサンプルプロジェクトを実行しており、ペンキコード3にカスタム図面があります。しかし、paintcodeはネイティブにC＃Xamarinで動作すると思います。しかし、私はカスタムレンダラーを作成して、私のxamarin.formsプロジェクトを作成し、カスタムペイントコード3を抽出し、レンダリングを作成してそこに貼り付けることができると考えていました。コードを投稿する前に私の質問は、このアプローチが前に行われているか誰かがこれを試したことですか？

私のメインページ：

public class MainPageCS :ContentPage 
{ 
    public MainPageCS() 
    { 

     // The root page of your application 

     Title = "PCTest"; 
     Padding = new Thickness(0, 20, 0, 0); 

     Content = new TestView 
     { 


      // draw object will go here once i render it. 

      BackgroundColor = Color.Blue, 
      HorizontalOptions = LayoutOptions.Center, 
      VerticalOptions = LayoutOptions.Center 

     }; 

    } 

} 

テストビューがXamarin.formsビューから継承するシンプルなコンテンツページここ

は私のコードは、これまでのところ、本当にシンプルなものです。

public class TestView : View 
{ 
    public TestView() 
    { 
    } 
} 

は、私が作成したpaintcodeプロジェクトで今すぐ簡単なようだが、それはここで不気味取得する場所ここです。ここにイメージがあります。 PaintCodeProjectImage

ここで、その画像を生成したコードを示します。 TestChatBox.cs

namespace PaintCodeStyleKitTest 
{ 
[Register("TestChatBox")] 
public class TestChatBox : NSObject 
{ 

    //// Cache 

    private static UIImage imageOfChatIcon; 
    private static NSObject[] chatIconTargets; 

    //// Initialization 

    static TestChatBox() 
    { 

     DrawChatIcon(); 
    } 

    //// Drawing Methods 

    public static void DrawChatIcon() 
    { 

     //// Oval 2 Drawing 
     var oval2Path = new UIBezierPath(); 
     oval2Path.MoveTo(new CGPoint(105.65f, 43.5f)); 
     oval2Path.AddCurveToPoint(new CGPoint(55.59f, 56.97f), new CGPoint(87.51f, 43.64f), new CGPoint(69.43f, 48.13f)); 
     oval2Path.AddCurveToPoint(new CGPoint(35.44f, 96.92f), new CGPoint(38.57f, 67.85f), new CGPoint(31.85f, 82.81f)); 
     UIColor.Gray.SetStroke(); 
     oval2Path.LineWidth = 9.0f; 
     oval2Path.LineCapStyle = CGLineCap.Round; 
     oval2Path.Stroke(); 


     //// Bezier 2 Drawing 
     var bezier2Path = new UIBezierPath(); 
     bezier2Path.MoveTo(new CGPoint(166.1f, 48.28f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(166.1f, 131.72f), new CGPoint(199.3f, 71.32f), new CGPoint(199.3f, 108.68f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(89.68f, 147.91f), new CGPoint(145.34f, 146.13f), new CGPoint(116.5f, 151.53f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(43.5f, 169.5f), new CGPoint(71.56f, 159.66f), new CGPoint(43.5f, 169.5f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(58.33f, 138.86f), new CGPoint(43.5f, 169.5f), new CGPoint(53.16f, 153.11f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(45.9f, 131.72f), new CGPoint(53.95f, 136.8f), new CGPoint(49.78f, 134.42f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(45.9f, 48.28f), new CGPoint(12.7f, 108.68f), new CGPoint(12.7f, 71.32f)); 
     bezier2Path.AddCurveToPoint(new CGPoint(166.1f, 48.28f), new CGPoint(79.09f, 25.24f), new CGPoint(132.91f, 25.24f)); 
     bezier2Path.ClosePath(); 
     UIColor.Red.SetStroke(); 
     bezier2Path.LineWidth = 9.0f; 
     bezier2Path.Stroke(); 
    } 

    //// Generated Images 

    public static UIImage ImageOfChatIcon 
    { 
     get 
     { 
      if (imageOfChatIcon != null) 
       return imageOfChatIcon; 

      UIGraphics.BeginImageContextWithOptions(new CGSize(210.0f, 190.0f), false, 0); 
      TestChatBox.DrawChatIcon(); 
      imageOfChatIcon = UIGraphics.GetImageFromCurrentImageContext(); 
      UIGraphics.EndImageContext(); 

      return imageOfChatIcon; 
     } 
    } 

    //// Customization Infrastructure 

    [Outlet] 
    public NSObject[] ChatIconTargets 
    { 
     get { return chatIconTargets; } 
     set 
     { 
      chatIconTargets = value; 
      foreach (NSObject target in value) 
      { 
       target.PerformSelector(new ObjCRuntime.Selector("setImage:"), ImageOfChatIcon, 0); 
      } 
     } 
    } 

} 

ここで、私は単純なイメージを完成したので、私のためにpaintcodeを生成しました。 生成されたコードは、私がしようとすると、これは、しかし、drawメソッドをオーバーライドし、おそらく成功した絵を描く

using System; 
    using Xamarin.Forms; 
    using CoreGraphics; 
    using UIKit; 
    using System.Drawing; 
    using Foundation; 
    using PaintCodeStyleKitTest; 
    namespace PCTest 
    { 
     public class Test : UIView 
     { 
      public Test() 
      { 
       TestChatBox.DrawChatIcon(); 
      } 

      public override void Draw(CGRect rect) 
      { 

       base.Draw(rect); 
       TestChatBox.DrawChatIcon(); 


      } 


     } 
    } 

私のTest.csを参照してください絵を描くためにのdrawRectメソッドをオーバーライドする必要がありますpaintcodeのマニュアルを読んでから、テストレンダラーファイルを使用してカスタムレンダリングを完了します。

using System; 
using Xamarin.Forms; 
using PCTest; 
using UIKit; 
using Xamarin.Forms.Platform.iOS; 
using PaintCodeStyleKitTest; 
using PCTest.iOS; 
using Foundation; 
using UIKit; 
using CoreGraphics; 

[assembly: ExportRenderer(typeof(TestView), typeof(TestRenderer))] 
namespace PCTest.iOS 
{ 
    public class TestRenderer : ViewRenderer<TestView, Test> 
    { 
     Test txt; 
     protected override void OnElementChanged(ElementChangedEventArgs <TestView> e) 
      { 
       base.OnElementChanged(e); 
     if (Control == null) 
     { 
      //txt = new Test(tes); 
      Test tests = new Test(); 

      SetNativeControl(new Test()); 

     } 
      if (e.OldElement != null) 
      { 
       return; 
      } 

     } 


} 


} 

サンプルアプリケーションを実行しても、ビューに描画されるものはありません。なぜ私は不思議です。私はサンプルビューをレンダリングするかどうかを確認するために単純なコンテンツページを適用しようとしましたが、レンダリングしなかったので、誰かがこれについて正しい方向に向けることができません。私のアプローチが間違っていたことは何ですか？助けてください！

Answer 1

あなたのカスタムコントロールに任意の次元を割り当てていないと、それは0,0のサイズで0,0に存在するように、カスタムUIViewのためFrameが設定されていませんさん。

var test = new TestView 
{ 
    WidthRequest = 200, 
    HeightRequest = 200, 
    BackgroundColor = Color.Blue, 
    HorizontalOptions = LayoutOptions.Center, 
    VerticalOptions = LayoutOptions.Center 
};