Katanya, software developer itu engga suka yang standar-standar untuk urusan control. Katanya pengen yang bisa dikustomisasi biar bisa sesuai dengan selera dan gaya. Katanya kayak button, texbox, listview dll yang standar, kurang asik dan terlalu terbatas. Katanya lebih baik bikin sendiri from the scratch. Katanya, bikin sendiri bikin mabok dan pusing-pusing dan masih ditambah mual-mual.
Nah daripada mikirin katanya, WPF sudah punya solusi untuk urusan custom control di area style dan template.
Untuk memahami lebih dalam tentang custom template, Anda bisa membaca blog Jit Ghosh.
Berikut adalah petikan code dari custom template :
Dalam skenario ini saya ingin menampilkan kondisi button saat awal seperti ini :
Nah si button ditulis oleh code ini :
<Button Template="{StaticResource buttonTemplate}" ></Button>
Terus pengen dirubah seperti gambar diatas :
<Grid>
<Rectangle
Width="160"
Height="160"
x:Name="kotak">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Red"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="107,95,103,103"
Name="textBlock1"
Text="WPF Competition"
Foreground="Pink"
TextDecorations="None"
Background="Chocolate"
Opacity="1"
FontSize="16" />
</Grid>
Gimana supaya berubah warna kalau dilewati mouse kayak gini :
Pake ControlTemplate.Triggers yang akan mencek apakah mouse sedang lewat dengan Property="Button.IsMouseOver" Value="True"
Kalau iya diset deh target yang ingin dirubah warnanya TargetName="kotak" Property="Fill" Value="Green"
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="kotak" Property="Fill" Value="Green"></Setter>
</Trigger>
....
....
</ControlTemplate.Triggers>
Sekarang kalo tombol mouse ditekan pengennya tombol jadi mengkeret. Juga si textblock. Kayak gini nih :
<ControlTemplate.Triggers>
.....
.....
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX=".8" ScaleY=".8"></ScaleTransform>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value=".6,.6"></Setter>
</Trigger>
</ControlTemplate.Triggers>
Selesai.
Ini kalo mau lihat source lumayan lengkap :
<Grid>
<Grid.Resources>
<ControlTemplate x:Key="buttonTemplate">
<Grid>
<Rectangle
Width="160"
Height="160"
x:Name="kotak">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
<GradientStop Offset="0" Color="Red"></GradientStop>
<GradientStop Offset="1" Color="White"></GradientStop>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Margin="107,95,103,103"
Name="textBlock1"
Text="WPF Competition"
Foreground="Pink"
TextDecorations="None"
Background="Chocolate"
Opacity="1"
FontSize="16" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsMouseOver" Value="True">
<Setter TargetName="kotak" Property="Fill" Value="Green"></Setter>
</Trigger>
<Trigger Property="Button.IsPressed" Value="True">
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX=".8" ScaleY=".8"></ScaleTransform>
</Setter.Value>
</Setter>
<Setter Property="RenderTransformOrigin" Value=".6,.6"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Button Template="{StaticResource buttonTemplate}" ></Button>
</Grid>
Ini kalau mau download aja source code tanpa nulis-nulis :