Dmitry Kostochko

HowTo: .NET controls in Internet Explorer – natural behavior and look-and-feel

As for the way .net controls behave in Internet Explorer, it's Okay, Add-in Express will take care of it. As concerns their look-and-feel, we are going to scrutinize this issue closely today.

Standard .NET controls look rather clumsy in Internet Explorer. For example, this is how a usual ToolStrip looks like:

Internet Explorer with an embedded .net ToolStrip control

It is not perceived like a native IE control, the background is obviously different. Let's try to change its paint and make its look-and-feel more natural. We will need to use several Win32 API functions:

_
Public Shared Function LoadLibrary(ByVal lpFileName As String) As IntPtr
End Function
 _
Public Shared Function GetProcAddress(ByVal hModule As IntPtr, _
ByVal lpProcName As String) As IntPtr
End Function
 _
Public Shared Function FreeLibrary(ByVal hModule As IntPtr) As Boolean
End Function

Now we create our own control:

Class MyCustomToolStrip
    Inherits ToolStrip
 
Public Sub New()
    MyBase.New()
    If Not Me.DesignMode Then
        Me.DoubleBuffered = True
 
        hThemeModule = LoadLibrary("UxTheme.dll")
        If hThemeModule <> IntPtr.Zero Then
            Dim dllIsThemeActive As IntPtr = GetProcAddress _
              (hThemeModule, "IsThemeActive")
            If dllIsThemeActive <> IntPtr.Zero Then
                IsThemeActive = DirectCast _
                  (Marshal.GetDelegateForFunctionPointer _
                  (dllIsThemeActive, GetType(DllIsThemeActive)), _
                  DllIsThemeActive)
            End If
 
            Dim dllDrawThemeParentBackground As IntPtr = _
              GetProcAddress(hThemeModule, "DrawThemeParentBackground")
            If dllDrawThemeParentBackground <> IntPtr.Zero Then
                DrawThemeParentBackground = DirectCast _
                  (Marshal.GetDelegateForFunctionPointer _
                  (dllDrawThemeParentBackground, _
                  GetType(DllDrawThemeParentBackground)), _
                  DllDrawThemeParentBackground)
            End If
 
            Application.EnableVisualStyles()
            Application.DoEvents()
        End If
    End If
End Sub
 
'

End Class

Repainting the background:

Protected Overrides Sub OnPaintBackground(ByVal e As PaintEventArgs)
    If hThemeModule <> IntPtr.Zero AndAlso Not DesignMode Then
        If IsThemeActive() Then
            Dim hdc As IntPtr = IntPtr.Zero
            Dim rect As New RECT(0, 0, Width, Height)
 
            hdc = e.Graphics.GetHdc()
            If hdc <> IntPtr.Zero Then
                Try
                    DrawThemeParentBackground(Me.Handle, hdc, rect)
                Finally
                    e.Graphics.ReleaseHdc(hdc)
                End Try
            End If
            Exit Sub
        End If
    End If
    MyBase.OnPaintBackground(e)
End Sub

Modifying the Paint method a little bit:

Protected Overrides Sub OnPaint(ByVal e As PaintEventArgs)
    MyBase.OnPaint(e)
    If hThemeModule <> IntPtr.Zero AndAlso Not DesignMode Then
        If IsThemeActive() Then
            Dim hdc As IntPtr = IntPtr.Zero
            Dim rect As New RECT(0, Height - 2, Width, Height)
 
            hdc = e.Graphics.GetHdc()
            If hdc <> IntPtr.Zero Then
                Try
                    DrawThemeParentBackground(Me.Handle, hdc, rect)
                Finally
                    e.Graphics.ReleaseHdc(hdc)
                End Try
            End If
        End If
    End If
End Sub

And, enjoying the result:

ToolStrip control with natural look-and-feel in IE7

The difference is evident, isn't it?

You may also be interested in:

How to create an IE add-on step-by-step
How to build an IE toolbar with custom buttons
How to develop an Explorer bar and context menu

Available downloads:

This sample add-in was developed using
Add-in Express for Internet Explorer

C# sample IE add-on for VS 2005  
VB.NET sample IE add-on for VS 2005

2 Comments

  • https://secure.gravatar.com/avatar/19ef8f176eef1af676c918b1e5589d34?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Artyom says:

    Hello!
    Thanks for your post. It’s very intresting!!!
    Now I’m working on IE plugIn and want to make visual style looks like real IE (background and mouseover effect). As I understand in your post you changed only background. Could you help me change mouseover event.

  • https://secure.gravatar.com/avatar/ab4ec2858cfdf1e44dadf8c50fae314d?s=32&d=https%3A%2F%2Fsecure.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D32&r=G Dmitry Kostochko (Add-in Express Team) says:

    Hello Artyom,

    Right, in this sample we change the background only. As for changing the mouseover behavior, we don’t have such code, I am sorry.

Post a comment

Have any questions? Ask us right now!