Xamarin.Formsの枠線の幅

Question

私はXamarin.Formsを使用しています。私はImageです。私はCorner RadiusとBorder Widthとボーダーしたいです。それはできますか？ Frameを使用しようとしています。良いですが、それはBorder Width = 1しかなく、これを変更することはできません。私はEffectについて知っているが、私はそれらを使いたくない。私はそれを行うことはできますか？

Answer 1

エフェクトを使用して独自の実装を作成することも、FreshEssentialsオープンソースライブラリを拡張することもできます。それらにはAdvancedFrameというコントロールがあり、これはすべてのプラットフォームでFrameコントロール用のカスタムレンダラーを提供します。

各プラットフォーム固有のプロジェクトを見ると、丸い角のサポートのためのベジェパスを作成するクラスAdvancedFrameRendererに気付くでしょう。各プラットフォームのDrawメソッド（iOS、Android）に飛び込むだけで、ストロークの幅を設定する方法がわかります。

ストロークの幅が既にコード内に定義されているため、Androidから開始するのが最も簡単です（on this line）。 AdvancedFrameコントロールのプロパティを作成して、各コントロールに異なる幅を持たせるだけです。私は、どのようにiOS上でストロークの幅を設定するのかはわかりませんが、UIBezierPathを使用しています。

Answer 2

あなたはこのような何かを試すことができます。

<Frame HasShadow="False" CornerRadius="25" Padding="2" BackgroundColor="#F69927"> 
    <Frame HasShadow="False" CornerRadius="23" BackgroundColor="White" Padding="12"> 
     <StackLayout Orientation="Horizontal" HorizontalOptions="CenterAndExpand" VerticalOptions="Start"> 
      <!-- Content -->     
     </StackLayout> 
    </Frame> 
</Frame> 

Answer 3

私は、Android用FrameRendererで踊ってみましたし、私はいくつかの解決策を見つけました。 MyFrameRendererクラス内で境界線の色、幅、角の半径の変数を表示すると、MyFrame：Frameクラスを作成して自分のフレームタイプのみに影響を与えなければなりませんでした。私の目的のために十分に近い...だから：

namespace PROJECT 
{ 
    public class MyFrame : Xamarin.Forms.Frame 
    { 
     public static float myFrameWidth = 2; 
     public static float myCornerRadius = 12; 
     public static Color myFrameColor = Color.Red; 
     public static Color myBackgroundColor = Color.Black; 

     public MyFrame() { } 
    } 
} 

...

[assembly: ExportRenderer(typeof(PROJECT.MyFrame), typeof(PROJECT.Droid.MyFrameRenderer))] 
namespace PROJECT.Droid 
{ 
    class MyFrameRenderer : FrameRenderer 
    { 
     protected override void OnDraw(Android.Graphics.Canvas canvas) 
     { 
      // canvas contains image of standard outline 
      // to "hide" it, not efficent but sometimes "close enough solution" 
      // is to overlay that outline by new one in our's page background color 
      // then draw a new one in prefered style 
      // or... just draw thicker one over the old 

      var my1stPaint = new Android.Graphics.Paint(); 
      var my2ndPaint = new Android.Graphics.Paint(); 
      var backgroundPaint = new Android.Graphics.Paint(); 

      my1stPaint.AntiAlias = true; 
      my1stPaint.SetStyle(Paint.Style.Stroke); 
      my1stPaint.StrokeWidth = MyFrame.myFrameWidth + 2; 
      my1stPaint.Color = MyFrame.myFrameColor.ToAndroid(); 

      my2ndPaint.AntiAlias = true; 
      my2ndPaint.SetStyle(Paint.Style.Stroke); 
      my2ndPaint.StrokeWidth = MyFrame.myFrameWidth; 
      my2ndPaint.Color = MyFrame.myBackgroundColor.ToAndroid(); 

      backgroundPaint.SetStyle(Paint.Style.Stroke); 
      backgroundPaint.StrokeWidth = 4; 
      backgroundPaint.Color = MyFrame.myBackgroundColor.ToAndroid(); 

      Rect oldBounds = new Rect(); 
      canvas.GetClipBounds(oldBounds); 

      RectF oldOutlineBounds = new RectF(); 
      oldOutlineBounds.Set(oldBounds); 

      RectF myOutlineBounds = new RectF(); 
      myOutlineBounds.Set(oldBounds); 
      myOutlineBounds.Top += (int)my2ndPaint.StrokeWidth+3; 
      myOutlineBounds.Bottom -= (int)my2ndPaint.StrokeWidth+3; 
      myOutlineBounds.Left += (int)my2ndPaint.StrokeWidth+3; 
      myOutlineBounds.Right -= (int)my2ndPaint.StrokeWidth+3; 

      canvas.DrawRoundRect(oldOutlineBounds, 10, 10, backgroundPaint); //to "hide" old outline 
      canvas.DrawRoundRect(myOutlineBounds, MyFrame.myCornerRadius, MyFrame.myCornerRadius, my1stPaint); 
      canvas.DrawRoundRect(myOutlineBounds, MyFrame.myCornerRadius, MyFrame.myCornerRadius, my2ndPaint); 

      base.OnDraw(canvas); 
     } 

     protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Frame> e) 
     { 
      base.OnElementChanged(e); 
     } 
    } 
}