Rully Yulian MF

Di posting terdahulu saya pernah ber coding ria untuk membuat Combobox yang berisi list predefined color beserta kotak berwarna yang memiliki warna yang sesuai dengan nama warna yang muncul di Combobox list tersebut. Saya tidak akan menjelaskan kembali teknik tersebut. Kali ini saya akan ber coding ria lagi untuk membuat object yang serupa namun dibuat dengan menggunakan WPF.

Seperti yang kita ketahui semua, di WPF banyak sekali cool stuff yang dapat membuat tampilan lebih cantik dan wah. Selain itu ada beberapa teknik yang dipermudah dalam melakukan action tertentu, seperti misalnya penggunaan object graphics, bitmap effect, dll. Di WPF juga dikenal adanya Control Template. Template control ini sebelumnya mungkin kita kenal di asp.net. Pernah menggunakan Data Display Control seperti DataList, Repeater atau mungkin GridView? Ya seperti itulah kira-kira yang dapat kita lakukan juga di WPF. Ok mari kita lihat langkah-langkahnya:

Pertama kali sudah pasti anda harus buat terlebih dahulu WPF Application project templatenya dari Visual Studio kesayangan anda. Disini saya menggunakan VS 2008. Buat code seperti di bawah ini pada Window1.xaml untuk interfacenya :

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="350">
    <Grid>
        <StackPanel Margin="10,10,10,10" Orientation="Horizontal" 
                    VerticalAlignment="Top">
            <ComboBox Width="310" Height="40" Name="cboColor">
                <ComboBox.ItemTemplate>
                    <DataTemplate>
                         <StackPanel Orientation="Horizontal">
                            <Label Width="175" Height="Auto" 
                                   Content="{Binding Path={}}"
                                   FontSize="14">
                                <Label.BitmapEffect>
                                    <DropShadowBitmapEffect 
                                        ShadowDepth="10" />
                                </Label.BitmapEffect>
                            </Label>
                            <Label Width="Auto" Height="Auto" 
                                   Content=" : " 
                                   FontSize="14"  />
                            <Label Width="50" Height="20" 
                                   Background="{Binding Path={}}" >
                                <Label.BitmapEffect>
                                    <DropShadowBitmapEffect />
                                </Label.BitmapEffect>
                            </Label>
                        </StackPanel>
                    </DataTemplate>
                </ComboBox.ItemTemplate>
            </ComboBox>
        </StackPanel>
    </Grid>
</Window>

Saya menggunakan StackPanel sebagai layout. Combobox yang digunakan sudah tidak standard lagi. Disini digunakan template untuk menampilkan nama warna pada control label dan juga warnanya itu sendiri yang juga di render pada control label. Untuk membuat template seperti di atas, anda cukup memanggil <xxx.ItemTemplate> element. Dimana xxx tersebut bergantung pada control yang kita gunakan. Untuk mendefinisikan datanya digunakan <DataTemplate>. Di dalam DataTemplate element tersebut anda bebas mau merender apapun dengan control yang diingikan.

Hal yang harus diperhatikan yaitu penggunaan perintah {Binding Path={}}. Perintah ini digunakan sebagai DataBinding. DataSource nya dapat kita definisikan secara runtime. Atribut Path diisi dengan nama member yang terdapat di dalam data source yang digunakan. Apabila anda lihat di atas, Path atribut yang terdapat di dalam {Binding Path={}} diisi dengan {}. Artinya tidak terdapat nama member yang digunakan, karena disini saya menggunakan enumerasi warna yang terdapat di dalam .net framework. Kecuali di dalam data source tersebut terdapat nama member yang akan digunakan sebagai DisplayMemberPath, seperi misalnya member CompanyName kalau data source diisi dengan data Customer table yang terdapat di dalam database Northwind.

Pada code diatas terdapat penggunaan <Label.BitmapEffect>. Element ini digunakan untuk membuat effect pada object tersebut, salah satunya seperti DropShadow. Dengan DropShadow ini, maka object tersebut akan memiliki bayangan. Jarak antara object aslinya dengan bayangan dapat kita atur dengan menggunakan atribut ShadowDepth yang anda isi dengan angka tertentu.

Label control terakhir yang terdapat di dalam DataTemplate digunakan untuk menampilkan kotak berwarna. Pengaturannya dilakukan terhadap properti Background. Sehingga warna background yang tampil akan sesuai dengan nama warnanya.

Sekarang kita tambahkan sedikit code pada event window loaded di code behind Window1.xaml :

Private Sub Window1_Loaded(ByVal sender As Object, _
                           ByVal e As System.Windows.RoutedEventArgs) _
                           Handles Me.Loaded

    Me.cboColor.ItemsSource = _
    From c In [Enum].GetNames(GetType(System.Drawing.KnownColor))

End Sub

Anda juga dapat merubah color fontnya dengan warna yang sesuai dengan nama warnanya, caranya simple, seperti yang dilakukan terhadap label object untuk menampilkan kotak warna diatas. Cukup rubah dengan code seperti dibawah ini :

<ComboBoxWidth="310"Height="40"Name="cboColor">
    <ComboBox.ItemTemplate>
        <DataTemplate>
             <StackPanelOrientation="Horizontal">
                <LabelWidth="175"Height="Auto"
                      Content="{BindingPath={}}"
                      FontSize="14"
                      Foreground="{BindingPath={}}">

Cukup segitu aja dulu coding-ria nya untuk kali ini... :)

Share this post: | | | |