Windows 10 UWP uygulamasında resimleri yuvarlak göstermek

Son yıllarda özellikle mobil uygulamalarda avatar dediğimiz stilde resimleri yuvarlak göstermek sıklıkla kullanılır oldu.

Bunu gerçekleştirebilmek için resimleri yuvarlak kaydetmeye gerek yok.

Bu makalede Windows 10 UWP projesinde resimleri nasıl yuvarlak gösterebileceğimizi inceleyeceğiz.

Önce bir Blank App (Universal Windows) projesi oluşturalım;

Projenin Assets dizinine yuvarlak göstermek istediğimiz resmi ekleyelim, bu makalede ben Bora Kaşmer‘in aşağıdaki resmini ekliyorum;

MainPage.xaml dosyasını açalım ve kodları aşağıdaki şekilde güncelleyelim;

<Page x:Class=”YuvarlakAvatarResim.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:YuvarlakAvatarResim”>

&lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
    &lt;Image Source="/Assets/bora.jpg" Width="250" Height="250" /&gt;
&lt;/Grid&gt;

</Page></pre>

Böylece ekrana bir Image nesnesi ekledik ve içerisinde Bora Kaşmer‘in resmini aşağıdaki gibi gösterdik;

Eğer bu resmi kare değil, yuvarlak göstermek istiyorsak, Grid nesnesinin içindeki Image nesnesini Ellipse nesnesi ile değiştirip, Fill özelliğine ImageBrush nesnesi ekliyoruz;

<Page
    x:Class="YuvarlakAvatarResim.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:YuvarlakAvatarResim">

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Ellipse Width="250" Height="250">
            <Ellipse.Fill>
                <ImageBrush ImageSource="/Assets/bora.jpg" />
            </Ellipse.Fill>
        </Ellipse>
    </Grid>

</Page>


Böylece ekranımız aşağıdaki şekilde **yuvarlak** resim ile gözükür hale geliyor;

![](/assets/uploads/2016/03/avatar4.jpg)

İlgili diğer makaleler

blog comments powered by Disqus

Engin Polat hakkında

Senior Software Engineer, @Microsoft

Ada ve Ege'nin babası ;)

Kategoriler

İstatistik

Makale Adedi: 484

Creative Commons Lisansı