Xamarin 为 iOS 形成圆形图像答案

【问题标题】：Xamarin Forms Rounded Images For iOSXamarin 为 iOS 形成圆形图像
【发布时间】：2020-11-04 10:15:48
【问题描述】：

我只能在 Android 中看到圆形图像，我在 iOS 上尝试过，它们显示为正方形。

            <StackLayout>
                         <RelativeLayout>
                            <Frame CornerRadius="60" 
                                  HeightRequest="{OnIdiom Phone=190,Tablet=355}"
                                  WidthRequest="{OnIdiom Phone=380,Tablet=710}"
                                  HorizontalOptions="Center"
                                  Padding="0"
                                  IsClippedToBounds="True"
                                  RelativeLayout.XConstraint="{OnIdiom Phone=15,Tablet=30}"
                                  RelativeLayout.YConstraint="{OnIdiom Phone=30,Tablet=30}">
                              <Image Source="kuwait3.jpg" 
                                     HorizontalOptions="Center"
                                     VerticalOptions="Center"
                                     RelativeLayout.HeightConstraint="{OnIdiom Phone=70,Tablet=310}"
                                     RelativeLayout.WidthConstraint="{OnIdiom Phone=70,Tablet=500}"/>
                            </Frame>
                        </RelativeLayout>
                    </StackLayout>

【问题讨论】：

你需要绑定并通过除以高度/2和宽度/2来从角半径获取数据，所以如果举个例子，如果你的高度是80，宽度是80，那么你的角半径应该是40，以便保持居中，您的垂直和水平选项也应该居中
IsClippedToBounds="True" 如果您仍然看不到剪辑到帧的图像，可以提供帮助

标签： xamarin.forms xamarin.ios rounded-corners

【解决方案1】：

你应该让你的框架变圆，然后你的图像也会变圆：

<StackLayout>
    <RelativeLayout>
        <Frame CornerRadius="95" 
                              HeightRequest="{OnIdiom Phone=190,Tablet=355}"
                              WidthRequest="{OnIdiom Phone=190,Tablet=710}"
                              HorizontalOptions="Center"
                              Padding="0"
                              IsClippedToBounds="True"
                              RelativeLayout.XConstraint="{OnIdiom Phone=15,Tablet=30}"
                              RelativeLayout.YConstraint="{OnIdiom Phone=30,Tablet=30}">
            <Image Source="Images1" 
                                 HorizontalOptions="Center"
                                 VerticalOptions="Center"
                                 RelativeLayout.HeightConstraint="{OnIdiom Phone=70,Tablet=310}"
                                 RelativeLayout.WidthConstraint="{OnIdiom Phone=70,Tablet=500}"/>
        </Frame>
    </RelativeLayout>
</StackLayout>

HeightRequest 和WidthRequest 应该相同，CornerRadius 应该是HeightRequest/WidthRequest 的一半。

【讨论】：