1

我正在使用以下代码。

    <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

4

3 回答 3

1

尝试这个：

Aspect="AspectFit"

样本 ：

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

Aspect="AspectFit" 

WidthRequest="96" HeightRequest="96" >
于 2016-01-19T09:24:32.590 回答
0

我希望 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
    }

插入

在此处输入图像描述

于 2017-07-14T23:32:53.580 回答
0

首先，在所有平台中添加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);
   }

请在此处找到示例

于 2017-07-15T05:20:36.730 回答