Silverlight 2.0 Beta 1 ile beraber gelen görsel özellikler içerisinde özellikle tasarımcıların en çok beğenecekleri ve bildiğimiz teknolojiler arasında CSS'e benzetebileceğimiz "Resource" yapısı çok önemli bir yere sahip. WPF'de hali hazırda var olan ve Silverlight tarafına da (ciddi farklılıklar ile) taşınan bu özellikler sayesinde Silverlight uygulamaları içerisinde kontrollerin programatik işlevselliklerinden bağımsız olarak görsel özellikleri ayarlanabildiği gibi merkezi bir yönetim de sağlanabiliyor. Gelin hızlı bir örnek ile konumuza giriş yapalım.
<UserControl x:Class="SilverlightApplication7.Page"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid x:Name="LayoutRoot" Background="White">
<Button HorizontalAlignment="Stretch" Margin="44,54,55,45" VerticalAlignment="Stretch" Content="Button"/>
</Grid>
</UserControl>
İlk olarak yukarıdaki gibi yaratacağımız yeni bir Silverlight 2.0 uygulamasına basit bir Button yerleştirelim ve Button içerisinde yazının (Content) yerine farklı birşeyler koymayı deneyelim. Yukarıdaki kod içerisinde Content değeri doğrudan bit metne eşitlenmiş durumda. Oysa bu değerin içerisine başka bir Silverlight kontrolü yerleştirebiliriz.
<Button HorizontalAlignment="Stretch" Margin="44,54,55,45" VerticalAlignment="Stretch">
<Button.Content>
<Image Height="84" HorizontalAlignment="Center" VerticalAlignment="Center" Width="139" Source="Dock.jpg"/>
</Button.Content>
</Button>
Yukarıdaki kod içerisinde Button nesnesinin Content özelliğini belirlemek için Button tagları arasında ayrıca bir Button.Content tagları açtık.
Button.Content özelliğini değiştirilen Button nesnesi sağda.
Bu noktada Button.Content içerisinde istediğiniz Silverlight kontrolünü yerleştirebilirsiniz fakat dikkat etmeniz gereken bir nokta var; maalesef bu taglar arasında sadece bir Silverlight kontrolü yerleştirilebilir. Aslında cümle olarak yanlış bir cümle oldu, daha doğru tabiri ile Button.Content içerisinde XAML kodunun her zaman tek bir RootElement'inin olması gerekiyor. Yani eğer bu bölgeye iki kontrol yerleştirmek istiyorsanız kontrollerinizi bir Container Element içerisinde gruplayarak yerleştirmek zorundasınız. Aşağıdaki örneğimizde Container Element olarak bir StackPanel kullanacağız.
<StackPanel Orientation="Horizontal">
</StackPanel>
Gördüğünüz gibi Root Element olarak Button.Content içerisinde bir StackPanel kullandıktan sonra artık StackPanel içerisine istediğimiz kadar kontrol yerleştirebiliyoruz.
Button.Content içerisinde birden çok Silverlight kontrolü.
Bu yapı ile farklı kontrollerinin farklı görsel özelliklerini tanımlamak mümkün.
Bir kontrolün tüm görsel yapısını nasıl değiştiririz?
Bu noktaya kadar elimizdeki bir düğmenin içerisinde farklı Silverlight kontrolleri yerleştirdik. Oysa söz konusu düğmenin tüm görsel yapısını değiştirmek de isteyebilirdiniz. Örneğin bir Resim nesneninin bir Button olarak tanımlanması mümkün müdür?
<Button.Template>
<ControlTemplate>
</ControlTemplate>
</Button.Template>
Yukarıdaki kodumuz içerisinde bir Button nesnesinin Template özelliğini başka bir ControlTemplate atayarak değiştiyoruz. Tanımladığımız ControlTemplate içerisinde sadece bir adet Image nesnesi var. Böylece artık düğmemiz sadece bir Image nesnesinden oluşacak oysa programcımız için bu nesne hala bir Button.
Bir Button nesnesine benzemiyor değil mi? Ama öyle.
Peki tüm bunların anlamı nedir?
Yukarıdaki iki yapıyı Button.Content ve Button.Template beraber kullanmanız halinde istediğimiz gibi düğmeler oluşturabilirsiniz. Gelin şimdi güzel bir dikdörtgen çizelim ve bunu yeni yarattığımız bir Button nesnesinin Template özelliğine aktaralım.
<UserControl x:Class="