Resim ve Yazılı Buton

Merhaba arkadaşlar. Bu yazımda bir butonda nasıl resim ve yazıyı aynı anda gösterebileceğimizden bahsedeceğim. Bazı durumlarda gerekli olabiliyor. 

Aslında yapımı çok basit Custom Renderer oluşturmamıza gerek yok. İlk önce bir buton oluşturuyoruz. Sonrasında bu butona ekleyeceğimiz resmi ve yazıyı ekliyoruz.  Burada dikkat etmemiz gereken hususlardan birisi eklediğimiz fotoğrafın çözünürlüğü. Eğer ki çözünürlük çok büyük olursa problem çıkma olasılığı yüksek. İdeal çözünürlük 64×64 .

Sonrasında ise resim ve yazının nerede durması gerektiğini ayarlıyoruz. Bu işlemleri Content Layout özelliği ile yapmamız gerekiyor. Content Layout’da ilk seçenek resimdir. İlk olarak resimin nerde durması gerektiğini ayarlıyoruz. Sizin kullanacağınız tasarıma bağlı olarak üstte, sağda, solda veya altta tutabilirsiniz. Bunun için Top right left komutlarını kullanabilirsiniz. Aşağıda örnek kod satırları bulunmaktadır. 

<StackLayout VerticalOptions="EndAndExpand"
                        HorizontalOptions="Start"
                         Padding="30">
                <Button x:Name="buttonCikis"
                        Text="Çıkış"
                        TextColor="White"
                        Image="quit32"
                        ContentLayout="Left,0"
                        BackgroundColor="#3598db"
                        BorderRadius="15"/>
            </StackLayout>

Ekran çıktısı ise aşağıda ki gibidir

Eğer ki aklınıza takılan sorularınız olursa bana mail veya yorum atarak ulaşabilirsiniz. İyi çalışmalar.