Sep
10
2011

Customize App Button for Ultratoolbar

Simple problem. Simple Solution.

You’re using the Infragistics Ultratoolbar control to get that Microsoft Ribbon going and you want to customize the App Button’s image, but when you set a custom image as the AppButton in the toolbar it doesn’t look as good as the default Infragistics button.

Default App Button

Default App Button Display and Functionality

While the default image encompasses the entire button and has a fading mouse over effect , a custom button will leave a small border surrounding our image and does nothing when the mouse hovers over it.

Let’s fix this.

Before we start coding, we will need to make 2 images in Photoshop. One will be the default App Button Image and the other will be our “mouse over” version”.

     

To make the images, we create a square canvas of any resolution and create  a circle within that square. To make the mouse over image I copied the default image and lightened the background color a little. I saved both images as 43×43 PNG files.

For this example I made the images a little prettier by adding a mask and a gradient effect. This emulates the Apple App Store icon style.

Now we have to implement our images in our code. For this example I added the images as Application Resources.

I then create my AppButtonFilter class

 C# |  copy code |? 
01
public class AppButtonFilter : IUIElementDrawFilter
02
{
03
        public AppButtonFilter()
04
        {
05
            IsMouseOver = false;
06
        }
07
 
08
        public DrawPhase GetPhasesToFilter( ref UIElementDrawParams pDrawParams )
09
        {
10
            if (pDrawParams.Element is Infragistics.Win.UltraWinToolbars.ApplicationMenuButtonUIElement)
11
                return DrawPhase.BeforeDrawImage;
12
            else
13
                return DrawPhase.None;
14
        }
15
 
16
        public bool DrawElement( DrawPhase drawPhase, ref UIElementDrawParams pDrawParams )
17
        {
18
            Rectangle elementRect = pDrawParams.Element.Rect;
19
 
20
            elementRect.Inflate( -1, -1 );
21
            if (!IsMouseOver)
22
                pDrawParams.DrawImage( Properties.Resources.sample_btn, elementRect, true, null );
23
            else
24
                pDrawParams.DrawImage( Properties.Resources.sample_btn_over, elementRect, true, null );
25
 
26
            return true;
27
        }
28
 
29
        public bool IsMouseOver
30
        {
31
            get;
32
            set;
33
        }
34
}

To briefly explain what this class does, I am inheriting from Infragistics IUIElementDrawFilter interface, used to implement drawing filters for all their controls. For this interface I have to implement the GetPhasesToFilter method that allows us to define what parts of the control we will want to modify. It is almost similar to event declarations.  You can see that I am verifying if the element of the argument is what I want to modify, aka the ApplicationMenuButtonUIElement. If it is that element then I return when I would like any modifications to occur. In this example I returned that I want to modify before the image is drawn.

Next I implement the DrawElement method that will contain the actual code to modify the button’s image.  In this block of code I am taking the rectangle that the button image is contained in and shrinking it by 1 pixel so that it completely surrounds our image and doesn’t leave a border.

Then I check to see if the mouse is currently hovering over our button by checking our IsMouseOver property and depending on its value, I draw the correct image.

Next we set the DrawFilter property of our toolbar to a new instance of the AppButtonFilter class we just created. I do this within the constructor of the Form that contains the toolbar control.

 C# |  copy code |? 
1
ultraToolMgr.DrawFilter = new AppButtonFilter();

While we’re at it, let’s declare the mouse enter element and mouse leave element events for the toolbar so we can track when the mouse enters and hovers over our button.

 C# |  copy code |? 
1
ultraToolMgr.MouseEnterElement += new Infragistics.Win.UIElementEventHandler( ultraToolMgr_MouseEnterElement );
2
ultraToolMgr.MouseLeaveElement += new Infragistics.Win.UIElementEventHandler( ultraToolMgr_MouseLeaveElement );

 C# |  copy code |? 
01
void ultraToolMgr_MouseLeaveElement( object sender, Infragistics.Win.UIElementEventArgs e )
02
{
03
        if (e.Element is Infragistics.Win.UltraWinToolbars.ApplicationMenuButtonUIElement) {
04
                ((AppButtonFilter)ultraToolMgr.DrawFilter).IsMouseOver = false;
05
        }
06
}
07
 
08
void ultraToolMgr_MouseEnterElement( object sender, Infragistics.Win.UIElementEventArgs e )
09
{
10
        if (e.Element is Infragistics.Win.UltraWinToolbars.ApplicationMenuButtonUIElement) {
11
                ((AppButtonFilter)ultraToolMgr.DrawFilter).IsMouseOver = true;
12
        }
13
}

In our MouseEnterElement and MouseLeaveElement events we verify that the element we are dealing with is our ApplicationMenuButtonUIElement and then we simply set the IsMouseOver property of our custom DrawFilter class to its appropriate value.

Finally our end result is this:

Custom Toolbar App Image

Related Posts

About the Author: Jared Miller

Leave a comment