Wednesday, June 23, 2010

ToolTip for Disabled Element in Silverlight

I noticed that there are many conversations departing in Silverlight forums regarding tool tip support for disabled elements in Silverlight. Silverlight program manager also accepts here that having the ToolTip not show on a disabled element is by design. However some folks suggesting mouse enter and mouse leave, and some evoking style modification, etc... But these approach not applicable when you develop your Silverlight application in MVVM pattern. Here is the simple approach that helps you to set tooltip for disabled item.

Host a rectangle on top of your element in a grid and bind the visibility property of the Rectangle with IsEnabled property of target element (Make sure that you have BooleanToVisibilityConverter like one in WPF). And bind your business property with tooltip of the rectangle as well as for your target element if you want to display in enabled state also. And also don’t forget to bind Rectangle Width and Height property with ActualWidth and ActualHeight of Button.

Here is the code.

<Grid Margin="30,0,20,0”>
<Button x:Name="MyButton" Content="See My ToolTip when I am in Disabled" IsEnabled="{Binding Path=IsEnabled}"/>
<Rectangle x:Name="toolTipForDiabledButton" Visibility="{Binding Path=IsEnabled, ElementName=AddButton, Converter={StaticResource BoolToVisibilityConverter}}" ToolTipService.ToolTip="{Binding Path=MyToolTip, Mode=TwoWay}" Fill="Transparent"
Width="{Binding Path=ActualWidth, ElementName=AddButton}" Height="{Binding Path=ActualHeight, ElementName=AddButton}">

Hope this helps for MVVM folks.