How to Fit Image in CircleImage plugin of Xamarin.Forms

Question

I am using following code.

    <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>

As you can see in case of portrait image , space left at left and right while in case of horizontal image space left at top and bottom. How to fix this. I have tried Aspect="AspectFill" AspectFit and Fill all three enums but no success..

using this Plugin

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

You may need to scale the image natively on each platform to fit the width and height of the Xamarin.Forms Image. — Mario Galván, Jan 18 '16 at 15:56

score 1 · Answer 1 · answered Jan 19 '16 at 09:24

1

Try this:

Aspect="AspectFit"

Sample :

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

Aspect="AspectFit" 

WidthRequest="96" HeightRequest="96" >

answered Jan 19 '16 at 09:24

Yksh

3,276
10
56
101

LCJ · Answer 2 · 2017-07-14T23:39:06.233

Vaikesh's answer will solve your issue, I hope. I tried with Aspect="AspectFill" also to see the comparison result. It will show a portion of the image in a circular shape.

This code uses OnPlatform for specifying sizes. Also, pay attention to the option 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
    }

Plugin

score 0 · Answer 3 · answered Jul 15 '17 at 05:20

First, add Xam.Plugins.Forms.ImageCircle in all platforms

In XAML:

Add namespace in RootElement like below:

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

Then add this control in your page where you want Circle Image

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

Please find the sample here

How to Fit Image in CircleImage plugin of Xamarin.Forms

3 Answers3