サークルの画像は、完全な円

Question

ではありません私はここのコードを使用して画像レンダラーを持っている：https://blog.xamarin.com/elegant-circle-images-in-xamarin-forms/

public class ImageCircleRenderer: ImageRenderer 
{ 
    private void CreateCircle() 
    { 
     try 
     { 
      double min = Math.Min(Element.Width, Element.Height); 
      Control.Layer.CornerRadius = (float)(min/2.0); 
      Control.Layer.MasksToBounds = false; 
      Control.ClipsToBounds = true; 
     } 
     catch (Exception ex) 
     { 
      Debug.WriteLine("Unable to create circle image: " + ex); 
     } 
    } 

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e) 
    { 
     base.OnElementChanged(e); 

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

     CreateCircle(); 
    } 

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

     if (e.PropertyName == VisualElement.HeightProperty.PropertyName || 
      e.PropertyName == VisualElement.WidthProperty.PropertyName) 
     { 
      CreateCircle(); 
     } 
    } 
} 

その後、私は写真を含むビューのセルで、私のテーブルビューを設定します。このよう

：私はこの絵に完全な円を作ることができますどのように

：

private void SetTableView() 
    { 
     int photoSize = 120; 
     var photo = new ImageCircle 
     { 
      Source = "profile_placeholder.png", 
      WidthRequest = photoSize, 
      HeightRequest = photoSize, 
      Aspect = Aspect.AspectFill, 
      HorizontalOptions = LayoutOptions.Center, 
      Scale = 1.0 
     }; 

     Content = new TableView 
     { 
      HasUnevenRows = true, 
      Intent = TableIntent.Menu, 
      Root = new TableRoot() 
      { 
       new TableSection() 
       { 
        new ViewCell 
        { 
         Height = photoSize, 
         View = new StackLayout 
         { 
          Orientation = StackOrientation.Horizontal, 
          HorizontalOptions = LayoutOptions.Start, 
          VerticalOptions = LayoutOptions.Start, 
          Padding = 15, 
          Children = 
          { 
           photo, 
           new Label 
           { 
            Text = "Casa de Férias" 
           } 
          } 
         } 
        } 
       } 

      } 

     }; 

    } 

は残念ながら、結果はこれですか？私はこれがうまくいかない理由がないと思っています...

私は同じ幅と高さを設定しました。また、画像のAspectプロパティで定義されているアスペクト比。

私には何が欠けていますか？

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

編集：James MontemagnoのImageCircleプラグインを使用してみましたが、同じことが起こります。おそらく私のレイアウトに問題があると思いますか？

Answer 1

トリミング円形画像に関する上記のコードでは、しかし、正しい：

テーブルビューのViewCellに設定された高さ、それが所望のアスペクト比を失うさせ、画像を縮小しました。これは、高さは画像の高さ+適用される上下のパディング未満であることであった：

私は変数にパディングをリファクタリングしました：

int padding = 15; 

を次に、ViewCellの高さを設定するとき、私はかかるだろう画像の高さ+所望の詰め物を考慮する。

new ViewCell 
{ 
    Height = photoSize + padding*2, 
    View = new StackLayout 
    { 
     Orientation = StackOrientation.Horizontal, 
     HorizontalOptions = LayoutOptions.Start, 
     VerticalOptions = LayoutOptions.Start, 
     Padding = padding, 
     Children = 
     { 
      photo, 
      new Label 
      { 
       HorizontalOptions = LayoutOptions.StartAndExpand, 
       VerticalOptions = LayoutOptions.Center, 
       Text = "Casa de Férias" 
      } 
     } 
    } 
} 

とセルのImageCircleは現在、完全な円です。

編集：いくつかのリファクタリング後

：

public class ProfileCell: ViewCell 
{ 

    private static int photoSize = 75; 
    private static int viewCellPadding = 15; 

    public ProfileCell(ImageSource source, string description) 
    { 
     var photo = new ImageCircle 
     { 
      Source = source, 
      WidthRequest = photoSize, 
      HeightRequest = photoSize, 
      HorizontalOptions = LayoutOptions.Center, 
      Aspect = Aspect.AspectFill, 
      Scale = 1.0 
     }; 

     Height = photoSize + (viewCellPadding * 2); 
     View = new StackLayout 
     { 
      Orientation = StackOrientation.Horizontal, 
      HorizontalOptions = LayoutOptions.Start, 
      VerticalOptions = LayoutOptions.Start, 
      Padding = viewCellPadding, 
      Children = 
      { 
       photo, 
       new Label 
       { 
        HorizontalOptions = LayoutOptions.StartAndExpand, 
        VerticalOptions = LayoutOptions.Center, 
        Text = description 
       } 
      } 
     }; 
    } 

} 

そしてセルは、今のようなテーブルビューに配置することができます。

new TableSection() 
{ 
    new ProfileCell(ImageSource.FromFile("profile_placeholder.png"), "Description") 
}