丸められたフレームの画像は、iOSのフレームに適合していてもAndroidのフレームには適合しません。

Question

イメージを含む丸められたフレームを作成するXAMLがXamarinフォームにあります。

 <Frame CornerRadius="45" HasShadow="false" BackgroundColor="White" Padding="5" HorizontalOptions="End" VerticalOptions="End" HeightRequest="80" WidthRequest="80" Margin="10"> 
      <Image Source="camerabutton.jpg" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Scale="1.5"> 
       <Image.GestureRecognizers> 
        <TapGestureRecognizer 
           Command="{Binding CameraPageCommand}" 
           CommandParameter="camerabutton" 
           Tapped="OnCameraClicked"/> 
       </Image.GestureRecognizers> 
      </Image> 
     </Frame> 

私はそれがiOSのに来るとき、フレーム要素に関するいくつかの問題があるように思われることを承知しているが、私は誰かがこの問題で私を助けることができる願っています。

Androidでは、意図したとおりに機能し、コーナーを完全に切り取り、丸みを帯びた画像を表示します。しかし、iOS上では画像が重なるだけです。下の画像を参照してください。

これは私が意図したものは明らかではなく、私の好みは、それはそれは、Android上でどのように見えるかに適合することです。

Answer 1

解決方法1： まずあなたがフレームIsClippedToBounds="true"

OR

ソリューション2のプロパティを設定してみてください： IOS上でレンダリングを追加し、ここでレンダラコードです：

[assembly: ExportRenderer(typeof(Frame), typeof(CustomFrameRenderer))] 
namespace YOU_IOS_NAMESPACE 
{ 
    protected override void OnElementChanged(ElementChangedEventArgs<Frame> e) 
    { 
     base.OnElementChanged(e); 
     var view = (CustomFrame)Element; 

     if (view != null) 
     { 
      Layer.CornerRadius = (nfloat)view.CornerRadius; 
      Layer.MasksToBounds = true; 
     } 
    } 

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e) 
    { 
     base.OnElementPropertyChanged(sender, e); 

     var view = (CustomFrame)Element; 

     if (view != null) 
     { 
      Layer.CornerRadius = (nfloat)view.CornerRadius; 
      Layer.MasksToBounds = true; 
     } 
    } 
} 

Answer 2

をフレームコントロールを使ってこの種のバグに遭遇しました。おそらく、あなたはこのような別のコントロールを使うことができます：https://github.com/paulpatarinski/Xamarin.Forms.Plugins/tree/master/RoundedBoxView

なぜあなたのフレームに5のパディングを設定していますか？