Temel XAML

Bir önceki bölümde XAML’ın ne olduğu ve ne için kullanıldığına dair çalışma yapmıştık ama XAML’da kontrol ekipmanları nasıl oluşturulur sorusunu cevaplamamıştık. Aşağıdaki düğme (Buton) örneğinde görülebileceği gibi, XAML kodu içerisinde bir kontrol ekipmanı oluşturmak ekipmanın adını açılı parantez arasına yazmak kadar kolay.

<Button>

XAML etiketleri ya bitiş etiketi koyarak ya da başlangıç etiketinin sonuna slaş ( / ) koyarak sonlandırılmak zorundadırlar

<Button></Button>

veya

<Button />

Birçok kontrol başlangıç ve bitiş etiketleri arasına (< />) içerik yerleştirmenize olanak tanır. Örneğin, Buton 'un içeriğinde görüntülenecek metni başlangıç ve bitiş etiketleri arasında ayarlayabilirsiniz.

<Button>A button</Button>

HTML büyük/küçük harf duyarlı değildir ancak kontrol adının .NET Ana Yapısında bir Tip ile eşleştirilebilmesi için XAML büyük/küçük harf duyarlıdır. Aynı durum öznitelik adlarının kontrol özellikleri ile eşleşmesi için, öznitelik adlarında da geçerlidir. Burada etiketlere öznitelikler ekleyerek bir kaç özellik tanımladığımız bir düğme var:

<Button FontWeight="Bold" Content="A button" />

Yazı Tipi Kalınlığı (FontWeight) özelliğini değiştiriyoruz, kalın yazı karakterimiz oluyor, sonrasında İçerik (Content) özelliğini değiştiriyoruz ki bu aslında başlangıç ve bitiş etiketleri arasına yazı yazmak ile aynı. Bununla birlikte bir kontrole ait tüm öznitelikleri Kontrol-Nokta-Özellik biçiminde yazılarak ana kontrolün alt etiketleri olarak tanımlanabilir:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

Sonuç yukarıda gördüğünüz ile tamamen aynı olacaktır yani bu durumda hepsi sadece söz dizilimi ile alakalıdır, başka bir şey ile değil. Bununla birlikte pek çok kontrol yazı harici içeriğe de izin verir, örnek olarak diğer kontroller. Aşağıdaki örnekte bir kaç tane Yazı Yapısı (Text Block) kullanarak aynı düğme içinde farklı yazı rengine sahip bir metnin yer aldığı düğme bulunmaktadır.

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

İçerik (Content) özelliği sadece tek bir alt elemanına izin vermektedir, bu nedenle farklı renklerdeki yazıları içine alacak bir Sargı Paneli (WrapPanel) kullanacağız. Sargı Paneli gibi paneller WPF içinde önemli bir rol oynarlar ve ileride onlardan daha ayrıntılı olarak bahsedeceğiz şimdilik bunları diğer kontrolleri barındıran hazneler olarak düşünün.

Tamamen aynı sonuca aşağıdaki işaretleme ile elde edilebilir, aslında aynı şeyi söylemenin bir başka basit yolu:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

Kod'a karşı XAML

Yukarıdaki örnek XAML'nin istediğimizi elde etmek için farklı yöntemler kullanmamıza izin veren oldukça kolay yazılımı olduğunu sizlere gösterdiğini umut ediyorum. Eğer yukarıdaki örneğin farklı renklere sahip yazılar içeren bir düğme için oldukça uzun bir yazım olduğunu düşünüyor iseniz aynı şeyi C# ile elde etmek istediğinizde yapacaklarınız ile kıyaslayın.

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

Tabii ki yukarıdaki örnek daha az açıklama ve sentetik şeker kullanılarak yazılabilir. Ama sanırım ana konu gayet açık: XAML, ara yüzleri tanımlamak için oldukça kısa ve özdür.