Custom drawing translucent list items over background image 1

[djjd47130]

I've been playing a lot lately with custom drawing list items in a grid... Most of it I can figure out myself, but the main challenge I have is drawing translucent lines. Look at this sample:

This is from the Windows Media Player. The term I believe is glass effect, right? Well I want to know how to do such drawing.

I am building a component based on a TStringGrid which looks like a TListView. When the new windows glass themes are enabled, it shows translucent highlighting. I'm sure there's some tricks inside the canvas, but can't figure it out. The purpose is I may have a background image in the list, and when a line is selected, the top portion of the line should be opaque, while getting more and more transparent towards the bottom, but it still needs to see through to the background image.

I just wanted to know some tips and tricks on this, just basic canvas maneuvers which can accomplish this.

Here's a sample of how it shall be drawing... Suppose there's 18 lines of pixels from the top to bottom of the list item's Rect (obtained on the draw cell event). This comes from setting the grid's DefaultRowHeight to 18. This is a sample of how each of those lines should be drawn. Starting from the top of the grid's row (Y = 0), it will loop for each pixel to the bottom of the grid's row. The corners will be cut off to make a rounded effect. The first and last line are also emitted to leave a space between each item. The left and right are indented by 3 pixels. To cut the corners to make it rounded, the first and last lines are indented by 5 and the second are indented by 4. The rest in between are 3. The only thing I can't figure out is how to make the transparency properly.

Y = Distance from top of list item - from the Rect of the drawing event
X = Margin from left/right of list item, to make rounded effect
R/G/B = Pixel color, starting with black
T = Transparency, starting with opaque, ending with last line of opaque for border

Y   X   R   G   B   T
000 (No line)
001 005 000 000 000 000 //Black line, indented edges
002 004 005 005 005 010 //Dark line, indented edges
003 003 010 010 010 020
004 003 015 015 015 030
005 003 020 020 020 040
006 003 025 025 025 050
007 003 030 030 030 060
008 003 035 035 035 070
009 003 040 040 040 080 //Blended gray line, can see background
010 003 045 045 045 090
011 003 050 050 050 110
012 003 055 055 055 120
013 003 060 060 060 130
014 003 065 065 065 155
015 003 070 070 070 200
016 003 075 075 075 255 //Completely transparent line, indented edges
017 005 000 000 000 000 //Black line, indented edges
018 (No line)

JD Solutions

 

[Glenn9999]

Alpha blending is what you are looking for. Searching Google for that in conjunction with "Delphi" will net a good number of examples. You will have to play with the Alpha blend % to get what you want.

These should be a good start:

http://www.delphi-central.com/tutorials/AlphaBlend.aspx

http://www.codeproject.com/KB/graphics/alpha_blending.aspx

http://msdn.microsoft.com/en-us/library/dd183351(v=vs.85).aspx

Also, newer Delphis support it somewhat natively, so if you are on something > Delphi 2006, you might look for Alpha Blend related settings (I know it exists for forms, but you might have to ownerdraw it for controls).

It is not possible for anyone to acknowledge truth when their salary depends on them not doing it.

 

[djjd47130]

Thanks, that helps. I'm using Delphi 7 and probably will keep using Delphi 7 (for personal reasons).


JD Solutions