Style in WPF

Pada bagian sebelumnya saya telah membahas tentang resource dalam bagian kali ini ini saya ingin sedikit membahas mengenai Style. Apa sih itu Style? Style adalah sebuah entitas dalam WPF yang memiliki fungsi untuk mengatur sekumpulan properti dalam sebuah elemen. Jadi jika pada contoh resource di post sebelumnya kita mengatur atribut elemen satu persatu dengan menggunakan Style maka kita dapat mengatur lebih dari 1 atribut saja. Ambil contoh kode dibawah ini

<Button Margin="29.827,36.505,0,0" VerticalAlignment="Top" Height="30" Content="Button" RenderTransformOrigin="0.5,0.5" Width="45.577" HorizontalAlignment="Left">
    <Button.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="-23.96"/>
        </TransformGroup>
    </Button.RenderTransform>
    <Button.Background>
        <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>
    </Button.Background>
</Button>
<Button Margin="40.827,116.505,0,117.495" Content="Button" HorizontalAlignment="Left" Width="45.577" RenderTransformOrigin="0.5,0.5">
    <Button.Background>
        <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>
    </Button.Background>
    <Button.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="-23.96"/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>
<Button Margin="33.827,77.505,0,0" VerticalAlignment="Top" Height="30" Content="Button" HorizontalAlignment="Left" Width="45.577" RenderTransformOrigin="0.5,0.5">
    <Button.Background>
        <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>
    </Button.Background>
    <Button.RenderTransform>
        <TransformGroup>
            <RotateTransform Angle="-23.96"/>
        </TransformGroup>
    </Button.RenderTransform>
</Button>

dalam kode diatas ketiga button memiliki  nilai atribut yang sama untuk 2 hal yaitu pada RenderTransform (untuk membuat efek button yang miring) dan Background (untuk membuat efek gradient) dengan hasil sebagai berikut :

image

Nah untuk mengatasi redudansi dalam XAML kita bisa saja menggunakan cara yang sama dengan post sebelemunnya, Namun tentunya cukup merepotkan jika kita membuat 2 buah resource untuk kedua nilai atribut tersebut. Nah disinilah Style akan banyak berfungsi, kedua buat nilai atribut yang sama tersebut dapat kita kelompokkan dalam sebuah style seperti contoh dibawah ini:

<Style x:Key="StyleTombol">
      <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>

kemudian dalam elemen button kita set nilai atributnya untuk mengakses resource tersebut seperti contoh berikut:

<Button Margin="29.827,36.505,0,0" VerticalAlignment="Top" Height="30" 
    Content="Button" RenderTransformOrigin="0.5,0.5" Width="45.577" 
    HorizontalAlignment="Left" Style="{StaticResource StyleTombol}" />

Perhatikan bahwa elemen Style nilainya adalah StaticResource yang menunjuk ke Style dengan nama StyleTombol. sehingga efek yang sama akan kita dapatkan dan juga tentunya membantu kita untuk mengehemat code yang akan kita buat, selain itu hal ini pun menghemat memory karena 1 objek LinearGradientBrush dapat dipakai untuk lebih dari 1 objek. Semoga ini dapat membantu anda dalam mengembangkan aplikasi WPF.

 

cheers

Share this post: | | | |
Published Tuesday, September 23, 2008 8:20 PM by ronald

Comments

No Comments
Powered by Community Server (Commercial Edition), by Telligent Systems