Xamarin Forms Yuvarlak Resim

Merhaba arkadaşlar bugün ki yazımda Xamarin Forms’da fotoğrafı nasıl yuvarlak yapacağımızdan bahsedeceğiz. Tasarım konusu günümüzde apayrı bir yeri almışken mobil uygulamalarımız için de büyük önem taşıyor. Bir kullanıcı sayfası oluşturduğumuzda bu sayfanın sahibinin fotoğrafının yuvarlak bir şekilde ekranda gözükmesi tasarım açısından daha hoş gözükmesini sağlar. Bunun için Xamarin Forms’da basit bir eklenti kullanmamız gerekiyor.

Projemizde sağa tıklayıp bir Nuget Paket yüklemeliyiz. Bu Nuget Paket ;ImageCirclePlugin‘dir. Daha detaylı bilgi almak ve Github’dan incelemek isterseniz buradan ulaşabilirsiniz. Bütün projelerimize ekledikten sonra başka yapmamız gereken işlemlerde var. Bu paket aslında bir Custom Renderer olduğu için Android ve iOS platformlarına gidip bunu işlememiz gerekmekte. Android kısmında MainActivity dosyasına iOS katmanında ise AppDelegate kısmında aşağıda ki kod parçasını eklememiz gerekmekte.

ImageCircleRenderer.Init();

Buraya kadar olan işlemlerimiz aketi projeye yükleme ve entegre etme işlemiydi. Şimdi ise tasarım kısmına geçelim. Burada yapmamız gereken ilk işlem; yüklemiş olduğumuz paketi tasarım kısmı olan xaml tarafta tanımlattırmak. Circle tanımlatması ile çok kolay bir şekilde artık bu paketime ve içinde ki kontrollere ulaşabiliyorum. Bundan sonrası isezaten aynı image kontrolü kullanırmış gibi kullanmak kalıyor. Aşağıda örnek kodlar görmektesiniz.

<?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:CircleImage" 
             xmlns:Circle="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
             x:Class="CircleImage.MainPage">
    <StackLayout VerticalOptions="Center">
        <!-- Place new controls here -->
        <StackLayout HorizontalOptions="Center"
                     VerticalOptions="Center">
            <Circle:CircleImage WidthRequest="150"
                                HeightRequest="150"
                                BorderColor="Blue"
                                BorderThickness="4"
                                Aspect="AspectFill"
                                Source="https://sezeromer.com/wp-content/uploads/2017/08/19.-G%C3%BCn-%C3%96mer-Sezer.jpg"/>
        </StackLayout>
    </StackLayout>
</ContentPage>

Yukarıda görmüş olduğunuz kodun çıktısı aşağıda ki gibidir.

Projeye Github üzerinden ulaşmak isterseniz buraya tıklayın. Eğer aklınıza takılan soru olursa mail veya yorum atarak bana ulaşabilirsiniz. İyi çalışmalar dilerim.