- 12 Eyl 2010
- 655
- 0
Resimli ComboBox
Bu yazıda adım adım combobox, listbox gibi liste kontrollerindeki elemanların görüntülerinin nasıl değiştirilebileceğinizden bahsedeceğim.
Örnekteki combobox kontrolünde 3 tane elemana sahip ve her elemanın kendine ait normal resmi, hover (mouse ile üstüne geldiğinizde görünen resim) resmi ve yazısı var. eğer bir nesnenin üstünde fare ile gezerseniz hem hover resimli hali gözüküyor hemde yazının arka plan rengi yazının kendi rengi değişiyor.
Bu özellik kontrolün çizimine müdahele etmenizi sağlar. 3 seçeneği vardır :
1) Normal : Bu seçenekte çizim işletim sistemine bırakılır ve bütün elemanların boyutları aynıdır. Siz müdahalede bulunamazsınız.
2) OwnerDrawFixed : Bu seçenekte çizime müdahele edebilirsiniz ancak bütün elemanların boyutları aynıdır.
3) OwnerDrawVariable : Bu seçenekte çizime müdahele edebilirsiniz ve elemanların boyutları farklı olabilir.
İlk olarak değişkenlerimizi tanımlayalım. Bu değişkenlerin global (kodunuzda her yerde geçerli) olmasına dikkat edin. Bunun için bu değişkenleri herhangi bir metot (Private Sub ile başlayanlar metotdur) içine yazmayın. Mümkünse Windows Form Designer generated code Bölümünün hemen altına yazın.
Private images(3) As Bitmap ‘ Normal resim
Private images_hover(3) As Bitmap ‘ Hover resim
Private texts(3) As String ‘ Yazı
Değişkenleri dizi değişkeni tanımladığıma dikkat edin. Böylece ileride bir projede kullanmaya çalıştığınızda çok daha rahat düzenleyebilirsiniz.
Fontu değiştirmek için System.Drawing.Font sınıfından bir nesne yaratın. Böylece ComboBox daki yazılarınız bu fontta görüntülenecek.
Private fnt As New Font("Tahoma", 8)
Formun load olayında dizilerinizi hazırlayın ve combobox kontrolüne elemanları ekleyin.
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
images(0) = New Bitmap("img/CPlusPlus.gif")
images(1) = New Bitmap("img/CSharp.gif")
images(2) = New Bitmap("img/VisualBasic.gif")
images_hover(0) = New Bitmap("img/CPlusPlus_hover.gif")
images_hover(1) = New Bitmap("img/CSharp_hover.gif")
images_hover(2) = New Bitmap("img/VisualBasic_hover.gif")
texts(0) = "C ++"
texts(1) = "C Sharp"
texts(2) = "Visual Basic"
ComboBox1.Items.Add(texts(0))
ComboBox1.Items.Add(texts(1))
ComboBox1.Items.Add(texts(2))
End Sub
Ben resimleri exe nin bulunduğu klasörün içinde img klasörünü oluşturup, oraya koydum. Bu arada resimler ikiye ayrılıyor. Hover durumları için ayrı, normal durumları için ayrı.
Son olarak combobox kontrolündeki elemanların çizimine müdahele edilen combobox ın DrawItem olayına aşağıdaki kodları ekleyerek çiziminizi yapın.
Private Sub ComboBox1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles ComboBox1.DrawItem
If e.Index <> -1 Then
If e.State And DrawItemState.Focus Then
e.Graphics.FillRectangle(Brushes.DarkGray, e.Bounds)
e.Graphics.DrawImage(images_hover(e.Index), e.Bounds.X, e.Bounds.Y)
e.Graphics.DrawString(texts(e.Index), fnt, Brushes.LightBlue, images(e.Index).Width + 10, e.Bounds.Y)
Else
e.Graphics.FillRectangle(Brushes.White, e.Bounds)
e.Graphics.DrawImage(images(e.Index), e.Bounds.X, e.Bounds.Y) e.Graphics.DrawString(texts(e.Index), fnt, Brushes.Black, images(e.Index).Width + 10, e.Bounds.Y)
End If
End If
End Sub
Burada ilk önce DropDownStyle özelliğini DropDownList olarak ayarlamanız gerekiyor. Bu özellik size combobox da varsayılan olarak hiçbir elemanın seçili olmadan gelmesini sağlar. Eğer combobox da hiçbir eleman seçili değilse e.Index property si -1 e eşit olur.
e.State ve DrawItemState.Focus size hangi elemanın üstünde gezilip gezilmediğini anlatır. Eğer elemanın üstünde ise olumlu sonuç (True) çıkartır.
Eğer bir elemanın üstünde ise o elemanın arka planı e.Graphics.FillRectangle ile boyanır eğer seçili ise ben o elemanın içeriğini koyu gri ile boyuyorum. E.Graphics.DrawImage ise seçili elemandaki benim istediğim resmi gösterir, burada ben images_hover dizisinden (array) seçili elemanın index ini getirtiyorum. Son olarakta E.Graphics.DrawString ile de resimlerin yanında görüntülenmesini istediğim yazıyı seçiyorum. Yazının rengini açık mavi olarak seçiyorum ve nereden başlamasın gerektiğini anlatıyorum.
Else bölümünde ise seçili olmayan elemanlarla ilgili aynı işlemleri yapıyorum. Bu bölümü anlatmayacağım çünkü seçili olma ihtimali ile aynı metotlar kullanılıyor.
Son olarakta seçili olan elemanın hangisi olduğunu anlamak kalıyor.
Bunun için ise seçili olan elemanın index ini bulup bunu ComboBox ın arrayinde hangisine karşılık geldiğine göre bulabilirsiniz. Aşağıdaki örnek kodda ben formuma bir label ekledim ve labelde gösteriyorum.
Private Sub ComboBox1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ComboBox1.SelectedIndexChanged
Label1.Text = ComboBox1.Items(ComboBox1.SelectedIndex)
End Sub
Bu makalede ComboBox kontrolünün ekrana çizilmesi durumunda açılan listesinde resimler gösterilmesini sağladık. Bu yazının kodlarını isterseniz buradan indirebilirsiniz. Bir başka yazıda görüşmek üzere. Bu makale ile ilgili sorularınızı bana maille gönderebilirsiniz.
Bu yazıda adım adım combobox, listbox gibi liste kontrollerindeki elemanların görüntülerinin nasıl değiştirilebileceğinizden bahsedeceğim.
Örnekteki combobox kontrolünde 3 tane elemana sahip ve her elemanın kendine ait normal resmi, hover (mouse ile üstüne geldiğinizde görünen resim) resmi ve yazısı var. eğer bir nesnenin üstünde fare ile gezerseniz hem hover resimli hali gözüküyor hemde yazının arka plan rengi yazının kendi rengi değişiyor.
- Yeni bir Visual Basic Windows Forms projesi açın.
- Formun üzerine bir tane combobox ekleyin.
- Combobox kontolünü seçip properties penceresinden DrawMode özelliğini OwnerDrawFixed olarak değiştirin.
Bu özellik kontrolün çizimine müdahele etmenizi sağlar. 3 seçeneği vardır :
1) Normal : Bu seçenekte çizim işletim sistemine bırakılır ve bütün elemanların boyutları aynıdır. Siz müdahalede bulunamazsınız.
2) OwnerDrawFixed : Bu seçenekte çizime müdahele edebilirsiniz ancak bütün elemanların boyutları aynıdır.
3) OwnerDrawVariable : Bu seçenekte çizime müdahele edebilirsiniz ve elemanların boyutları farklı olabilir.
İlk olarak değişkenlerimizi tanımlayalım. Bu değişkenlerin global (kodunuzda her yerde geçerli) olmasına dikkat edin. Bunun için bu değişkenleri herhangi bir metot (Private Sub ile başlayanlar metotdur) içine yazmayın. Mümkünse Windows Form Designer generated code Bölümünün hemen altına yazın.
Private images(3) As Bitmap ‘ Normal resim
Private images_hover(3) As Bitmap ‘ Hover resim
Private texts(3) As String ‘ Yazı
Değişkenleri dizi değişkeni tanımladığıma dikkat edin. Böylece ileride bir projede kullanmaya çalıştığınızda çok daha rahat düzenleyebilirsiniz.
Fontu değiştirmek için System.Drawing.Font sınıfından bir nesne yaratın. Böylece ComboBox daki yazılarınız bu fontta görüntülenecek.
Private fnt As New Font("Tahoma", 8)
Formun load olayında dizilerinizi hazırlayın ve combobox kontrolüne elemanları ekleyin.
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
images(0) = New Bitmap("img/CPlusPlus.gif")
images(1) = New Bitmap("img/CSharp.gif")
images(2) = New Bitmap("img/VisualBasic.gif")
images_hover(0) = New Bitmap("img/CPlusPlus_hover.gif")
images_hover(1) = New Bitmap("img/CSharp_hover.gif")
images_hover(2) = New Bitmap("img/VisualBasic_hover.gif")
texts(0) = "C ++"
texts(1) = "C Sharp"
texts(2) = "Visual Basic"
ComboBox1.Items.Add(texts(0))
ComboBox1.Items.Add(texts(1))
ComboBox1.Items.Add(texts(2))
End Sub
Ben resimleri exe nin bulunduğu klasörün içinde img klasörünü oluşturup, oraya koydum. Bu arada resimler ikiye ayrılıyor. Hover durumları için ayrı, normal durumları için ayrı.
Son olarak combobox kontrolündeki elemanların çizimine müdahele edilen combobox ın DrawItem olayına aşağıdaki kodları ekleyerek çiziminizi yapın.
Private Sub ComboBox1_DrawItem(ByVal sender As Object, ByVal e As System.Windows.Forms.DrawItemEventArgs) Handles ComboBox1.DrawItem
If e.Index <> -1 Then
If e.State And DrawItemState.Focus Then
e.Graphics.FillRectangle(Brushes.DarkGray, e.Bounds)
e.Graphics.DrawImage(images_hover(e.Index), e.Bounds.X, e.Bounds.Y)
e.Graphics.DrawString(texts(e.Index), fnt, Brushes.LightBlue, images(e.Index).Width + 10, e.Bounds.Y)
Else
e.Graphics.FillRectangle(Brushes.White, e.Bounds)
e.Graphics.DrawImage(images(e.Index), e.Bounds.X, e.Bounds.Y) e.Graphics.DrawString(texts(e.Index), fnt, Brushes.Black, images(e.Index).Width + 10, e.Bounds.Y)
End If
End If
End Sub
Burada ilk önce DropDownStyle özelliğini DropDownList olarak ayarlamanız gerekiyor. Bu özellik size combobox da varsayılan olarak hiçbir elemanın seçili olmadan gelmesini sağlar. Eğer combobox da hiçbir eleman seçili değilse e.Index property si -1 e eşit olur.
e.State ve DrawItemState.Focus size hangi elemanın üstünde gezilip gezilmediğini anlatır. Eğer elemanın üstünde ise olumlu sonuç (True) çıkartır.
Eğer bir elemanın üstünde ise o elemanın arka planı e.Graphics.FillRectangle ile boyanır eğer seçili ise ben o elemanın içeriğini koyu gri ile boyuyorum. E.Graphics.DrawImage ise seçili elemandaki benim istediğim resmi gösterir, burada ben images_hover dizisinden (array) seçili elemanın index ini getirtiyorum. Son olarakta E.Graphics.DrawString ile de resimlerin yanında görüntülenmesini istediğim yazıyı seçiyorum. Yazının rengini açık mavi olarak seçiyorum ve nereden başlamasın gerektiğini anlatıyorum.
Else bölümünde ise seçili olmayan elemanlarla ilgili aynı işlemleri yapıyorum. Bu bölümü anlatmayacağım çünkü seçili olma ihtimali ile aynı metotlar kullanılıyor.
Son olarakta seçili olan elemanın hangisi olduğunu anlamak kalıyor.
Bunun için ise seçili olan elemanın index ini bulup bunu ComboBox ın arrayinde hangisine karşılık geldiğine göre bulabilirsiniz. Aşağıdaki örnek kodda ben formuma bir label ekledim ve labelde gösteriyorum.
Private Sub ComboBox1_SelectedIndexChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ComboBox1.SelectedIndexChanged
Label1.Text = ComboBox1.Items(ComboBox1.SelectedIndex)
End Sub
Bu makalede ComboBox kontrolünün ekrana çizilmesi durumunda açılan listesinde resimler gösterilmesini sağladık. Bu yazının kodlarını isterseniz buradan indirebilirsiniz. Bir başka yazıda görüşmek üzere. Bu makale ile ilgili sorularınızı bana maille gönderebilirsiniz.
Son düzenleme:
