Dropdownlist Tasarımını Değiştirme- AJAX DropDown Demonstration

Bildiğiniz gibi bir asp.net dropdown kontrolünün tasarımı üzerinde değişiklik yapmak pek mümkün değildir. Yani cssler ile arkaplan rengini değiştirmek gibi bazı ufak tasarım özelliklerinden bahsetmiyorum, demek istediğim örneğin bir dropdownlist kontrolünün okunun (arrow) rengini ve tasarımını değiştirmek oldukça zahmetli bir iştir. Bu bölümde elimden geldiğince sizlere AJAX DropDown Demonstration kullanarak bu işlemi nasıl gerçekleştireceğimizden bahsedeciğim. Ancak Eğer AJAX DropDown Demonstration kontrolünü incelerseniz bizim standart dropdownlist kontrolünden çok farklı olduğunu göreceksiniz. Bu yazımda başlıca amacım standart bir dropdownlist kontrol görünümü oluşturup sadece dropdown oku üzerinde oynama yapmak olacaktır. Ancak sizde benzer yöntemle değişik dropdownlistler oluşturabilirsiniz.

Yeni bir Web Sayfası Oluşturalım ve Dersimize Başlayalım...
Dropdownlist kontrolümüzde kullanacağımız örnek ok resmi. Bu tip bir resmi kendiniz çizebilir yada googleda bulabilirsiniz..

Dropdownlistimizin bulunacağı sayfaya bir label koyalım.

<asp:Label ID="lbl_UlkeSecimi" runat="server" Text="Ülke Seçiniz" Width="250px" Height="19px" Font-Bold="false"></asp:Label>

Şimdi label'ımıza tıklandığında açılacak olan 'Panel'i oluşturacağız. Bu panelin içini istediğimiz şekilde tabiki de doldurabiliriz, ancak şu anki amacımız dropdownlist görüntüsü elde etmek olduğundan ufak bir hile yaparak bu panelimize bir list view ekleyeceğiz. Aşağıdaki kod bloğunda bunu nasıl yaptığımızı görebilirsiniz..

<asp:Panel ID="Pnl_DropDownList" runat="server" Width="250px" style="display:none">

<asp:ListBox ID="DDL_Country" runat="server"
Width="250px" Height="300px"></asp:ListBox>

</asp:Panel>

Burada paneli display :none diyerek gizledik. Şimdi sayfamıza bir adet DropDownExtender ekleyeceğiz.

<AjaxControlToolkit:DropDownExtender
ID="lbl_UlkeSecimi_DropDownExtender"
runat="server"
BehaviorID="dde"
Enabled="True"
TargetControlID="lbl_UlkeSecimi"
DropDownControlID="Pnl_DropDownList"
HighlightBorderColor="#869970" DropArrowImageUrl="~/images/droparrow.jpg" HighlightBackColor="WhiteSmoke" >

</AjaxControlToolkit:DropDownExtender>

Bu işlemi gerçekleştirdikten sonra sayfamızı çalıştırdığımızda aşağıdaki gibi bir ekran görüntüsü elde ederiz.Aktif olmayan durumda yani sayfamızda kullanılmadığı haldeyken bu şekilde görünecektir.

Mouse ile üzerine geldiğimizde ve aktif bir şekilde kullandığımızda dropdown list görüntüsü elde ediyoruz.

Ancak sizinde farkettiğiniz gibi eğer mouse üzerinde değilse düz bi yazı gibi görünmekte ve bu pek de istediğimiz bir sonuç değil, amacımız bir dropdown oluşturmaktı. Bu nedenle burada yine ufak bir hileye başvuracağız, sayfamız üstteki resim gibi göründüğünde PrintScreen tuşu ile bir ekran görüntüsü alalım ve içindeki yazıyı herhangi bir image editör ile temizleyelim. (bu örnekte bu işlem için photoshop programını kullandım)

Elde edeceğimiz imaj aşağıdaki gibi olacaktır....

Şimdi, bu imajı sayfamıza en başta eklediğimiz lbl_UlkeSecimi adlı label'ımıza arkaplan olarak atayalım. Bunun için div tagı eklememiz yeterli olacaktır. Aşağıda div tagı eklenmiş haldeki kod bloğunu görebilirsiniz

<div style="background-image: url(images/dropdownback.jpg); width:250px; height:19px;">
<asp:Label ID="lbl_UlkeSecimi" runat="server" Text="Ülke Seçiniz" Width="250px" Height="19px" Font-Bold="false"></asp:Label>
</div>

Projemizi tekrar çalıştırdığımızda aşağıdaki ekran görüntüsünü elde edebilirsiniz...

Umarım bu çalışma faydalı olmuştur....