Setelah berkenalan dengan Style dan Resources maka sekarang saatnya kita bermain-main dengan skin. Skinning adalah sebuah konsep untuk menganti-ganti tampilan sesuai dengan keinginan pengguna, ambil contoh pada skin sebuah handphone. Ketika pengguna sedang mood untuk bersenang-senang mungkin warna dari casing handphonenya adalah merah dan jika penggunanya sedang bersedih hati mungkin warnanya adalah hitam dengan lambang tengkorak ditengahnya. Dalam WPF yang menjadikan pengalaman pengguna sebagai fokus utamanya konsep tersebut pun dapat didukung. Dengan memanfaatkan Style dan Resources yang telah dipelajari pada post sebelumnya kita akan sama-sama mencoba untuk melakukan skinning pada aplikasi WPF.
Langkah pertama tentunya adalah membuat serangkaian skin yang akan diterapkan. Anda memerlukan sebuah file XAML bertipe "Resource Dictionary".
sebenarnya ini adalah file XAML biasa yang isinya hanya sebuah elemen ResourceDictionary kira-kira seperti dibawah ini :
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="StyleTombol" TargetType="{x:Type Button}">
<Setter Property="Button.Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0.5"/>
<GradientStop Color="#FFDDDDDD" Offset="0.5"/>
<GradientStop Color="#FF1A9135" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Button.RenderTransform">
<Setter.Value>
<TransformGroup>
<RotateTransform Angle="-23.96"/>
</TransformGroup>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>jika anda mengikuti post saya sebelumnya maka tentunya anda pernah melihat potongan kode diatas, yap potongan kode diatas saya ambil langsung dari Resource yang ada dalam aplikasi WPF kita. jadi intinya adalah kita memindahkan resource tersebut ke dalam sebuah file dan membuatnya menjadi sebuah skin. Kemudian anda pun dapat membuat berbagai skin lainnya dalam file yang berbeda. Dalam source yang saya berikan saya memberikan 3 contoh file bertipe ini yang perbedaannya hanyalah pada objek LinearGradientBrush .
Agar aplikasi WPF anda menunjuk kepada suatu skin dalam XAML anda perlu menambahkan sebuah resource dictionary yang menunjuk ke salah satu file skin yang ada seperti potongan kode berikut :
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Skins/Yellow.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>kemudian jika anda ingin mengganti skin, anda dapat melakukannya secara prosedural seperti code berikut :
ResourceDictionary rDictionary = new ResourceDictionary();
rDictionary.Source = new Uri("Skins/Green.xaml", UriKind.Relative);
this.Resources = rDictionary;kode diatas akan segera mengganti skin sesuai dengan Style yang didefinisikan pada file Green.xaml.
Sebagai catatan jika anda akan menganti-ganti skin ketika aplikasi sedang berjalan maka tipe pengaksesan Resource pada tiap elemen yang akan diubah2x tampilannya harus menggunakan tipe DynamicResource. Karena jika tidak (menggunakan StaticResource) maka tampilan dari elemen tersebut tidak akan berubah, hal ini wajar mengingat dalam tipe Static sekali resource telah diterapkan terhadap sebuah elemen, maka sumber resource dari elemen tersebut tidak akan dapat diganti-ganti lagi. Sebagai contoh pada kode XAML dibawah ini :
<Button Margin="46.814,0,0,79.285" Content="UnChanged"
HorizontalAlignment="Left" Width="69.187" RenderTransformOrigin="0.5,0.5"
Style="{StaticResource StyleTombol}"
x:Name="Unchanged" Height="30" VerticalAlignment="Bottom"/>warna dari tombol tersebut tidak akan terganti-ganti meskipun skin dari aplikasi telah diubah-ubah, untuk lebih jelasnya saya anjurkan anda membaca blog posting ini sembari melihat source code yang diberikan disini.
cheers,,,