Silverlight Reflection example, but in the code behind (not xaml?)

10-29-2008 2:36 PM |

Hi, I'm trying to recreate a reflection example similar to here: http://silverlight.net/blogs/msnow/archive/2008/09/04/silverlight-tip-of-the-day-36-how-to-create-reflections-and-shadows-for-images-and-text.aspx, but I am trying to make a toolbar control programmatically so I can just pass in the App name, the hoverover text, and the image and it'll return a stackpanel that contains the icon, the tooltip for the icon and the icon's reflection.

 Currently, however, I'm having problems with the linear gradient brush being applied as a mask.  Here is my code:

 Private Class ToolbarIcon
        Private mTimer As Storyboard
        Private mDir = -1
        Private mMouseOver As Boolean = False
        Private mScale As New ScaleTransform
        Private mIcon As New Image
        Private mIconReflection As New Image
        Private mIconStackPanel As New StackPanel

        Public ReadOnly Property IconStackPanel()
            Get
                Return mIconStackPanel
            End Get
        End Property

        Public Sub New(ByVal name As String, ByVal hoverOver As String, ByVal imagePath As String)
            Dim iconStackPanel As New StackPanel
            iconStackPanel.Name = name + "ImagePanel"
            iconStackPanel.Margin = New Thickness(5)
            iconStackPanel.Orientation = Orientation.Vertical
            Dim img As New BitmapImage
            img.UriSource = New Uri(imagePath, UriKind.Relative)
            'create main icon
            mIcon.Name = name + "Image"
            mIcon.Height = 64
            mIcon.Source = img
            'Dim sclTrans As New ScaleTransform
            mScale.CenterX = 64
            mScale.CenterY = 64
            'sclTrans.CenterX = 64
            'sclTrans.CenterY = 64
            mIcon.RenderTransform = mScale 'sclTrans

            AddHandler mIcon.MouseEnter, AddressOf DoMouseEnter
            AddHandler mIcon.MouseLeave, AddressOf DoMouseLeave
            AddHandler mIcon.MouseLeftButtonUp, AddressOf DoMouseClick
            Dim tt As New ToolTip
            tt.Content = hoverOver
            ToolTipService.SetToolTip(mIcon, tt)

            'Icon creation completed, add to the stack panel for main icon
            iconStackPanel.Children.Add(mIcon)

            'begin creation on reflection image
            Dim imgref As New BitmapImage
            imgref.UriSource = New Uri(imagePath, UriKind.Relative)
            mIconReflection.Name = name + "ImageReflection"
            mIconReflection.Height = 16
            mIconReflection.Width = 64
            mIconReflection.Source = imgref
            mIconReflection.Stretch = Stretch.Fill
            mIconReflection.VerticalAlignment = Windows.VerticalAlignment.Bottom
            Dim pt As New Point
            pt.X = 0.5
            pt.Y = 0.5
            mIconReflection.RenderTransformOrigin = pt
            Dim trans As New ScaleTransform
            trans.ScaleY = -1
            mIconReflection.RenderTransform = trans

            Dim lgb As New LinearGradientBrush
            lgb.StartPoint = New Point(0.5, 0)
            lgb.EndPoint = New Point(0.5, 1)
            Dim stop1 As New GradientStop()
            stop1.Color = Color.FromArgb(0, 0, 0, 0)
            stop1.Offset = 0.0
            Dim stop2 As New GradientStop()
            stop2.Color = Color.FromArgb(Convert.ToByte("F", 16), Convert.ToByte("F", 16), Convert.ToByte("F", 16), Convert.ToByte("F", 16))
            stop2.Offset = 1.0
            lgb.GradientStops.Add(stop1)
            lgb.GradientStops.Add(stop2)

            'For some reason Linear Gradient Brush isn't working right. If used, entire image is black.
            mIconReflection.OpacityMask = lgb
            iconStackPanel.Children.Add(mIconReflection)

            mTimer = New Storyboard
            mTimer.Duration = TimeSpan.FromMilliseconds(50)
            AddHandler mTimer.Completed, AddressOf Timer
            mTimer.Begin()
            mIconStackPanel = iconStackPanel
        End Sub

        Private Function AdjustScale(ByVal direction As Integer, ByVal scale As ScaleTransform, ByVal mouseover As Boolean, ByVal timer As Storyboard) As Integer
            If direction = 1 Then
                If scale.ScaleX < 1.3 Then
                    scale.ScaleX += 0.05
                    scale.ScaleY += 0.05
                ElseIf mouseover = False Then
                    direction = 0
                End If
            ElseIf scale.ScaleX > 1.0 Then
                scale.ScaleX -= 0.05
                scale.ScaleY -= 0.05
            End If
            timer.Begin()
            Return direction
        End Function

        Private Sub DoMouseClick(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
            RaiseEvent IconClicked(sender, e)
        End Sub

        Private Sub DoMouseEnter(ByVal sender As Object, ByVal e As MouseEventArgs)
            Dim overImage As Image = CType(sender, Image)
            If overImage Is mIcon Then
                mMouseOver = True
                mDir = 1
            End If
        End Sub

        Private Sub DoMouseLeave(ByVal sender As Object, ByVal e As MouseEventArgs)
            Dim overImage As Image = CType(sender, Image)
            If overImage Is mIcon Then
                mMouseOver = False
            End If
        End Sub

        Private Sub Timer(ByVal sender As Object, ByVal e As EventArgs)
            mDir = AdjustScale(mDir, mScale, mMouseOver, mTimer)
        End Sub

        Public Event IconClicked(ByVal sender As Object, ByVal e As EventArgs)
    End Class

The problem I am having is that if I leave the  line containing mIconReflection.OpacityMask = lgb in, then the icon reflection is blank.  If I take it out, the icon reflection is there, but it's full brightness.

Is this a bug with the lineargradientbrush?  With the image.OpacityMask?

I can't seem to get it to behave like the XAML version of the code either.  Why can't I just set the color to a hex value?

Can anyone help?

Re: Silverlight Reflection example, but in the code behind (not xaml?)

10-31-2008 10:17 AM |

 That was it!  Thanks so much.  I forgot that each value needs to be doubles (FF, not F)

Thanks again!