如何在CircleImage Xamarin.Forms插件中拟合图像

Question

我正在使用以下代码。

    <StackLayout BackgroundColor="#303D43" HeightRequest="170" Padding="10" 
                HorizontalOptions="Fill" VerticalOptions="Start">
                    <StackLayout HeightRequest="120" WidthRequest="120" Padding="0,0,0,10" HorizontalOptions="Fill" VerticalOptions="Fill" >
                        <controls:CircleImage x:Name="profileImage" 
                            BorderColor="White" BorderThickness="1" HorizontalOptions="Center"
                             Aspect="AspectFill" WidthRequest="96" HeightRequest="96" >
</controls:CircleImage>
                 </StackLayout>
                 <Label x:Name="lblTitle" FontSize="22" TextColor="White" HeightRequest="20" HorizontalOptions="Center" />
            </StackLayout>

​

您可以看到，在肖像图像的情况下，左边和右边的空间，而在水平图像空间的情况下，左在上和底部。如何解决这个问题。我试过Aspect="AspectFill“AspectFit并填写了所有三个枚举，但都没有成功。

使用这个插件

https://github.com/jamesmontemagno/Xamarin.Plugins/tree/master/ImageCircle

Answer 1

试试这个：

Aspect="AspectFit"

样本：

<controls:CircleImage x:Name="profileImage"
BorderColor="White" BorderThickness="1" HorizontalOptions="Center"

Aspect="AspectFit" 

WidthRequest="96" HeightRequest="96" >

Answer 2

我希望Vaikesh的回答能解决你的问题。我还尝试使用Aspect="AspectFill"来查看比较结果。它将以圆形显示图像的一部分。

此代码使用OnPlatform指定大小。另外，请注意选项HorizontalOptions="Center"。

XAML

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MyImageCircle"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             x:Class="MyImageCircle.MainPage">

    <controls:CircleImage Source="abstracttriangleg" Aspect="AspectFill" 
                          BorderColor="LightGray" 
                          BorderThickness="2" 
                          HorizontalOptions="Center">

        <controls:CircleImage.WidthRequest>
            <OnPlatform x:TypeArguments="x:Double"
                  iOS="150"
                  Android="150"
                  WinPhone="200"/>
        </controls:CircleImage.WidthRequest>
        <controls:CircleImage.HeightRequest>
            <OnPlatform x:TypeArguments="x:Double"
                  iOS="150"
                  Android="150"
                  WinPhone="200"/>
        </controls:CircleImage.HeightRequest>
    </controls:CircleImage>

</ContentPage>

MainActivity.cs

    protected override void OnCreate(Bundle bundle)
    {
        TabLayoutResource = Resource.Layout.Tabbar;
        ToolbarResource = Resource.Layout.Toolbar;

        base.OnCreate(bundle);

        global::Xamarin.Forms.Forms.Init(this, bundle);
        LoadApplication(new App());
        ImageCircleRenderer.Init();  //Image Circle from "ImageCircle.Forms.Plugin.Droid" namespace
    }

插件

​

​

Answer 3

首先，在所有平台中添加Xam.Plugins.Forms.ImageCircle

XAML中的：

在RootElement中添加命名空间，如下所示：

  xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"

然后将此控件添加到您希望循环图像的页面中

  <controls:CircleImage
    WidthRequest="100"
    HeightRequest="100"
    Aspect="AspectFill"
   Source="BG.png" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"/>

MainActivity.cs:

  protected override void OnCreate(Bundle bundle)
   {
      TabLayoutResource = Resource.Layout.Tabbar;
      ToolbarResource = Resource.Layout.Toolbar;

       base.OnCreate(bundle);
       ImageCircleRenderer.Init();
       global::Xamarin.Forms.Forms.Init(this, bundle);
       LoadApplication(new App());
  }

AppDelegate.cs

 public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  {
     global::Xamarin.Forms.Forms.Init();

    ImageCircleRenderer.Init();

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);
   }

，请找到 这里样品