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);
   }

请找到示例here

如何在Xamarin.Forms的CircleImage插件中安装图像

3 个答案: