[2010-09-04] EruLabel control

[Merri]

Ever used CSS and then went back to your VB6 and missed a bit something? Rounded corners? Margins? Padding? Opacity? I've put together this little control that should make things a little bit nicer. Not perfect, but nicer.



Label features
A lot of the regular Label features are supported!

• Alignment: left, center, right!
• AutoSize: yeah, it works flawlessly.
• BackStyle: enables border & background drawing.
• UseMnemonic: & character works for setting an access key.
• WordWrap: works just like you'd expect it to.
• BackColor, Font, ForeColor, MouseIcon, MousePointer are supported.
• Change, Click, DblClick, MouseDown, MouseMove, MouseUp events are supported.

Special about the MouseDown, MouseMove & MouseUp events is that they use the same ScaleMode as the container! This makes it easier to interact with the X & Y values as you do not need to use ScaleX & ScaleY to make the values match with what you have in your container

Unicode features
The control is Unicode aware. In IDE design time you can use CaptionHex and CodePoints properties to manipulate the Caption string using UTF-16 codes.

• CaptionHex is a simple little endian property. If you copy UTF-16 from a hex editor it'll work here.
• CodePoints shows the same information as a comma separated list displaying the character values in 0 – 65535 range.
• RightToLeft is supported.

CSS features
Some features are made to feel much more familiar from the CSS world. They aren't a perfect imitation, but if you've ever written any CSS stuff you'll feel these features much more convenient than in many other VB6 implementations that do the same thing.

• BorderRadius is a simple numeric value that will give you some rounded corners. The feature is implemented using native Windows API RoundRect, which means you can't expect perfect CSS imitation.
• BorderColor, BorderStyle, BorderWidth give you control of the borders. You do not need to set a width for BorderRadius to round the corners of your EruLabel.
• Margin is a shorthand property nearly identical to what you can find in CSS. It only support px-values, but other than that if you've ever used margins in CSS then you'll find this feature familiar. The order is top, right, bottom, left: 0px 0px 0px 0px
• Padding is a property just like Margin, but it expands the area within the drawn background.
• MarginBottom, MarginLeft, MarginRight, MarginTop, PaddingBottom, PaddingLeft, PaddingRight, PaddingTop allow for individual control of margin & padding.
• Opacity is a floating point value from 0 to 1. 0.5 means the opacity level is at 50%. Just like in CSS!

Note that Margin & Padding also replicate values like in CSS! If you do:

EruLabel.Padding = "1px 2px"

it will be understood as:

EruLabel.Padding = "1px 2px 1px 2px"

Which means top & bottom padding = 1 pixel, right & left padding = 2 pixels

You can even just write 5 in the IDE property window and it turns into 5px 5px 5px 5px!


Special notes
This control has been written quickly in just one day (24 hours). I took advantage of my old UniLabel project. I can't yet claim this control to be entirely bug free. But it should be pretty stable: it does not use subclassing! If you have any problems then post them here, tell me what you tried to do, what you expected to happen and then what you got.

This control does not support MouseEnter & MouseLeave events like UniLabel does.
Data binding & Link features supported by native Label are not supported.

[Edgemeal]

Pretty nice!

[Merri]

Further development could include drawing antialiased rounded borders, BoxShadow, TextShadow, BorderWidth for each border separately, support for em, pt & % values in Border, BorderWidth, Margin, Padding... yeah, that is a lot of stuff. The em's pixel value is actually calculated by the control already, it is the same value that defines the font height in the LOGFONT structure.

[babyjesus]

should add code tags like hyperlabel with [img] support for png's now that would be the ultimate label control

[brandoncampbell]

Yeah, I would personally love to see how it is done to add html like rendering "/b" or hyperlinks. I had the worst time compiling a component to do just that.

[Merri]

Doing it "properly" would require writing a DOM tree engine as well as a HTML parser. So internally there would be "nodes" such as a text node, which can be followed by another node, which both could be inside another node. A node would not be exactly the same thing as a HTML element. Then to style these elements via CSS there should be an interface that could be manipulated and which would be dynamic... you'd pretty much end up with a very limited poor man's rendering engine, a lightweight Gecko/Trident/WebKit/Presto etc. So it would be a complex project that would involve a lot of files. Doing it all with just one file would be insane. EruLabel as it is now is more like a single block level element at the moment (inline element would be like text that flows from character to character, line to line).

Doing it the simple way would involve just some limited features that are added so that it would be known when different kind of text is drawn. And doing that properly would mean adding new stuff should be easy, but coding that kind of stuff is hard. Or, harder than just hardcoding what you want.

I don't find it worth of my time; while it would have a cool factor, there are far more important projects that actually matter to me One being translating Civilization V to Finnish.

[brandoncampbell]

my limited knowledge lead me to doing something like this..

    If m_Colorize Then
        p_strWord() = Split(xi_strCaption)
        
        For p_intLoop = LBound(p_strWord) To UBound(p_strWord)
            
            'p_lngTextHeight = DrawText(hdc, p_lngTemp & Space$(1), Len(Trim(p_lngTemp)) + 1, p_typRect, DT_CALCRECT)
'            Call SetRect(p_typRect, p_lngTextLength, p_lngTextHeight, UserControl.ScaleWidth, UserControl.ScaleHeight)
            Call SetRect(p_typRect, p_lngTextLength, 0, UserControl.ScaleWidth, UserControl.ScaleHeight)
            
          

            If InStr(p_strWord(p_intLoop), "/b") Then
                p_lngTemp = Trim(Replace(p_strWord(p_intLoop), "/b", "")) '& Space$(1)
                Call SetTextColor(hDC, vbBlack)
                UserControl.Font.Bold = True
                
                'Call DrawText(hDC, (p_lngTemp & Space$(1)), Len(Trim(p_lngTemp)) + 1, p_typRect, DT_CALCRECT)
                Call DrawText(hDC, (p_lngTemp), Len(Trim(p_lngTemp)), p_typRect, DT_SINGLELINE + DT_LEFT + DT_VCENTER)
                
            Else
                p_lngTemp = p_strWord(p_intLoop) '& Space$(1)
                Call SetTextColor(hDC, vbBlack)
                UserControl.Font.Bold = False
                'Call DrawText(hDC, (p_lngTemp & Space$(1)), Len(Trim(p_lngTemp)) + 1, p_typRect, DT_CALCRECT)
                Call DrawText(hDC, (p_lngTemp), Len(Trim(p_lngTemp)), p_typRect, DT_SINGLELINE + DT_LEFT + DT_VCENTER)

            End If
            
            p_lngTextLength = p_lngTextLength + (UserControl.TextWidth(p_lngTemp & Space$(1)))
            

        Next
    Else
        
        Call SetRect(p_typRect, 0, 0, UserControl.ScaleWidth, UserControl.ScaleHeight)
        Call DrawText(hDC, xi_strCaption, Len(xi_strCaption), p_typRect, DT_CALCRECT)
        Call DrawText(hDC, xi_strCaption, Len(xi_strCaption), p_typRect, DT_LEFT + DT_VCENTER)
       
    End If

it was just used in a single line label control that allowed me to point out something in bold.

[Cube8]

Very nice!

I made a LinkLabel control a long time ago but with very limited functionality... Just FontHover, FontNormal and the Windows hand cursor... I'll try to combine them (if I get some spare time) and post the result here.