使用Xamarin创建圆形图像(Frame)

Question

我有一个问题，我想创建一个圆形图片，所以我编写了以下代码：

<Frame Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2" VerticalOptions="Center"
    CornerRadius="100" IsClippedToBounds="True" HeightRequest="70" WidthRequest="70">
    <Image Source="User_Vreesie_Logo.png"
    VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" />
</Frame>

我希望得到一个70x70大小的圆形图像，但是我得到了一个非常长（宽度）的带有圆角的框架和一个微小的正方形图像在中间。我该如何解决这个问题？

- A. Vreeswijk

---

您的框架正扩展以填充两个网格单元，因为您已将ColumnSpan设置为2。 - Jason

是的，但我需要它是2个单元格宽度。 - A. Vreeswijk

好的，我创建了两个网格，这样我就可以将它放在列跨度1上，但现在框架是圆形的，而图像是圆形中的一个小正方形？我该如何修复它？ - A. Vreeswijk

设置 Padding="0" - Jason

@A.Vreeswijk 你好，你有参考Jason的建议来解决它吗？ - Junior Jiang

Answer 1

请尝试以下方法:

1. Frame有默认的25像素内边距，因此要设置 Padding="0"
2. 给图像设置HeightRequest/WidthRequest，因为在Xamarin中图像似乎无法自动缩放。
3. 在Image中设置Aspect="AspectFit"。这将调整图像大小以适应视图，但可能会出现白边；或者您可以使用Aspect="AspectFill"。它将缩放图像以填充整个视图，但可能会切掉图像边框部分。

- bhavya joshi

Answer 2

如果您需要在Grid中显示一个70*70的图像，并且需要ColumnSpan = 2。我已经在我的本地项目中测试了以下代码，它可以正常工作。请看以下示例：

<Grid BackgroundColor="GreenYellow">
    <Grid.RowDefinitions>
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="auto" />
        <ColumnDefinition Width="auto" />
    </Grid.ColumnDefinitions>
    <Frame Grid.Row="0"
           Grid.Column="1"
           Grid.ColumnSpan="2"
           Padding="0"
           HorizontalOptions="CenterAndExpand"
           VerticalOptions="Center"
           CornerRadius="100"
           IsClippedToBounds="True"
           HeightRequest="70"
           WidthRequest="70"
           BackgroundColor="SaddleBrown">
        <Image Source="icon.png"
               VerticalOptions="FillAndExpand"
               HorizontalOptions="FillAndExpand" />
    </Frame>
</Grid>

效果：

- Junior Jiang

Answer 3

如果您想要圆形图片，圆角半径应该是图片高度的一半。例如： CornerRadius="35" IsClippedToBounds="True" HeightRequest="70"。

- ayberkzeray