Windows 10 UWP Uygulamasında Page.Resources İçinde Style Kullanmak

windows 10 logo
PRO

Windows 10 UWP Uygulamasında Page.Resources İçinde Style Kullanmak

Windows 10 UWP uygulaması yazarken bazen ekranda stil verdiğimiz bir nesnenin stilini aynı tipteki diğer nesnelere de uygulamak isteriz.
Böyle bir durumda içinde bulunduğumuzPage’inResources kısmına stillerimizi ortak bir şekilde tanımlamak ve sayfanın içinde aynı tipteki nesnelerde kullanmak iyi bir çözüm yolu olabilir.
Bu makalede örnek olarak, saati gösterecek veya belli bir süreden geri sayım yapabilecek aşağıdaki sayfayı UWP ile tasarlayacağız:

Öncelikle sayfanın kodlarını aşağıdaki hale getirip temizleyelim; ​ ​Sayfaya önce birStackPanel nesnesi, StackPanel nesnesinin içerisine birGrid nesnesi, Grid nesnesininColumnDefinitions özelliğine de 5 adetColumnDefinition ekliyoruz.
Aynı şekilde Grid nesnesinin içerisine herColumn’a birer tane denk gelecek şekildeBorder nesneleri ekliyoruz, Border nesnelerinin içerisineTextBlock veyaStackPanel içerisindeTextBlock ekliyoruz.
Border nesnelerini kullanmamızın sebebi, TextBlock nesnesi tek başına arkaplan rengine sahip olamaz, eğer Border nesnesinin içerisine koyarsak, Border nesnesine verdiğimizBackground özelliği sayesinde bir arkaplan rengi olabilir.                                                            ​                                                                                                                                                                                                                                                                                                      ​
Böylece tasarım anında ekranımız aşağıdaki gibi gözükecek:

İstediğimiz ekran tasarımına henüz sahip değiliz, fakat yaklaştık. Sayfada birçok nesnenin aynı şekilde gözükmesini istiyoruz, eğer hepsinde aynı özelliklere aynı değerleri verecek olursak aslında bunu elde edebiliriz. Fakat daha sonra değişiklik yapması zor olur, kodun karmaşıklığı artar, vs.
Sayfadaki Page elementinin içerisine Resources elementi ekler ve içerisine istediğimiz nesnelerin ortak sahip olacağı stilleri yazarsak bu problemlerin önüne geçmiş oluruz:

​​Öncelikle Page.Resources elementini oluşturuyoruz, sayfadaki tüm Border nesneleri için hangi özelliklere hangi değeri atamak istiyorsak,Style elementi içerisindeSetter elementini kullanarak,Property veValue değerlerine atamalar yapıyoruz.
Aynı şekilde sayfadaki tüm TextBlock nesneleri için de ortak özelliklere değer atamaları yapıyoruz.
Tüm Border ve TextBlock nesnelerine aynı değerleri tek tek atamak yerine, Page.Resources içerisinde ortak bir şekilde atamış olduk. Artık arkarengi değiştirmek istersek, tek bir yerden değiştirebileceğiz:

 

Arşivler