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”>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image Source="/Assets/bora.jpg" Width="250" Height="250" />
</Grid>
</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)
Senior Software Engineer, @Microsoft
Ada ve Ege'nin babası ;)
Makale Adedi: 484