The Visual Basic Team : Silverlight

The Silverlight Toolkit Adds Visual Basic Samples (Lisa Feigenbaum)

VBTeam — Thu, 26 Mar 2009 17:47:00 GMT

The Silverlight Toolkit March 2009 release is enhanced with Visual Basic source code. Please follow the links to view these samples for both Silverlight 2 and Silverlight 3.

Silverlight 2: http://silverlight.net/samples/sl2/toolkitcontrolsamples/run/default.html
Silverlight 3: http://silverlight.net/samples/sl3/toolkitcontrolsamples/run/default.html

The Silverlight Toolkit is a collection of controls, components and utilities made available outside the normal Silverlight release cycle. It includes full source code, unit tests, samples and documentation for 18 new controls covering charting, styling, layout, and user input, in addition to 11 professional themes. The team wants feedback so join the forums and submit suggestions today.

For more information, please visit the Silverlight Toolkit page on CodePlex: http://www.codeplex.com/silverlight

Composite Application Guidance for WPF and Silverlight: VB QuickStarts, Hands-On-Labs, and How-To Topics released! (Lisa Feigenbaum)

VBTeam — Thu, 26 Mar 2009 06:37:00 GMT

Today the Microsoft Patterns & Practices team released a download aimed to help Visual Basic developers use the Composite Application Library. It includes VB versions of the QuickStarts, Hands-On-Labs, and How-To topics:

http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=537da1cd-43e1-4799-88e7-a1da9166fb46

I've included some more information about the Composite Application Guidance below . You can also find more resources on MSDN and on CodePlex.

Please post feedback on the current VB release to Blaine's blog. (Blaine is a Program Manager on the Microsoft Patterns & Practices team.)

http://blogs.msdn.com/blaine/archive/2009/03/25/vb-quickstarts-and-how-to-s-now-available-for-prism.aspx

Cheers,
Lisa

What’s PRISM?

The Composite Client Application Guidance (formerly codenamed "Prism") is designed to help you more easily build modular Windows Presentation Foundation (WPF) and Silverlight client line of business applications.

These types of applications typically feature multiple screens, rich, flexible user interaction and data visualization, and role-determined behavior. They are built to last and built for change. This means that the application's expected lifetime is measured in years and that it will change in response to new, unforeseen requirements. This application may start small and over time evolve into a composite client—composite applications use loosely coupled, independently evolvable pieces that work together in the overall application.

Included in this release:

· Composite Application Library

· Reference Implementation (Stock Traders application in WPF and Silverlight)

· Quick starts (9)

· How-Tos (26) and

· Lots of documentation for everything you want to know about UI patterns and client architectures

Goals of This Release

Prism 1.0 shipped in July 2008 with support for WPF. This release takes the composite line of business scenarios and provides guidance on how to extend the scenario to Silverlight by:

· Providing guidance on building modular and composite Silverlight applications.

· Simplifying the composition of the user interface.

· Providing guidance and light tooling on reusing code between Silverlight and WPF.

Getting Started

The Composite Application Guidance is for building modular applications using WPF or Silverlight. You should consider using the Composite Application Guidance in any of the following scenarios:

· You are building a application that presents information from multiple sources through an integrated user interface.

· You are developing, testing, and deploying modules independently of the other modules.

· Your application will add more views and more functionality over the coming years.

· You must be able to change the application quickly and safely to meet emergent business requirements.

· Your application is being developed by multiple collaborating teams.

· Your application targets both WPF and Silverlight, and you want to share as much code as possible between the two platforms.

The following topics may help in understanding the guidance and how it applies to your scenarios:

· When to use this guidance

· Intended audience

· Evaluating the Composite Application Guidance

· Modularity design concept

· UI composition design concept

About patterns & practices

The Microsoft patterns & practices (p&p) team is responsible for delivering applied engineering guidance that helps software architects, developers, and their teams take full advantage of Microsoft’s platform technologies in their custom application development efforts.

Their goal is to help software development teams be more successful with the Microsoft application platform. They do this by delivering guidance that:

· Helps to simplify the Microsoft application platform.

· Provides solution guidance to common problems.

· Helps development teams grow their skills and learn.

For more information: http://msdn.microsoft.com/practices

Are you using Silverlight with Visual Basic? (Lisa Feigenbaum)

VBTeam — Tue, 07 Oct 2008 19:00:00 GMT

There are a bunch of great How-Do-I videos on the http://silverlight.net site to get you started! There are four different categories of videos, and they all include Visual Basic code available for download.

Silverlight 2 Basics

Controls

Web Services and Data

Data

Silverlight Ux Musings: New Control Skin Set [Corrina Barber]

VBTeam — Mon, 24 Mar 2008 06:36:00 GMT

One more set of control skins is up and ready for use. I had hoped to have two ready, but one set needed some additional tweaking work that I can't get to until I return to Seattle on 4/14.

This new set is very rough and organic in appearance and maybe even a bit esoteric, but it can still work on various sites or it can be used in early mockups of a site to give the mockups a rough and sketched appearance. I take this sort of approach to many of my early mockups; especially, if I don’t want reviewers to focus on design details.

Here’s a screen shot of the new set of controls.

You can also view a live version of the controls or download my Page.xaml, Page.xaml.vb, and App.xaml, so you can apply the style to your own site. I also talk about this set on my blog; which contains info on other aspects of skinning controls.

Enjoy the new skin!

Silverlight Ux Musings: Silverlight 2 Control Skins [Corrina Barber]

VBTeam — Wed, 12 Mar 2008 03:19:00 GMT

Silverlight 2 beta one is now available with lots of great new functionality!! You can go to Silverlight.net to find important downloads, specific details about new functionality, and very cool sample applications. So, what I want to talk about today is the controls that Silverlight 2 now provides. There are a bunch of new controls available and these include...

§ Button

§ Toggle Button

§ Radio Button

§ Checkbox

§ Texbox

§ Tooltip

§ Hyperlink

§ Slider

§ ScrollViewer

§ Calendar

§ Datepicker

§ DataGrid

§ ListBox

§ etc…

The cool thing about these controls is that they are stylable or skinnable, and a designer friend of mine and I have created three sets of skins for the controls listed above that you can now leverage. Check out my new blog to view the samples live or to download the samples, so you can use them in your application (I've also provided details about how to incorporate the control skins into a project and any skin specific code, there is a little tiny bit for one set of skins, that is needed is available in both VB and C#, so everyone can use the skins with their favorite language :))

Silverlight Ux Musings: Providing Panning Functionality for a Canvas of Objects - Part 2 [Corrina Barber]

VBTeam — Wed, 05 Dec 2007 12:08:00 GMT

I’m back with part 2 of the blog on panning functionality (part 1 is here), and, to quickly recap, we’re creating a region in a web site that can be panned rather than scrolled (users can click and drag to pan and navigate the region). We’re also designing the region so images always align properly (no images clip when the user finishes panning).

I have a sample solution that looks like my design goal pictured at right that can be downloaded here or you can simply check it out online here. Please note that the UI in this solution has many buttons and features that are disabled because my primary focus was to provide code for the panning functionality.

Necessities

More detailed information can be found on the Silverlight.NET site

§ Microsoft Silverlight 1.1 Alpha September Refresh

§ Visual Studio 2008

§ Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007)

§ Expression Blend 2 September Preview

Details: Visual Studio (xaml)

Open the solution created in part 1 (a copy can be found here). Again, this is a wireframe version of only the panning region; not the full fidelity UI pictured above. The first thing we need to do is to make a few modifications to Page.xaml.

1. Open Page.xaml and find the canvas named ‘allImgs’. Right below the opening tag add the following clipping path xaml. This clipping path is sized the same as the parent canvas (remember, we planned to use the height and width of this canvas as defined in Blend as a guide when creating the clipping path in Visual Studio)

<Canvas.Clip>

</Canvas.Clip>

2. Locate the ‘allImgsRectangle’ and add an opacity attribute and set it to 0. Remember, we want to only show this rectangle when the mouse is in the panning region (we could have done this in Blend too ;)).

3. Locate the ‘allImgsCanvas’ and then locate the <Canvas.RenderTransform> tag for the canvas (it should be right below the opening tag). Add an x:Name attribute to <TranslateTransform.. and name it ‘allImgsTransform’. This will allow us to control the transform values from code.

<Canvas.RenderTransform>

</TransformGroup>

</Canvas.RenderTransform>

4. Locate the ‘allImgsPan’ storyboard (it should be at the very top of the page), and then locate the two <DoubleAnimationUsingKeyframe> tags that apply to the TranslateTransform X and Y values. Add x:Name attributes to both child <ChildDoubleKeyFrame> tags as shown below.

<Canvas.Resources>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

At this point, we’re ready to finish all of our work in the VB code. You’ll find a copy of the project to this point here.

Details: Visual Studio (VB)

Open ‘Page.xaml.vb’ from the Solution Explorer to get started. The first thing we’re going to do is add mouse enter and leave events for the ‘allImgsCanvas’ canvas, so we can get the perimeter rectangle to hide and show as described earlier.

5. Create a MouseEnter event for the canvas. Set the opacity on the ‘allImgsRectangle’ to 100 and capture the Canvas sender object and set it’s cursor to a hand as shown below.

' All Imgs mouse enter

Private Sub allImgsCanvas_MouseEnter(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseEnter

'Set opacity on allImgsRectangle so it's visible

allImgsRectangle.Opacity = 100

'Set the cursor to the hand

Dim _Canvas As Canvas = CType(sender, Canvas) 'Explicit conversion to Canvas

_Canvas.Cursor = Input.Cursors.Hand

End Sub

6. Create a MouseLeave event for the canvas. Set the opacity on the ‘allImgsRectangle’ back to 0 and, again, capture the Canvas sender object, but this time set it to an arrow as shown below.

' All Imgs mouse leave

Private Sub allImgsCanvas_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles allImgsCanvas.MouseLeave

'Set opacity on allImgsRectangle so it's invisible

allImgsRectangle.Opacity = 0

'Set the cursor to the arrow

Dim _Canvas As Canvas = CType(sender, Canvas) 'Explicit conversion to Canvas

_Canvas.Cursor = Input.Cursors.Arrow

End Sub

At this point, I recommend running your project to ensure that the perimeter rectangle does in fact appear on mouse enter and disappear on mouse leave. Next we’re going to implement the panning behavior.

7. Add a mouse down event for the ‘allImgsCanvas’ and capture the mouse position in a variable as well as create and set a variable (‘isMouseDown’) to true that will indicate that we have clicked down on the canvas (store these variables globally).

'Global variables

Private _lastPt As Point

Private _isMouseDown As Boolean = False

' All Imgs mouse down

Private Sub allImgsCanvas_MouseLeftButtonDown(ByVal sender As Object, ByVal e As

System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseLeftButtonDown

'Capture mouse down position

_lastPt = e.GetPosition(Me)

'Set isMouseDown to true

_isMouseDown = True

End Sub

8. Add a mouse up event for the ‘allImgsCanvas’ and set the ‘isMouseDown’ variable to false (we’re no longer mousing down in the canvas when we hit this event and need to keep track of this). Add this variable to the mouse leave event and set it to false there as well (for the same reason).

' All Imgs mouse leave

Private Sub allImgsCanvas_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles allImgsCanvas.MouseLeave

'Set opacity on allImgsRectangle so it's invisible

allImgsRectangle.Opacity = 0

'Set the cursor to the arrow

Dim _Canvas As Canvas = CType(sender, Canvas) 'Explicit conversion to Canvas

_Canvas.Cursor = Input.Cursors.Arrow

'Set isMouseDown to false

_isMouseDown = False

End Sub

' All Imgs mouse up

Private Sub allImgsCanvas_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseLeftButtonUp

'Set isMouseDown to false

_isMouseDown = False

End Sub

9. Add a mouse move event for the ‘allImgsCanvas’. Capture the current mouse location, and if the mouse down event has happened set a variable to true to track that we’re doing the pan operation. Store this new variable globally also, and add it to the mouse up and leave events and set it to false in those locations (because when those events are hit we would no longer be panning).

'Global variables

Private _lastPt As Point

Private _isMouseDown As Boolean = False

Private _isMouseMove As Boolean = False

' All Imgs mouse leave

Private Sub allImgsCanvas_MouseLeave(ByVal sender As Object, ByVal e As System.EventArgs) Handles allImgsCanvas.MouseLeave

'Set opacity on allImgsRectangle so it's invisible

allImgsRectangle.Opacity = 0

'Set the cursor to the arrow

Dim _Canvas As Canvas = CType(sender, Canvas) 'Explicit conversion to Canvas

_Canvas.Cursor = Input.Cursors.Arrow

'Set isMouseDown to false

_isMouseDown = False

'Identify that we're NOT doing click and drag

_isMouseMove = False

End Sub

' All Imgs mouse up

Private Sub allImgsCanvas_MouseLeftButtonUp(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseLeftButtonUp

'Set isMouseDown to false

_isMouseDown = False

'Identify that we're NOT doing click and drag

_isMouseMove = False

End Sub

' All Imgs mouse move

Private Sub allImgsCanvas_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseMove

'Get the mouse location

Dim _curPt As Point = e.GetPosition(Me)

'Check to see that mouse up hasn't happened

If (_isMouseDown.Equals(True)) Then

'Identify that we're doing click and drag

_isMouseMove = True

End If

End Sub

10. Update the position of the canvas in the mouse move event by utilizing the ‘allImgsTransform’ object associated with the <TranslateTransform> tag in the ‘allImgsCanvas’. You’ll also need to update the globally stored ‘_lastPt’ variable to the last mouse position.

' All Imgs mouse move

Private Sub allImgsCanvas_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseMove

'Get the mouse location

Dim _curPt As Point = e.GetPosition(Me)

'Check to see that mouse up hasn't happened

If (_isMouseDown.Equals(True)) Then

'Identify that we're doing click and drag

_isMouseMove = True

'Fix up the X value of the transform

allImgsTransform.X += (_curPt.X - _lastPt.X)

'Fix up the Y value of the transform

allImgsTransform.Y += (_curPt.Y - _lastPt.Y)

End If

'Update last mouse pt stored globally

_lastPt = _curPt

End Sub

At this point, run your project, and you’ll notice that you can pan the rectangles around. The only problem is that you can pan the rectangles out of the clipped region, and we don’t want this to happen, so we’ll fix this next.

11. Delete the following code from the ‘allImgsCanvas’ mouse move event.

'Fix up the X value of the transform

allImgsTransform.X += (_curPt.X - _lastPt.X)

'Fix up the Y value of the transform

allImgsTransform.Y += (_curPt.Y - _lastPt.Y)

12. Replace the code with the following code which will ensure that we cannot pan to far top/bottom and left/right.

'Ensure the x coordinates don't allow the canvas to disappear

If ((allImgsTransform.X + (_curPt.X - _lastPt.X)) > 0) Then

'Fix up the X value of the transform

allImgsTransform.X = 0

ElseIf ((allImgsTransform.X + (_curPt.X - _lastPt.X)) < -(_minX)) Then

'Fix up the X value of the transform

allImgsTransform.X = -(_minX)

Else

'Fix up the X value of the transform

allImgsTransform.X += (_curPt.X - _lastPt.X)

End If

'Ensure the Y coordinates don't allow the canvas to disappear

If ((allImgsTransform.Y + (_curPt.Y - _lastPt.Y)) > 0) Then

'Fix up the Y value of the transform

allImgsTransform.Y = 0

ElseIf ((allImgsTransform.Y + (_curPt.Y - _lastPt.Y)) < -(_minY)) Then

'Fix up the Y value of the transform

allImgsTransform.Y = -(_minY)

Else

'Fix up the Y value of the transform

allImgsTransform.Y += (_curPt.Y - _lastPt.Y)

End If

13. The ‘_minX’ and ‘_minY’ variables highlighted above are not available at this time, so we need to calculate them in ‘Page_Loaded’ and store them globally.

'Global variables

Private _lastPt As Point

Private _isMouseDown As Boolean = False

Private _isMouseMove As Boolean = False

Private _minX As Double

Private _minY As Double

Private Sub Page_Loaded(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Loaded

'Required to initialize variables. Needs to be done from loaded event so FindName works properly.

Me.InitializeComponent()

' Set minimum change in x and y values allowed

_minX = (allImgsCanvas.Width - allImgs.Width)

_minY = (allImgsCanvas.Height - allImgs.Height) - 2 'one or more of my rectangles are aligned wrong so this is why I'm adding the -2 (and I couldn't find the problem quickly ;))

End Sub

If you run your project now, you’ll see that you can no longer pan the rectangles out of the viewing area. Now, let’s add the code to make it so the images always align nicely after they have been panned around. The work will be triggered in the mouse up and leave events.

14. In the ‘allImgsCanvas’ mouse leave and up events add the following code snippet before the part where you set ‘_isMouseDown’ and ‘_isMouseMove’ to false

'If the mouse has been down and we did some panning fix up alignment

If ((_isMouseDown.Equals(True)) And (_isMouseMove.Equals(True))) Then

'Fix panning alignment

fixPanningAlignment()

End If

15. Add the ‘fixPanningAlignment’ method and create a variable to store the column the canvas should snap to. To do this we need to know the size of the rectangles, and we can capture this data in the ‘Page_Loaded’ event by referencing one of the rectangles we named in Blend (Rectangle1 for example) and store it globally as shown below.

'Global variables

Private _lastPt As Point

Private _isMouseDown As Boolean = False

Private _isMouseMove As Boolean = False

Private _minX As Double

Private _minY As Double

Private _imgWidth As Double

Private _imgHeight As Double

Private Sub Page_Loaded(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Me.Loaded

'Required to initialize variables. Needs to be done from loaded event so FindName works properly.

Me.InitializeComponent()

' Set minimum change in x and y values allowed

_minX = (allImgsCanvas.Width - allImgs.Width)

_minY = (allImgsCanvas.Height - allImgs.Height) - 2 'a rectangle is aligned wrong is why I'm doing -2 (and I couldn't find it quickly :()

'Get the image width and height values and store globally

_imgWidth = Rectangle1.Width + 12 '+12 because each image has 6px padding or 12px space between images

_imgHeight = Rectangle1.Height + 12 '+12 because each image has 6px padding or 12px space between images

End Sub

' Fix the alignment of images after panning

Private Sub fixPanningAlignment()

'Find out how many times the current X position can be divided by _imgWidth

Dim _numWidths As Integer = allImgsTransform.X / _imgWidth

End Sub

16. Capture the direction of the mouse movement and use this to figure out which column we should be snapping to. To do this we not only need the last mouse position, but the one right before that, so we’re going to add a ‘_secondToLast’ global variable to store this information and we’ll capture this data in the mouse move event.

'Global variables

Private _lastPt As Point

Private _isMouseDown As Boolean = False

Private _isMouseMove As Boolean = False

Private _minX As Double

Private _minY As Double

Private _imgWidth As Double

Private _imgHeight As Double

Private _secondToLastPt As Point

' All Imgs mouse move

Private Sub allImgsCanvas_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Input.MouseEventArgs) Handles allImgsCanvas.MouseMove

'Get the mouse location

Dim _curPt As Point = e.GetPosition(Me)

'Check to see that mouse up hasn't happened

If (_isMouseDown.Equals(True)) Then

'Identify that we're doing click and drag

_isMouseMove = True

'Ensure the x coordinates don't allow the canvas to disappear

If ((allImgsTransform.X + (_curPt.X - _lastPt.X)) > 0) Then

'Fix up the X value of the transform

allImgsTransform.X = 0

ElseIf ((allImgsTransform.X + (_curPt.X - _lastPt.X)) < -(_minX)) Then

'Fix up the X value of the transform

allImgsTransform.X = -(_minX)

Else

'Fix up the X value of the transform

allImgsTransform.X += (_curPt.X - _lastPt.X)

End If

'Ensure the Y coordinates don't allow the canvas to disappear

If ((allImgsTransform.Y + (_curPt.Y - _lastPt.Y)) > 0) Then

'Fix up the Y value of the transform

allImgsTransform.Y = 0

ElseIf ((allImgsTransform.Y + (_curPt.Y - _lastPt.Y)) < -(_minY)) Then

'Fix up the Y value of the transform

allImgsTransform.Y = -(_minY)

Else

'Fix up the Y value of the transform

allImgsTransform.Y += (_curPt.Y - _lastPt.Y)

End If

'Update last mouse pt and second to last mouse pt stored globally

_secondToLastPt = _lastPt

_lastPt = _curPt

End Sub

' Fix the alignment of images after panning

Private Sub fixPanningAlignment()

'Find out how many times the current X position can be divided by _imgWidth

Dim _numWidths As Integer = allImgsTransform.X / _imgWidth

'Pickup direction of mouse movement in the x direction and adjust animation accordingly

If ((_lastPt.X < _secondToLastPt.X) And (_numWidths <> 0)) Then

'Decrement the number of widths

_numWidths -= 1

End If

End Sub

17. We need to make sure we don’t pan to far top/bottom or left/right similar to what we did in the mouse move event, so add the following code to the end of the ‘fixPanningAlignment’ method

'Don't scroll canvas too far to the right or left

Dim _checkWidth As Integer = _numWidths * _imgWidth

'Do check and reset values if need be

If (_checkWidth > 0) Then

_checkWidth = 0

ElseIf (_checkWidth < -(_minX)) Then

_checkWidth = -(_minX)

End If

18. Update the storyboard x:name attributes for the X coordinates by adding the following code to the end of the ‘fixPanningAlignment’ method

'Set storyboard values for the x coordinates

allImgsStartX.Value = allImgsTransform.X

allImgsEndX.Value = _checkWidth

19. In the ‘fixPanningAlignment’ method duplicate all of the code described above except update the Y values, and then start the storyboard. Your ‘fixPanningAlignment’ method should look as follows.

' Fix the alignment of images after panning

Private Sub fixPanningAlignment()

'Find out how many times the current X position can be divided by _imgWidth

Dim _numWidths As Integer = allImgsTransform.X / _imgWidth

'Pickup direction of mouse movement in the x direction and adjust animation accordingly

If ((_lastPt.X < _secondToLastPt.X) And (_numWidths <> 0)) Then

'Decrement the number of widths

_numWidths -= 1

End If

'Don't scroll canvas too far to the right or left

Dim _checkWidth As Integer = _numWidths * _imgWidth

'Do check and reset values if need be

If (_checkWidth > 0) Then

_checkWidth = 0

ElseIf (_checkWidth < -(_minX)) Then

_checkWidth = -(_minX)

End If

'Set storyboard values for the x coordinates

allImgsStartX.Value = allImgsTransform.X

allImgsEndX.Value = _checkWidth

'Find out how many times the current y position can be divided by _imgHeight

Dim _numHeights As Integer = allImgsTransform.Y / _imgHeight

'Pickup direction of flick in the y direction and adjust animation accordingly

If ((_lastPt.Y < _secondToLastPt.Y) And (_numHeights <> 0)) Then

'Decrement the number of heights

_numHeights -= 1

End If

'Fix scrolling canvas too far up or down

Dim _checkHeight As Integer = _numHeights * _imgHeight

'Do check and reset values if need be

If (_checkHeight > 0) Then

_checkHeight = 0

ElseIf (_checkHeight < -(_minY)) Then

_checkHeight = -(_minY)

End If

'Set storyboard values for the y coordinates

allImgsStartY.Value = allImgsTransform.Y

allImgsEndY.Value = _checkHeight

'Start(movie)

allImgsPan.Begin()

End Sub

Run your project now and the panning functionality should work as planned. You’ll find a finished wireframe project here.

Silverlight Ux Musings: Providing Panning Functionality for a Canvas of Objects - Part 1 [Corrina Barber]

VBTeam — Tue, 04 Dec 2007 02:48:00 GMT

Recently, I was experimenting with Silverlight and decided to create a website that would allow me to browse some of my personal images, and the website was designed to look something like the image below.

My intention for the site was that it would be able to display many images, certainly more than the 12 that you see grouped together and aligned left in the image above, but I didn’t want to provide a standard scrolling region. Instead, I decided to implement panning functionality for the region (the ability to click and drag to pan and navigate the available images). I also wanted to ensure that the images always aligned properly, so no images would be clipped when you finish panning around, and this is the functionality that I’m going to describe how to implement at this time.

The description is long and split up into three sections because it covers tasks that need to be done in both Blend and Visual Studio (xaml and VB). I have included links to completed solutions for each section in case you want to jump ahead to any particular section. Also, this post today will cover the work that is done in Blend, and I’ll post on the work that is done in Visual Studio tomorrow.

One more thing, you can download my sample solution pictured in the image above here or you can check out a working version here. Please note that the UI in this solution has many buttons and features that are disabled because my primary focus was to provide code for the panning functionality.

Necessities

More detailed information can be found on the Silverlight.NET site

§ Microsoft Silverlight 1.1 Alpha September Refresh

§ Visual Studio 2008

§ Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007)

§ Expression Blend 2 September Preview

Details: Blend

We’re going to create a wireframe version of the panning UI which can later be easily enhanced with nice visuals, and to do so we’ll start our work in Expression Blend. The first step is to create a new VB Silverlight project in Expression Blend as shown in the image below.

The next step involves creating the canvas of objects that will be panned.

1. Create a series of 80px by 80px rectangles with 12px padding between each by using the rectangle tool found in the toolbox. I created a set of 8 rectangles by 8 rectangles as shown in the image below.

2. Give each rectangle a unique name (such as ‘Rectangle1’, ‘Rectangle2’…) by selecting it in the Objects and Timeline tool window and then naming it in the Properties window (Name is at the very top of the Properties window), as shown below.

3. Group all of the rectangles into a parent canvas object by selecting them in the Objects and Timeline tool window and selecting the Object -> Group Into -> Canvas command, as shown below.

4. Name the parent canvas object as described in step 3 above (give it a name such as ‘allImgsCanvas’)

5. Group the new parent canvas object into another parent canvas object by following the directions outlined in step 4 above. We’re doing this so we can use this canvas to define the clipping region for the images that will be visible.

6. Give this new parent canvas a name (such as ‘allImgs’)

7. Select the new parent canvas and size it so it fits 3 rectangles wide by 4 rectangles high. You can do this quickly in the Properties window by going to the Layout section and setting the Width to 264 and the Height to 356 as shown in the image below (these are accurate measurements if you’ve followed the steps described above so far). We’re doing this so we can identify the size of the clipping region; which we will actually create in Visual Studio because you can’t in Expression Blend when working on Silverlight projects at this time (although, you will be able to in the future and you can for WPF projects)

Next, create a perimeter rectangle around the set of images that will be visible. This rectangle will appear when the mouse is in the panning region and disappear when it is out of the region. The purpose of this rectangle is to provide visual feedback to the user that they can interact with the UI.

8. Select the rectangle tool from the toolbox and create a rectangle of the same size and position as the ‘allImgs’ canvas (Width is 264 and the Height is 356)

9. Select the new rectangle in the Objects and Timeline tool window and then go to the Properties tool window and set the Left and Top values so they are 8px less than the ‘allImgs’ canvas values (we want to give the rectangle and images some padding)

10. Add 16px to the height and width of the new rectangle in the Properties window

11. Set the new rectangle Fill to No Brush (no fill) in the Properties tool window as shown below

12. Name the new rectangle as described in step 3 above (give it a name such as ‘allImgsRectangle’)

Next, we’re going to stub out a storyboard that we are going to later control in code. This storyboard will be used to ensure our images always align properly, and it will also offer a nice transition effect.

13. Select the ‘allImgsCanvas’ in the Objects and Timeline tool window (this is the child of the outer most canvas), and then select the ‘Open, create, or manage storyboards button, as shown below

14. Select the ‘+’ button in the dialog that appears to create a new storyboard as shown below

15. Name the new storyboard ‘allImgsPan’ and make sure the ‘Create as a resource’ checkbox is checked as shown below, and press ‘OK’. This will enable us to control the storyboard from code

16. Make sure the ‘allImgs’ canvas is selected in the Objects and Timeline tool window and that timeline is at 0 seconds, and then click the ‘Record key frame’ button as shown below

17. Move the timeline to .5 seconds and create another key frame, and then move the timeline to 1 second and create another key frame. Your timeline should look like the image below

18. Move the timeline to .5 seconds and then go to the Transform section of the Properties tool window. Select the Scale tab and set the X and Y values to ‘1.1’, as shown below

19. Move the timeline to 1 second and double check that ‘allImgsCanvas’ is selected in the Objects and Timeline tool window. Next, select the Selection tool in the tool window (click the ‘V’ key on the keyboard) and then use the arrow keys to move the canvas 1px to the top and left and then move it 1px in the opposite direction (basically, it’s position doesn’t move, but this will create a proper storyboard for us to work with)

Save your project, and it’s now ready to open in Visual Studio 2008 (you’ll find a copy of the project described above here). Again, I’ll provide Visual Studio details tomorrow J

Silverlight Ux Musings: Controlling Alignment of UI Elements [Corrina Barber]

VBTeam — Wed, 31 Oct 2007 00:14:00 GMT

This is my first post on the VB blog! I’m a designer on the team with a background in visual and interaction design, and I also have some .NET coding experience. I plan to start blogging on the VB blog on a regular basis, and my goal is to share some of my thoughts on and explorations with Silverlight.

I’m sych'd about the possibilities enabled by Silverlight for many reasons, but, being a designer, one of the main reasons is that I can actually get cool UI implemented exactly as I envisioned. I love that I can create unique and beautiful UI in Blend, bring it into Visual Studio, and then add the interactivity and business logic I desire using VB.

So anyway, one of the first things I did when I began my Silverlight explorations was to layout my XAML UI where some elements aligned left and some elements aligned right, and I wanted to make sure my UI remained exactly as I had planned even if the browser was at a size I hadn’t planned for. I found that Silverlight 1.1 didn’t have a container control to help me do this (at least not yet), so I quickly coded up a solution to this problem, and that’s what I’m going to share today.

Just one additional blurb before we dive into things, this solution targets a specific problem, but it can be used in many other ways. The gist of the solution enables sharing of events and data between VB and JavaScript code, so with a little imagination you’ll be able to envision many other uses of the concepts presented in this post. In fact the Silverlight.NET site offers information on this same concept, in case you would like to explore things further.

Solution Screen Shots

The images below show how the little yellow buttons that are aligned right remain properly aligned right even as the browser is resized…

Necessities

Specific details can be found on the Silverlight.NET site

§ Microsoft Silverlight 1.1 Alpha September Refresh

§ Visual Studio 2008 Beta2

§ Microsoft Silverlight Tools Alpha Refresh for Visual Studio 2008 Beta 2 (July 2007)

Details

The following steps detail out how to implement the UI and behavior pictured in the images above…

The first step is to create a new VB Silverlight project

0. Create a new VB Silverlight project by selecting File -> New -> Project…, and then selecting Visual Basic in the Project types pane and Silverlight Project in the Templates pane

The next step involves tweaking JavaScript a bit. To handle repositioning of elements, we first need to get a reference to the Silverlight control, so we can get its size. We then need to send the size information back to the .NET code. What follows are the changes that are required in the JavaScript code to enable this functionality

1. Open TestPage.html.js by selecting File -> Open -> File…, and then opening TestPage.html.js from your newly created Silverlight Project directory

2. Modify TestPage.html.js as follows (the code in gray is the original code, and the red underlined code identifies what you need to modify in the file while the full color code is what you need to add to the file)

// JScript source code

//contains calls to silverlight.js, example below loads Page.xaml

function createSilverlight()

{

Silverlight.createObjectEx({

source: "Page.xaml",

parentElement: document.getElementById("SilverlightControlHost"),

id: "SilverlightControl",

properties: {

width: "100%",

height: "100%",

version: "1.1",

isWindowless: "true",

background: "#00000000",

enableHtmlAccess: "true"

events: { onLoad: OnLoaded }

});

// Give keyboard focus to the Silverlight control by default

function OnLoaded(sender, args) {

var silverlightControl = document.getElementById('SilverlightControl');

if (silverlightControl)

silverlightControl.focus();

// Onload call the method that sends the SL control size to the .NET code

CallScriptable();

}

// Send the SL control size to the .NET code

function CallScriptable() {

// Get the SL control instance

var silverlightControl = document.getElementById('SilverlightControl');

// Get the SL control width and height

var slWidth = silverlightControl.offsetWidth;

var slHeight = silverlightControl.offsetHeight;

// Call the .NET code with the SL control size passed over

silverlightControl.Content.DotNetToJS.getSLSize(slWidth, slHeight);

}

3. Open TestPage.html from the Solution Explorer

4. Modify TestPage.html as follows (items in gray are original, and items in red and underlined represent items that need modification while the full color items represent items you need to add to the file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Silverlight Project Test Page </title>

// Call CallScriptable on window resize

window.onresize = CallScriptable;

// Send the SL control size to the .NET code

function CallScriptable()

{

// Get the SL control instance

var silverlightControl = document.getElementById('SilverlightControl');

// Get the SL control width and height

var slWidth = silverlightControl.offsetWidth;

var slHeight = silverlightControl.offsetHeight;

// Call the .NET code with the SL control size passed over

silverlightControl.Content.DotNetToJS.getSLSize(slWidth, slHeight);

}

</script>

.body { margin: 0px;

background-color: #FF000000; }

.silverlightHost { position: absolute;

z-index: 0;

width: 100%;

height: 100%;

background-color: Transparent; }

</style>

</head>

createSilverlight();

</script>

</div>

</body>

</html>

The next step involves adding the appropriate VB code to your project (in all of the following, gray code will indicate the original code and full color code will indicate what you need to add to the code file)

5. Add an import for System.Windows.Browser, so we can provide access to .NET scriptable elements

6. Mark the partial Page class as scriptable by adding <ScriptableI()> _ above the partial Page class

7. Add a scriptable public event handler as shown below

8. Register the class as a scriptable object in the method where initialization is handled. In this case, this is the Page_Loaded method (this method is specified as the one to handle onload or initialization functionality in the default or parent Canvas provided in Page.XAML – Loaded = “Page_Loaded”)

'Import that needs to be added

Imports System.Windows.Browser

' XAML page class

<Scriptable()> _

Partial Public Class Page

Inherits Canvas

' Event for talking between .NET and Javascript

<Scriptable()> _

Public Event JSToDotNetEvent As EventHandler(Of CustomEventArgs)

Public Sub Page_Loaded(ByVal sender As Object, ByVal e As EventArgs)

'Register the scriptable endpoint - String is what's referenced in script

'“silverlightControl.Content.DotNetToJS.getSLSize(slWidth, slHeight);” in

'TestPage.html.js

WebApplication.Current.RegisterScriptableObject("DotNetToJS", Me)

' Required to initialize variables

InitializeComponent()

End Sub

End Class

9. Add the scriptable method that is to be called from the JavaScript. In this case, we called getSLSize() from the JavaScript. This method should raise the event marked scriptable, and then it can call the method where we handle positioning of XAML elements on the page

10. Add the method that handles positioning of XAML elements on the page. This method should take the Silverlight width and height data, and then apply appropriate positioning specifications to the XAML elements. In this case, we’re going to position the Canvas.Left attribute of the “MainBtnsGroup” canvas using the SetValue method as shown below

' Method that is called by JS to pass in Silverlight size information

<Scriptable()> _

Public Sub getSLSize(ByVal numWidth As Integer, ByVal numHeight As Integer)

' Raise event

RaiseEvent JSToDotNetEvent(Me, New CustomEventArgs(numWidth, numHeight))

'Call method to position XAML elements

PositionXAML(numWidth, numHeight)

End Sub

' Position XAML elements

Private Sub PositionXAML(ByVal numWidth As Integer, ByVal numHeight As Integer)

'Define appropriate values for aligning the desired elements

Dim numMainButtonsGroupWidth As Integer = numWidth - 25

'Position elements

MainBtnsGroup.SetValue(Canvas.LeftProperty, numMainButtonsGroupWidth)

End Sub

11. Create a new CustomEventArgs class that inherits from EventArgs. This is used by our scriptable event and it allows us to pass simple data between JavaScript and .NET code. In this case, we’re simply passing Integer values for the width and height of the Silverlight control

' Class to hold custom event arg parameters

<Scriptable()> _

Public Class CustomEventArgs

Inherits EventArgs

' Private variables

Private _numWidth As Integer

Private _numHeight As Integer

' Constructor

Public Sub New(ByVal inumWidth As Integer, ByVal inumHeight As Integer)

_numWidth = inumWidth

_numHeight = inumHeight

End Sub

' Getter and Setter for width

<Scriptable()> _

Public Property NumWidth() As Integer

Get

Return _numWidth

End Get

Set(ByVal value As Integer)

_numWidth = value

End Set

End Property

' Getter and Setter for height

<Scriptable()> _

Public Property NumHeight() As Integer

Get

Return _numHeight

End Get

Set(ByVal value As Integer)

_numHeight = value

End Set

End Property

End Class

12. The final, bit involves adding the XAML. The following XAML is what I used in the example. Simply add it inside of the default canvas that is provided when you first create your project. I also recommend deleting the height, width, and background attributes of the default canvas to ensure your UI will look exactly like the screen shot above

</Canvas>

</Canvas>

</Canvas>

</Canvas>

</Canvas>

Ending Comments

I hope you found this post interesting and/or useful J

Why you should learn WPF (and how I can help)

VBTeam — Sat, 06 Oct 2007 16:00:00 GMT

A few weeks ago I mentioned I was working on a side project. Well, then the soccer, tennis, and school season hit and..well I won't tell you the rest. What I had started to do was take all of the samples in Charles Petzold's book Applications = Code + Markup and rewrite them in VB for publication to the VB community. I had invited anyone else to do the same as it was a great way to learn WPF, and for the customers I will be focussing on over the next few years (the small business developers and IT pros) there was method behind my madness; especially for those still using VB6.

One of my fellow Program Managers, Paul Yuknewicz, put me in contact with Charles and he agreed to allow me to publish all of the samples in his book in Visal Basic. At home I had gotten to rewriting these through chapter 10, but in order to get the quality I need for publication, I need to re-do them. So today I offer you chapter 1 (attached). Oh yea, and I created these project files in Visual Studio 8 beta 2 to encourage your downloading of our latest work.

I invite you along with me on this journey of learning WPF for several reasons. First, I've always believed that Visual Basic was about creating stunning applications rapidly. WPF is a very powerful technology and I am looking to build a community around developers who are sharing ideas about creating great end user experiences - getting out of the grey form white textbox. The second reason is our big investment in Silverlight. Over time, as Silverlight evolves, I predict that a lot of the lessons learned in creating great desktop applications with WPF, will translate over to Silverlight with little effort.

Yesterday, a group of us spent a day locked in a room figuring out how to improve Visual Basic for the small business developer and IT departments. I mentioned before that we were looking for people in the area to help us learn more about their pain points with using Visual Basic to develop applications rapidly. We are now prepared to cast that net further. If you are anywhere and are willing to contribute a little time and help us shape our products, please contact me (patd@microsoft.com).

Lastly, before I go off and do my day of soccer with my boys, I want to remind folks that we have set up a Small Business Developer's forum. I encourage you to visit there and share your experiences or ask any questions.

Patrick Dengler

Amanda Silver will be Presenting VB and Silverlight on Second Life! (Beth Massi)

VBTeam — Mon, 30 Jul 2007 21:43:00 GMT

If you haven't seen or experienced Second Life it's pretty amazing. It's an online, 3D, digital world. Visual Studio has created an island where you can come listen to live Microsoft presenters in this virtual world's live presentation theater! Amanda Silver will be presenting Visual Basic on Silverlight tomorrow, July 31st at 4pm Pacific time. There's a lot of other fun events you should check out as well.

See you there!

-Beth Massi, VS Community

What is the difference between VB 9, VBx and Silverlight? (Scott Wisniewski)

VBTeam — Fri, 08 Jun 2007 04:58:00 GMT

I recently received an email from a customer asking for clarification as to what the difference was between VB 9, VBx and Sliverlight. In particular, it seems as if we have been releasing so much information about cool new stuff that at least a few people have become confused, making them a bit nervous about the future of VB.

The customer had also expressed some concerns about upgrading from VS 2005 to Orcas (VS 2008), particularly because he was considering making an upgrade from VB 6 to VS 2005 and wanted to make sure he would be able to take advantage of Orcas when it was released.

I figured there may be other customers that have similar concerns, and so thought this would make a good blog post, particularly because it's been a while since I've posted anything (J).

As a result I've included a few of the questions he asked (paraphrased) below, along with my answers.

I hope this helps.

What is the difference between VB 9 and VBx? Which one is the next version of Visual Studio?

Visual Basic 9 is the next version of Visual Basic. Visual Basic 10, or VBx as it's sometimes called, is the version of Visual Basic that will follow VB 9. Currently VBx is in very early stages, and is a long way off from production. In fact, most of our development team is actively working on VB 9.

Why on earth would you start talking about VB 10 before you've even released VB 9? This is confusing.

The product cycle for VB 9 is starting to wind down. We recently released Beta 1 of Visual Studio Code Name "Orcas", and are currently working on releasing Beta 2. As the product cycle starts to wind down, our language design team is starting to think about what the "next next" version of the product will look like. They do this mainly as a way to "keep the pipeline moving". If they had to wait until VB 9 was 100% complete before they started thinking about VB 10, then there would end up being a significant delay from when we finished VB 9 until we could start working on VB 10. This is because designing a product, and coming up with a plan to develop it can be extremely time consuming. It requires us to come up with a design, create a schedule, make any necessary organizational changes, and ensure we have the right staffing levels, all before we start coding. By "overlapping" the early design work for VB 10 with the "end game" work for VB 9 we are able to better "bootstrap" the whole process, thus making the transition from one project to the next as smooth as possible.

As our design team comes up with designs they like to release information about them as early as possible. The earlier we can get information out to our customers, the earlier we can get feedback about the things we are doing. This helps us to build the products that actually meet our customers' needs. One thing we've managed to learn over the years is that the best possible way we can learn what it is that our customers want is to engage with them early and often.

As a result, near the end of a product cycle we will release information about our plans for the version of the product to follow the one we are currently working on. This gives our customers the chance to comment on it and let us know what they think. We then take that feedback and use it to develop a more complete plan for what we want to do.

What is VB 10 going to be like? What is this Silverlight Thing I keep hearing about? Is Silverlight a replacement for Visual Studio?

Our plans for VBx and Silverlight are still very rough and are nowhere near complete. As our customers start to use VB 9 and provide us with feedback that data will drive exactly what we end up doing in VB 10. That being said, however, we do have some rough ideas of the things we would like to do.

Silverlight 1.1 is a new light weight version of the .NET Framework that will allow you to develop rich applications that run in a web browser using .NET languages. The basic idea is to allow you to replace client side java script with .NET enabled languages, allowing you to write both the client side and sever side portions of your web applications in the same language. It also allows you to use WPF (windows presentation foundation) and WCF (windows communication foundation) to create extremely rich and interactive web applications in a way that is much easier than what is possible using HTML, Ajax, Java Script, or Flash.

VB 10 is going to be the version of Visual Basic that will follow VB 9 (the "next next version"). It will include new features designed to make VB a really great language for developing SilverLight apps, as well as enhancements to many of the new feature we are delivering in VB 9, such as Linq. You should still be able to do all the things with VB 10 that you could do with both VB 9 and VB 8.

The migration from VB 6 to VS 2005 is non-trivial. If I upgrade to VS 2005 will I able to use VB 9 when it comes out, or will I have to scrap all my work? What about VB 10? Should I be worried about the future of VB?

The transition from VB 8.0 to VB 9.0 should be smooth and relatively painless. We have gone to great lengths to ensure this.

Our plan is to also make the migration from VB 9 to VB 10 equally painless.

Although the migration from VB 6 to VB.NET is a bit tough, we are actively working on making that easier as well. We have been releasing a "VB Interoperability Toolkit" that allows an application to be gradually migrated from VB 6 to VS 2005, rather than requiring the whole thing to be migrated at once.

You can get more information about it here:

http://msdn2.microsoft.com/en-us/vbasic/aa701257.aspx

As far as the future of VB, you should definitely not be worried.

Microsoft is committed to VB, and making it a great language for developing applications for our various platforms. The future of VB should be a bright one!

Four dynamic languages for .NET interoperating!

VBTeam — Wed, 02 May 2007 21:06:00 GMT

John Lam just posted a screen cast of four dynamic languages interoperating in SIlverlight on the Mac! Check it out!

VB On Silverlight

VBTeam — Tue, 01 May 2007 23:32:00 GMT

One of the great things about being on the VB team is that we’re generally in the loop early and often with teams developing new technologies and products. It’s always exciting to see ideas take shape, evolve into a product, and eventually hit the market—often after four or five code names, a couple of tech previews, and a few release date/year extensions. Despite my best efforts, the sheer volume of new stuff coming out is a bit overwhelming; and maintaining more than a cursory understanding of the products that are incubating at Microsoft is pretty challenging. But when some partner teams started asking what it would take to write VB.NET code-behind for a browser plug-in that could run cross-browse and cross-platform, my interest was definitely piqued. “Let me get this straight… You want to write a web plug-in VB.NET… that doesn’t require the full .NET framework to be installed… and runs on the Mac… and Firefox … but supports the full VB.NET language? Uh… Okay, let’s chat.”

It has only been a few months and a handful codename changes since we had that discussion (For a humorous history of Silverlight’s codenames, check out Tim Sneath’s blog.) , and despite a number of obstacles, we’re getting there with the Alpha release of Silverlight v 1.1. And while I’m by no means a Silverlight guru, I have been using it for a little while now and I thought I’d shed some light on what’s out there for VB developers who are interested in trying out Silverlight v1.1.

The Visual Basic Language on Silverlight

Prior to the announcement of Silverlight 1.1, Silverlight plug-ins were written in XAML and Javascript. While the Javascript model is certainly powerful, using VB is always my preference—it’s a language I know well, and its flexibility suits my programming style. Not to mention that the introduction of VB.NET into the Silverlight world brings with it many of the .NET Framework’s types and APIs I’ve come to rely on.

If you’ve had a chance to download the Silverlight 1.1 runtime, you may have noticed that it’s MUCH smaller than the full .NET Framework at 4.2 MB (and hopefully shrinking!). Clearly, some things have been factored out of the .NET Framework to keep the download size down and installation time short. And although a lot has been removed, the core set of types is included along with some APIs that are particularly useful for writing plug-ins—things like a “lite” version of System.Xml.dll, support for making web service calls, and so on. When deciding what aspects of the Visual Basic language and runtime should be included with Silverlight v1.1, we tried to follow a similar pattern: we wanted to preserve the core VB programming experience—late binding, conversions, Linq, and so on; and we didn’t want to bloat the download size with anything that wasn’t absolutely necessary or didn’t make sense in Silverlight—things like some of the COM helpers (COM is not supported in Silverlight), financial functions, etc. It was a delicate balance to strike between functionality and overall size. The Silverlight 1.1 Alpha is our first crack at it… and it may be refined over the coming months with feedback. Here’s a laundry list of what’s supported/not supported currently. (If you’re interested in digging into the details, you can also view the types in the Object Browser using the tools described below.)

Supported…

Late Binding: One of the most definitive features of the VB language, I find late binding to be especially useful in writing Silverlight code-behind.
Conversions: Implicit and explicit conversion operators are available—Ctype, CStr, etc.
Linq: Currently, Linq over objects is supported
String utilities: Len(), InStr(), Mid(), UCase(), etc
VB Collection: Most folks either love it or hate it. A subset of generic collections is also supported. (Non-generic collections are considered obsolete for Silverlight.)
- Dictionary(Of Key, Value)
- List(Of T)
- ArrayList (Obsolete)
- BitArray (Obsolete)
- Hashtable (Obsolete)
- Queue (Obsolete)
- SortedList (Obsolete)
- Stack (Obsolete)
Math utilities: Rnd(), Random()
IIF()
Information utilities: Things like IsNumeric(), IsDate(), UBound(), LBound(), and so on
Date utilities: Now(), TimeOfDay(), Year(), etc
Constants: vbCrLf, vbTab, etc. Some of the more obscure constants have been removed, but the core set is included.
All core VB Language Constructs: Type Inference, anonymous delegates, Handles, etc

Not Currently Supported…

The My Namespace: We removed this for Alpha release because much of the existing My Namespace doesn’t make a ton of sense in Silverlight.
XML Literals: The compiler support for XML literals is present, but System.Xml.Linq (which the feature depends on) is not available in Silverlight 1.1.
COM Support: Silverlight plug-ins are not allowed to call COM components, so we removed the VB utilities related to COM (e.g., the COM Class attribute)
FileSystem Object (VB6 Compatibility): Direct access to the file system is not permitted, so these APIs were removed. Alternatively, you might check out System.IO.IsolatedStorage if you need to persist data locally

As a sort of test piece, I recently took a look at the Clock Sample and wanted to see if the feature set we settled on enabled me to write VB code as I normally would for a Windows Forms or WPF application. The code basically just sets the minute, second, and hour hands on the clock to the current time (approximately). Here’s what it looks like…

' Anonymous delegates, Handles--isn't it pretty?

Public Sub Canvas_Loaded() Handles Me.Loaded

    InitializeComponent()

    ' Type inference; DateTime functions

    Dim currentTime = Now

    ' Conversions, type inference

    Dim hourAngle = ((currentTime.Hour / 12) * 360 + currentTime.Minute / 2) + 180

    Dim minAngle = ((currentTime.Minute / 60) * 360) + 180

    Dim secAngle = ((currentTime.Second / 60) * 360) + 180

    ' hourAnimation is a generated variable that makes use of WithEvents and Conversions

    '     Protected WithEvents hourAnimation As DoubleAnimation

    '     Me.hourAnimation = CType(Me.FindName("hourAnimation"),DoubleAnimation)

    hourAnimation.From = hourAngle

    hourAnimation.To = hourAngle + 360

    minuteAnimation.From = minAngle

    minuteAnimation.To = minAngle + 360

    secondAnimation.From = secAngle

    secondAnimation.To = secAngle + 360

End Sub

All in all, this particular example looks and feels pretty VB to me—which isn’t to say we’ve nailed it by any means… but the example does give some indication as to the type of VB experience we’re striving for with Silverlight. Let us know what you think.

Tools for building Silverlight Plug-ins with VB

Unless you’re really into notepad , download the tools for Silverlight. The VS project templates alone are worth the bandwidth required, as they’ll get you started in the right direction. In addition, many of the more interesting things you can do with Silverlight (e.g., animations, embedding videos, etc) are pretty tedious to wire-up by hand in XAML; using Expression Blend makes the process *much* easier. All of the components mentioned below are available at: http://silverlight.net/GetStarted/. I’ve just included them here for convenience.

What to download

Silverlight 1.1 Runtime: This is the version of Silverlight that enables you to write VB code-behind. It includes a version of the factored .NET Framework, including the VB runtime (Microsoft.VisualBasic.dll).
ASP.NET Futures Runtime: Among other features, the controls included in this download make it much easier to embed Silverlight controls and rich media in existing ASP.NET web applications
VS Orcas Beta 1: Note: You need to have the official Orcas Beta 1! Earlier CTPs won’t cut it. Even if you choose not to use Visual Studio to do your development, you’ll need the Beta 1 VB 9.0 compiler, as it includes some changes required to target the slimmed-down .NET Framework.
VS Add-On for Silverlight: This component provides some project templates and IDE changes for building Silverlight applications in VB (and C#).
Expression Blend 1.1 CTP: The VS Add-On mentioned above does not include a designer for Silverlight; editing XAML is done in the XML editor. While the XML editor does support IntelliSense, I find it much easier to perform the visual and story board layouts in Expression Blend. (See the note below for the workaround required to use VB & Blend.)
Silverlight SDK: The most interesting content in the SDK is the reference documentation for the VB runtime. It basically details what functions and types in Microsoft.VisualBasic.dll. The download also includes samples, although I generally prefer to see them online here: http://silverlight.net/quickstarts/managed.aspx.

If you run into any problems getting this stuff installed, please post the problem at the forums, http://silverlight.net/forums/.

Workarounds

Okay, almost there… we just need to work around one somewhat confusing bug in Blend you’ll run into when you try to create a VB project:

The problem here is that Expression Blend is configured to build VS 2005/VB 8.0 projects, but only VB 9.0 supports building Silverlight 1.1 applications. To work around the issue, you’ll have to re-configure Blend to use VS Orcas & VB 9.0 (Sigh!). Here’s how…

Close Microsoft Expression Blend.
Navigate to \Program Files\Microsoft Expression\Blend 1.1\.
Create a new XML file in that folder and then rename the file to Blend.exe.config.
Paste the following XML snippet into Blend.exe.config.
Save Blend.exe.config and close it.
Open Microsoft Expression Blend. Select “Visual Basic” as the language and you can create “Silverlight Application” projects.

Blend.exe.config

<?xml version ="1.0"?>

<configuration>

    <startup>

        <supportedRuntime version="v2.0.50727" safemode="true"/>

        <requiredRuntime version="v2.0.50727" safemode="true"/>

    </startup>

    <runtime>

        <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

            <dependentAssembly>

                 <assemblyIdentity name="Microsoft.Build.Framework" publicKeyToken="b03f5f7f11d50a3a" culture="neutral"/>

                <bindingRedirect oldVersion="0.0.0.0-99.9.9.9" newVersion="3.5.0.0"/>

            </dependentAssembly>

            <dependentAssembly>

                <assemblyIdentity name="Microsoft.Build.Engine" publicKeyToken="b03f5f7f11d50a3a" culture="neutral"/>

                    <bindingRedirect oldVersion="0.0.0.0-99.9.9.9" newVersion="3.5.0.0"/>

            </dependentAssembly>

        </assemblyBinding>

    </runtime>

</configuration>

Just keep in mind that if you uninstall Orcas and you want to continue using Blend, you’ll need to delete Blend.exe.config.

A lap around the tools

You’re pretty much good to go at this point. With the installation of the Visual Studio Add-On, two new project types are available: a standalone Silverlight Web Application and Silverlight Class Library.

I generally find the “Silverlight Project” the most useful template to work with. It includes basic XAML and VB code-behind files, Javascript goo required to instantiate the control, and a boilerplate HTML page that hosts the control. The project can be debugged by F5’ing TestPage.html, although Edit-and-Continue is not supported for Silverlight projects.

The programming model for Silverlight 1.1 is very similar to that of ASP.NET and WPF: the UI aspects of the control are declared in the .xaml file, and events are handled in the code-behind (.xaml.vb) file. Similar to desktop WPF, each named UI element declared in XAML has a corresponding variable that can be referenced in code-behind.

For example, the following TextBlock declared in Page.xaml…

<TextBlock x:Name="TextBlock1" Text="1234" />

Can be referenced in Page.xaml.vb as follows…

Private Sub TextBlock1_MouseEnter() Handles TextBlock1.MouseEnter

Me.TextBlock1.Opacity = 1

End Sub

If you’re interested in checking out what’s available in the .NET Framework for Silverlight, you can poke around in the Add Reference dialog and/or Object Browser. The former is filtered to only show what you can use in Silvelight 1.1.

The Silverlight tools are very much in an Alpha state, so your mileage may vary a bit. In particular, debugging VB applications can be a somewhat bumpy ride… so please let us know on the forums if you run into any issues.

Additional resources to check out

There are already some pretty vibrant community resources on Silverlight popping up. Many of these include sweet looking samples, and the amount of content should continue to grow in the coming months. The main place to keep an eye on is the main Silverlight site and the Silverlight forums.

By all means, feel free to share your impressions of VB on Silverlight. It’s early and we could really use the feedback. Thanks!

Joe & The VB Team

What do the announcements at Mix mean for the Visual Basic developer?

VBTeam — Tue, 01 May 2007 08:52:00 GMT

At the Mix conference today in Las Vegas, Ray Ozzie and Scott Guthrie were dropping goodies like tootsie pops from a piñata. There was so much packed into their over two hour keynote that I thought it would be useful to distill the announcements down into one bite-sized post that should make for a pretty quick read (but unfortunately, includes no code samples.)

- VB on Silverlight – In short, this means that you can now use Visual Basic as the code-behind for whiz-bang rich interactive applications that run on Windows or the Mac and can run in IE, Firefox, and Safari. You can download the alpha .NET-enabled release but to develop you will need the Visual Studio Extensions for Silverlight for “Orcas” Beta1.

- Unparalleled support for dynamic languages – As you may have noticed us hinting at over the past couple of years now, VB has certain aspects to it that are dynamic – late binding, explicit member indexing, runtime conversions and operators, etc. With Silverlight comes the introduction of the DLR, a shared runtime component for dynamic languages atop .NET. There are many, many, things this means for VB that will unfold over the coming months, but one of the most important ones is that it will enable simple interoperability between Visual Basic and the other dynamic languages on .NET like Ruby, Python, and JScript.

- Live Services – The Live Services team has created Windows Live in a Box that will allow you to begin integrating rich photo experiences, search, contacts and more into your applications.

- Productivity Frameworks – Scott and Ray didn’t talk about this in their keynote, but with Mix comes a couple of new productivity frameworks. The first is Dynamic ASP.NET controls which uses runtime database schema and coding conventions to data-bind and generate ASP.NET pages. The second is “Jasper”, a dynamic data access layer that is independent of a presentation technology which sits atop the Entity Framework. We’re looking forward to seeing the reception for these kinds of frameworks.

So, that’s the two-bite version of the announcements… Over the next couple of weeks we’ll post new entries, videos, and samples demonstrating what each of these means in detail – though for some dirty details, you’ll have to wait for the PDC.

I’ll be at VSLive next week to talk about LINQ and Integrated XML in VB Orcas. I also have my turn for the webcast series for the VB LINQ deep dive and TechEd not that shortly after I get back – so I’ve got some work to do! Enough overview, back to coding!

So, you're going to Mix?

VBTeam — Sat, 28 Apr 2007 03:38:00 GMT

Now that Orcas Beta1 is on your machines, we’re trying to finish up the Beta2 version of Orcas to deliver those features you are so eagerly awaiting – features like Group By, explicit Joins, Nullable, keyword Intellisense, and Lambda Expressions. Things are looking very good as you probably witnessed in Kit’s web cast just the other day.

In other news, the MIX developer conference starts on Monday in Las Vegas. I wanted to make sure that our VB web developers out there know which sessions to attend to get the best picture of what’s coming down the road. Obviously, the most revolutionary for VB developers will be the keynote with Ray Ozzie and Scott Guthrie – this will make VB developers of all sorts get pretty giddy. What’s coming is awesome and I promise to have another blog entry on Monday to make sure that those who can’t attend are well informed.

Aside from the keynote, be sure not to miss:

- Jim Hugunin and John Lam talking about dynamic languages on .NET. (11:45am, Tuesday) This one has so much revolutionary stuff in it that they actually pulled it from the session descriptions on the Mix site. Long story short, search the web on musings about why John and Jim are at Microsoft, add to that the fact that the VB team has been working with them heavily, and you might be able to figure it out.

- Developing Data Driven Applications Using the New Dynamic Data Controls in ASP.NET

Very, very cool new controls for ASP.NET that are particularly attractive to people that appreciate every opportunity to write less code.

- Rapidly Building Data Driven Web Pages with Dynamic ADO.NET

Sam and Shyam will talk about a new LINQ-enabled API for data access that’s very productive and again, will be appreciated by folks that don’t like to have to type so many characters or use designers to generate a simple forms-over-data app.

- Using LINQ to Dramatically Improve Data Driven Development in Web Applications

Anders will be giving the LINQ overview but this time it will be specifically targeted at using LINQ to author web applications. Be sure not to miss Anders typing the “Dim” keyword!

Once the sessions have been delivered, I’ll make sure you’ve got the scoop on what the heck these guys are talking about.