Drawing complicated pattern

[NickThissen]

Hi,

I am refining my VS2010 control renderers and I'm working on the TabControl at the moment.

If you take a screenshot of the VS2010 IDE and zoom in on the background of the TabControl (where there are no tabs), then you might see that it consists of a pattern of dots with a slightly different color than the surrounding background. I am trying to draw these dots (yes, I'm going for perfection), but I cannot find a brush that allows me to do this.


I am pretty sure I'd have to use a HatchBrush with the right HatchStyle, but I cannot find a matching style...

Here is a screenshot showing:
1. The VS2010 background I'm trying to draw (higher contrast and brightness otherwise it's hardly visible),
2. The HatchStyle that is closest to this (DottedDiamond)
3. Why this HatchStyle is not correct (it's missing dots where the green dots are, which I photoshopped in).



Now of course I'm going to have to draw the pattern twice (there are two patterns, offset by 1 pixel, with a slightly different color), but the more pressing problem is the green dots seen in the third image. They aren't there with the DottedDiamond style, and no other style (I think I've tried them all, but hey I might have missed some..) produces a better output.


Any tips on how I can draw this? Thanks!

[ForumAccount]

Nick, I feel that DottedDiamond is by far not the closest match:

Using b As New HatchBrush(HatchStyle.Percent20, _
                                  Color.FromArgb(53, 73, 106), _
                                  Color.FromArgb(43, 60, 89))
    e.Graphics.FillRectangle(b, Me.ClientRectangle)
End Using

Check the pictures: One is VS2010 and one is that pattern...

[NickThissen]

You're right, that one is the same pattern, cool! Dunno how I missed that.

Anyway, I'm now trying to get the pattern twice in a different color (as the original), but somehow that isn't working.

I'm trying this code right now:

Private Sub Form1_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint
 
        'Background
        Using backBrush As New SolidBrush(Color.Red)
            e.Graphics.FillRectangle(backBrush, Me.ClientRectangle)
        End Using
 
        'First dots
        Using dot1Brush As New Drawing2D.HatchBrush(Drawing2D.HatchStyle.Percent20, Color.White, Color.Transparent)
            e.Graphics.FillRectangle(dot1Brush, Me.ClientRectangle)
        End Using
 
        'Second dots (offset one pixel)
        Using dot2Brush As New Drawing2D.HatchBrush(Drawing2D.HatchStyle.Percent20, Color.Black, Color.Transparent)
            e.Graphics.TranslateTransform(0, -1)
            e.Graphics.FillRectangle(dot2Brush, Me.ClientRectangle)
            e.Graphics.ResetTransform()
        End Using
 
    End Sub

(Sorry, the colors don't match at all they are just for increased contrast for testing)

So, I'm first simply drawing the background, then I draw one set of dots, and finally I draw the second set of dots, where I offset the graphics by 1 pixel before drawing.

The result is only the black dots (third drawing). Even though I'm using Color.Transparent as the second color (space between the dots), the second set of dots doesn't show through.

I must be missing something, but why isn't this working? :/



EDIT
Oh well, even without the darker dots (and just the lighter dots) it looks really well already. I think it looks quite like the real IDE:

[ForumAccount]

It's because no matter what, the hatch pattern (in this case the dots) will be drawn in the exact same place. I don't know of a way you can offset the hatch drawing.

[NickThissen]

Really? That's a bit strange... It seems you're right, even if I rotate the graphics object before drawing the second set of dots, it still draws them as usual.

It seems the question has changed from 'how do I draw the dots' to 'how do I offset them'... I'll google around and probably make a new thread if I can't find anything.