The Visual Basic Team : Corrina Barber

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