WynApse Home Page
Home    Blog    About    Contact       
Latest Article:


My Tags:
My Sponsors:






Lifetime Member:

Silverlight 1.0 Beta to RC 1 Conversion



Silverlight 1.0 RC 1 Conversion Issues

All through the time waiting for RC 1, I had read the Breaking Changes posting by Joe Steagman, and aside from knowing I had to change Visibility="HIdden" to Visibility="Collapsed" a few places, I thought I was golden.

As I've blogged about already, that turned out to NOT be the case. The bulk of the problems stemmed from one change that had to be made in each page, but there were still a few hold-outs, specifically the Reflection Builder and Video Reflection pages, and since I finished the second round of changes about 1:30 am today, I decided to give it a rest until later this afternoon.

Since I've had a few changes to make, I'll list them as headings below, including the one I blogged about. I still have one page that is working different than before, so if I find other issues, I'll tack them on the bottom of this article.

Sys.Silverlight

This was the one that caused the bulk of my problems and made me modify at least one piece in every page. I'm using createObjectEx in my pages, and prior to RC1, this was called via "Sys.Silverlight.createObjectEx". The "Sys." is now a problem, and needs to be removed.

Opacity vs Visibility

I've got a good handle on the differences, and even mentioned this in the last upgrade to the GlyphMap Utility. You can get yourself into a situation where a Visible, but Opacity 0 object is blocking mouse messages, for instance.

On my Reflection Builder, as I made other changes that I'll discuss below, I started having problems with the reflected image appearing on demand. I looked at the code and realized I was still using Opacity instead of Visibility for showing/hiding not only the two objects, but all the controls on the page as well. Bottom-line, Opacity has it's place and is very cool, but is no substitute (any longer) for Visibility. Why did changing from Opacity to Visibility make the reflected image start appearing on demand? I don't know, but if it works, run with it :)

Opacity Masks

This one took some playing around to figure out.

I tackled the Video Reflection first because it is small. After removing Sys. from the createObjectEx call, I got the main image on the screen, but not the reflected one. They both use the same image, and the links were correct, so I was pretty confused... there's not a whole lot of difference between those two canvases!

So first I removed the main one to see if the reflected would appear and it didn't. Inside the reflected image canvas is 3 major items: (1) Media Element, (2) Opacity Mask, and (3) Transform Group.

Prior to RC1, the OpacityMask and RenderTransform for the TransformGroup were against the Canvas containing those elements. I found that if I removed the OpacityMask piece, I'd get the reflection.

After some playing around, I changed the MediaElement to not be closed, and changed the OpacityMask to be against the MediaElement instead of the Canvas, and that resolved the problem. Trying to think logically about this, it makes sense that the OpacityMask should be against the MediaElement instead of the Canvas since the canvas itself is just a container, but prior to RC1 this was a valid construct.

I don't want to confuse anyone by showing a before/after, but I will show the current canvas for the Reflection:



<Canvas x:Name="ReflectionImageCanvas" Canvas.Left="227" Canvas.Top="587">

<MediaElement x:Name="ReflImage" Source="http://www.wynapse.com/images/bud_ads2.wmv" Width="300" Height="300" Volume="0">
<MediaElement.OpacityMask>
<LinearGradientBrush StartPoint="0, .25" EndPoint="0, 1">
<GradientStop Offset="0.25" Color="#00000000" />
<GradientStop Offset="1" Color="#CC000000" />
</LinearGradientBrush>
</MediaElement.OpacityMask>
</MediaElement>

<Canvas.RenderTransform>
<TransformGroup>
<SkewTransform x:Name="ReflectionSkewTransform" AngleY="19" AngleX="-41" CenterX="0" CenterY="0" />
<ScaleTransform x:Name="ReflectionScaleTransform" ScaleY="-1" ScaleX="1" CenterX="0" CenterY="0" />
</TransformGroup>
</Canvas.RenderTransform>

</Canvas>


When I got to the Reflection Builder, everything seemed to be working until I tried to use the Reflection Skew Angle sliders, and simply moving them 1 either way caused the image to disappear. Thankfully I didn't think too long on this before I realized it was the same problem as the video reflection, and in this situation, I moved not only the OpacityMask but also the RenderTransform sections to be against the Image as shown here:



<Canvas x:Name="ReflectionImageCanvas" Cursor="Hand" Visibility="Collapsed"
MouseLeftButtonDown="ReflImage_MouseLeftButtonDown"
MouseLeftButtonUp="ReflImage_MouseLeftButtonUp"
MouseMove="ReflImage_MouseMove"
>
<Image Source="http://www.wynapse.com/images/VistaFish.png" x:Name="ReflImagePNG">

<Image.RenderTransform>
<TransformGroup>
<SkewTransform x:Name="ReflectionSkewTransform" /> <!-- AngleY="15" AngleX="-20" CenterX="60" CenterY="00"/> -->
<ScaleTransform x:Name="ReflectionScaleTransform" /> <!-- ScaleY="-.5"/> -->
</TransformGroup>
</Image.RenderTransform>

<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0.0" EndPoint="0.5,1.0">
<GradientStop Offset="0.25" Color="#00000000" x:Name="ReflGradientStop1" />
<GradientStop Offset="1.0" Color="#CC000000" x:Name="ReflGradientStop2" />
</LinearGradientBrush>
</Image.OpacityMask>
</Image>

</Canvas>



That's all for now

These are the issues I've tracked down that caused me problems in going to RC1. None very big or troublesome, but some that definitely should be kept in mind. I still have one page that is working different under RC1, although not really a problem. When I feel like digging into that one, I'll add onto this page.

Copyright © 2006-2017, WynApse