DarksideCookie

I had this application that I had built for Microsoft while Silverlight 3 was still in beta. And then when SL  3 went RTW, a feature stopped working. Or as I found out, stopped working partly. After a bit of fiddling, I found a way around it, but it is still annoying. This is the story of finding my first Silverlight 3 RTW issue…

In the application I was using a grid, and an ellipse. The ellipse used a negative margin for different reasons. Basically, the ellipse was an transparent area, that was responsible for handling mouse over and mouse out events. This area was obviously round, and slightly outside the grid. In a colorized version, it looked like this:

The problem was that the ellipse was all of the sudden not working like it should. It wasn’t hit test visible. I hadn’t changed anything, so something must have changed in SL 3 RTW. I figured out that the ellipse was actually hit test visible inside the grid. So parts of it was working. However, since the ellipse was transparent, I tried just give it a colour to see if it was being clipped or something. But as soon as I did, it started working… Hmm… odd… So I turned it transparent again, and it stopped working… So I came up with a work around, set the colour to #01000000. That is, I made it semi transparent, but transparent enough to not be visible. That got it working…

But what was the problem? Well…I tried recreating it in a simpler application. So I wrote the following Xaml

<UserControl x:Class="Silverlight3Transparency.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Background="Green" Width="200" Height="200">
            <Ellipse Width="60" Height="60" Margin="-41,-5,0,0" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="Transparent" />
        </Grid>
    </Grid>
</UserControl>

And loaded it in my browser. But that worked… As you can see in the code, the ellipse has a different cursor. So testing it was kind of easy. But the browser showed it correct. It gave me a hand shaped cursor even outside the grid… hmm… Why wasn’t it working in my other environment. Any differences? Yeah…there was… And that was the answer…

Changing my code into the faulty one was simple. There was only 3 short lines of markup to add

<UserControl x:Class="Silverlight3Transparency.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid Background="Green" Width="200" Height="200">
            <Grid.Effect>
                <DropShadowEffect />
            </Grid.Effect>
            <Ellipse Width="60" Height="60" Margin="-41,-5,0,0" Cursor="Hand" VerticalAlignment="Top" HorizontalAlignment="Left" Fill="Transparent" />
        </Grid>
    </Grid>
</UserControl>

You see the difference? Well…the drop shadow is the culprit… As soon as I added that, my ellipse started getting clipped. Hmm…so that’s my bug. Adding a drop shadow, and I guess any effect, will clip any transparent elements extending outside of the effect adorned element.

I figure the reason is the following. I guess Silverlight converts the element into a bitmap to be to add the effect. Any elements “sticking out” and that aren’t actually visible, won’t be included. The effect of adding effects to elements can be several. On annoying feature is that if you add an effect to an element containing text, the text is blurred…

So…if you need to add effects to transparent things, remember to not make them transparent… In general, adding an effect to a transparent object might seem stupid, but trust me…a lot of things you do when being creative can seem stupid if taken out of context…