Kezdőlap > Kategorizálatlan > WPF Stílusok

WPF Stílusok

2010. január 2. szombat Hozzászólás Go to comments

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.

További információk és leírások:
http://msdn.microsoft.com/en-us/library/system.windows.style.aspx
http://www.codeproject.com/KB/WPF/GuidedTourWPF_5.aspx
http://www.uxpassion.com/2008/09/styling-wpf-listbox-highlight-color/

Kategóriák:Kategorizálatlan
  1. Még nincs hozzászólás.
  1. No trackbacks yet.

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: