A WPF-ben a stílusok vagy angolosan Sytle-ok segítségével alkalmazásunk kinézetét (Kontroljaink méret, színét, alakját stb) és annak sémáját tudjuk meghatározni. Style-ok hasonló analógiájúak, mint a webes világban megismert CSS (Cascading Style Sheets). Hisz ugyanúgy egy-egy elemnek (vagy többnek) meghatározhatjuk a kinézetét és bizonyos körülmények között a viselkedését is.
A stílusok meghatározásához, a Sytle osztály és annak tulajdonságai lesz a segítségünkre. A WPF-ben a stílusokat alapvetően 2 csoportba sorolhatjuk: a Property Setterbe és az Event Setterbe foglalhatjuk. Mostani feladatunk során Property Setterekkel fogunk megismerkedni. A Property Setterekkel meghatározhatjuk egy-egy elem tulajdonságának értékét. A Propery Setternek 2 fontos tulajdonsága van. A Property tulajdonság, amellyel meghatozhatjuk, hogy melyik tulajdonságot szeretnénk megváltoztatni. Illetve van még egy Value tulajdonsága is, amivel megmondjuk, hogy a tulajdonságot milyen értékre állítson be.
A következő XAML kód, egy Propery Settert mutat be, amely a gombnak a háttérszínét pirossá alakítja.
| <Style>
<Setter Property="Button.Background" Value="Red"/>
</Style> |
Ezeket a stílusokat több helyen is definiálhatjuk. Definiálhatjuk akár az adott elemhez is, mint az alább is látható. Ez akkor kényelmes, ha csak egy-egy elemnek akarjuk megváltoztatni a kinézet.
| <Button Height="25" Name="btnOk" Width="100">
<Button.Style>
<Style>
<Setter Property="Button.Content" Value="OK"/>
<Setter Property="Button.Background" Value="Red"/>
</Style>
</Button.Style>
</Button> |
Ha több elemnek is ilyen kinézetet szeretnénk, akkor kényelmetlen volna minden elemhez egyesével lemásolni ezeket a stílus definíciókat. Így megadhatjuk akár az ablakunk vagy az alkalmazásunk erőforrásai között is. Mint például az alább kód részletnél is látható:
| <Window.Resources>
<Style x:Key="MyStyle">
<Setter Property="Button.Content" Value="OK"/>
<Setter Property="Button.Background" Value="Red"/>
</Style>
</Window.Resources> ... <Button Name="btnOK" Style="{StaticResource MyStyle}" Height="30" Width="200"/> |
Ebben az esetben minden controlhoz, magunknak oda kell írni, hogy melyik stílus definíciót akarjuk használni. Ez még mindig kényelmetlen lehet a számunkra, így némi apró változtatással megadhatjuk azt is, hogy az összes általam meghatározott kontrolon az alábbi stílus definíció legyen alkalmazva.
| <Window.Resources>
<Style TargetType="Button">
<Setter Property="Button.Content" Value="OK"/>
<Setter Property="Button.Background" Value="Red"/>
</Style>
</Window.Resources> |
Ezzel az apró módosítással, ha új Button kontrolt helyezzünk a formunkra, a stílus definició azonnal érvényesül rajta.
Elküldve
2010. 01. 02. 15:30
by
Turoczy Attila
Megtekintve:
274
alkalommal