Frame OutlineColorはAndroid、Xamarinフォームでのみ動作しません。

Question

私はXamarinフォームでアプリケーションを開発していますが、私は長い間前に修正するべきバグに直面しました。 フレームのアウトラインを設定しようとしましたが、iOSではうまく動作しますが、アンドロイドでは動作しません。

ここはフレーム用の私のxamlです。

<Frame 
    HasShadow="true" 
    CornerRadius="10" 
    OutlineColor="Red" 
    BackgroundColor="White"> 
    <StackLayout 
     Orientation="Horizontal"> 
     <Label 
     Text="TEST" 
     VerticalOptions="Center"/> 
     <Label 
     Text="For OUTLINE" 
     VerticalOptions="Center"/> 
    </StackLayout> 
</Frame> 

ありがとうございました！

Answer 1

これはアンドロイドでは機能しません。バグはhereと報告されています。

解決方法1：

using System; 
using Android.Graphics.Drawables; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.Android; 
using XFormsUI.Droid; 

[assembly: ExportRenderer(typeof(Frame), typeof(RoundBorderFrameRenderer))] 
namespace XFormsUI.Droid 
{ 
    public class RoundBorderFrameRenderer : FrameRenderer 
    { 
     protected override void OnElementChanged(ElementChangedEventArgs<Frame> e) 
     { 
      base.OnElementChanged(e); 

      if (e.NewElement != null && e.OldElement == null) 
      { 
       SetBackgroundResource(Resource.Drawable.round_border_frame); 

       //Write following lines if you want to bring the XAML Frame Elements's background Color into Native. Otherwise, Frame's BackgroundColor will not be effective. 
       GradientDrawable drawable = (GradientDrawable)Background; 
       string FrameBackgroundColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(e.NewElement.BackgroundColor.R * 255), (int)(e.NewElement.BackgroundColor.G * 255), (int)(e.NewElement.BackgroundColor.B * 255)); 
       drawable.SetColor(Android.Graphics.Color.ParseColor(FrameBackgroundColorHex)); 
      } 
     } 
    } 
} 

をこれもxml(round_border_frame.xml)セレクタファイルが必要です：

次のようにあなたは、Androidプラットフォーム用のFrameためRendererを行う必要があります。このファイルをDrawableフォルダに入れます。

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> 
    <!--We need to give Frame's 'BorderColor Here--> 
    <stroke android:width="1dp" android:color="#FF0000" /> 
    <corners android:radius="10dp" /> 
</shape> 

解決方法2：

セレクタxmlファイルなしRendererを使用します。 Source。

using System; 
using Android.Graphics; 
using Xamarin.Forms; 
using Xamarin.Forms.Platform.Android; 
using XFormsUI.Droid; 

[assembly: ExportRenderer(typeof(Frame), typeof(RoundBorderFrameRenderer))] 
namespace XFormsUI.Droid 
{ 
    public class RoundBorderFrameRenderer : FrameRenderer 
    { 
     public override void Draw(Canvas canvas) 
     { 
      base.Draw(canvas); 

      using (var paint = new Paint { AntiAlias = true }) 
      using (var path = new Path()) 
      using (Path.Direction direction = Path.Direction.Cw) 
      using (Paint.Style style = Paint.Style.Stroke) 
      using (var rect = new RectF(0, 0, canvas.Width, canvas.Height)) 
      { 
       float px = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10 
       float py = Forms.Context.ToPixels(Element != null ? Element.CornerRadius : 10); //Default Corner Radius = 10 
       path.AddRoundRect(rect, px, py, direction); 

       //Set the Width of the Border here 
       paint.StrokeWidth = 1f; 
       paint.SetStyle(style); 

       //Take OutLineColor from XAML Frame element and set it natively here. 
       string FrameBorderColorHex = String.Format("#{0:X2}{1:X2}{2:X2}", (int)(Element.OutlineColor.R * 255), (int)(Element.OutlineColor.G * 255), (int)(Element.OutlineColor.B * 255)); 
       paint.Color = Android.Graphics.Color.ParseColor(FrameBorderColorHex); 
       canvas.DrawPath(path, paint); 
      } 
     } 
    } 
} 

解決策3：

は、しかし、これは最善の解決策ではありませんが、回避策のようなものだ： はPaddingを有する別のFrameの内側にあなたの外Frameをラップし、そのBackgroundColorあなたの境界線の色があるべきものは何でもに設定してください。

注：まだiOSではチェックしていません。

<Frame BackgroundColor="Red" CornerRadius="10" Padding="1,1,1,1"> 
    <Frame CornerRadius="10" BackgroundColor="White"> 
     <StackLayout Orientation="Horizontal"> 
      <Label Text="TEST" VerticalOptions="Center" /> 
      <Label Text="For OUTLINE" VerticalOptions="Center" /> 
     </StackLayout> 
    </Frame> 
</Frame> 

これはthreadで議論されています。

希望すると、これが役立ちます！