I have written the code to adapt to the size of the scrollable area, you can see this by clicking on the ‘+’ and ‘-’ buttons. These will add / remove the items inside the scrollable area. If you remove enough items so that the area taken up is less than that of the screen, the items are positioned in the middle.

To carry out this effect I need to keep track of the mouse position, the width of the screen and the width of the Stack panel containing the items. Each of these values need to be updated when ever they are changed.

I then position the movable area based on the following equations;

Where:
a = Mouse X position
b = Width of Screen area
c = Width of area to be moved
if movable area is bigger than screen area:
moveable area X position = (a/b)*(b-c)
if moveable area is smaller than screen area:
moveable area X position = (b-c)/2

This equation is run every time a frame is rendered.

The User Experience bit

It is an important interaction that when working with scrolling content like this, especially when the content is a menu, to make sure that the direction of new content approaches the movement of the mouse.

Get the code

As always you can download the example files here.

using System.Windows.Browser;

To then listen for the Mouse wheel interaction I set events in the browser using the following piece of C#;

HtmlPage.Window.AttachEvent(“DOMMouseScroll”, OnMouseWheel);
HtmlPage.Window.AttachEvent(“onmousewheel”, OnMouseWheel);
HtmlPage.Document.AttachEvent(“onmousewheel”, OnMouseWheel);

I can then check for a value to see if the mouse wheel is being moved forward or backward using the following Method;

private void OnMouseWheel(object sender, HtmlEventArgs args)
{
double mouseDelta = 0;
ScriptObject e = args.EventObject;

// Mozilla and Safari
if (e.GetProperty(“detail”) != null)
{
mouseDelta = ((double)e.GetProperty(“detail”));
}
// IE and Opera
else if (e.GetProperty(“wheelDelta”) != null)
mouseDelta = ((double)e.GetProperty(“wheelDelta”));
mouseDelta = Math.Sign(mouseDelta);
}

This now gives me a value in the form of ‘mouseDelta’ which can be applied to what ever you want your interaction to be. In this case we are controlling the scale factor of a canvas.

To limit the scale factor I run a check to see if the scale value has gone under 1 or over 10 and if so reset the value to the minimum or maximum amount;

if (ScaleFactor.ScaleX < 1)
{
ScaleFactor.ScaleX = 1;
ScaleFactor.ScaleY = 1;
}

if (ScaleFactor.ScaleX > 10)
{
ScaleFactor.ScaleX = 10;
ScaleFactor.ScaleY = 10;
}

I also check where the mouse cursor is and focus the zoom in / out on that position. I do this by storing the mouse co-ordinates everytime the user moves their mouse and then changing the ‘RenderTransformOrigin’ value;

//get mouse co-ordinates
void zoomArea_MouseMove(object sender, MouseEventArgs e)
{
pt = e.GetPosition(zoomArea);
}

//change the RenderTransformOrigin
zoomArea.RenderTransformOrigin = new Point(pt.X / zoomArea.Width, pt.Y / zoomArea.Height);

Get the code

You can download the above example here.

if (e.Key == Key.Left)
{
tankRotate.Angle -= 1;
}
if (e.Key == Key.Right)
{
tankRotate.Angle += 1;
}

To get the object to move forward in the direction it is facing is going to require our old friend ‘Trig’ to take center stage. We can use the following formulae to calculate how far to move our object by its X and Y co-ordinates:

Move X by: Math.Cos(Angle) * Speed

Move Y by: Math.Sin(Angle) * Speed

Where Angle is in radians.

Radians

1 radian is equal to 57.29577 degrees of a full circle. So if our object is turned at an angle of 57.29577 degrees it is equal to 1 radian. To work out the value of our angle in radians we can use the following formula:

Radians = Angle / 360 * 2 * Pi

Working out how much to move our object

i.e. if our object is turned to 45 degrees and our required movement speed is 2.

X += Math.Cos(45 / 360 * 2 * 3.14159) * 2;

Y += Math.Sin(45 / 360 * 2 * 3.14159) * 2;

Applying this formula to the C#

So to return to the example at the begining of this post. I use the below calculations to work out how much to increase or decrease the X and Y positions of my object:

if (e.Key == Key.Up) 

{

        tankMovement.X += Math.Cos(tankRotate.Angle / 360 * 2 * 3.14159) * 1;

        tankMovement.Y += Math.Sin(tankRotate.Angle / 360 * 2 * 3.14159) * 1;

}

Get the code

Feel free to grab the code here and start playing!

Upon recognition of a key assigned to a direction, an increase (or decrease depending on direction) is made to a variable that is then applied to the the Helicopters ‘Canvas.setTop‘ or ‘Canvas.setLeft‘.

The ‘Space bar’ or Numeric ’5′ key will level the Helicopter out and stop it moving in any direction. This is done by reducing or increasing the movement in all directions until all values equal zero.

I constantly repeat 2 storyboards to animate the helicopter blades and make visible/collapse one of 5 graphics to display the helicopter facing in the relevant direction that it is moving in. Finally I constantly run a calculation to tilt (RotateTransform) the helicopter in the direction it is moving and making it level when not moving.

To save the user from loosing sight of the helicopter in the above example I have put in a collision check to make sure the helicopter can not fly outside of the viewable area. If the user controls the helicopter to fly past any boundary then the helicopters movement in that direction will be reset to zero.

Next steps

I would like to add a winch that can be dropped down below the helicopter. The winch could then be made to pick objects up and drop them on command.

Get the code

Feel free to grab the code here and start playing!

To get this effect I run some event handlers to check when the mouse is being pressed. While the mouse is pressed, every time the mouse is moved a new ‘Line’ element is produced and plots the co-ordinates from the previous mouse position to the current position. This ‘Line’ element is then styled up based on the selection from the colour palette and sliders. Finally I set Line1.StrokeStartLineCap = PenLineCap.Round; and Line1.StrokeEndLineCap = PenLineCap.Round; to ensure the joins between each ‘Line’ element fits snugly.

Possible improvements

Firstly it would be nice to add a feature to erase paint – I haven’t spent much time thinking about how to do this yet as I’m sure it’s going to be quite tricky.

It would be quite easy to add tools to draw rectangles and circles and even reasonably easy to add a gradient tool to colour these up.

Text would be an interesting addition.

The ability to save your master piece to either return at a later point or export to an image would be cool.

Get the code

As always, feel free to grab the code here and start playing!

In a previous post (here) I dabbled in making a dragable bouncy ball that simulated a gravity effect when released. I have taken that project and cleaned it up a bit to get rid of most of the bugs.

//Declare the limits of where the ball can bounce
private double BounceBoundaryLeft = 10;
private double BounceBoundaryTop = 10;
private double BounceBoundaryRight = 490;
private double BounceBoundaryBottom = 390;
//Set Margin for dragging the Ball around the edge of the screen
private double DragMargin = 30;
//Declare Ball properties
private double BouncyBallWeight = 0.7;
private double BounceLevel = 0.8;
// Declare Shadow properties
private double ShadowOffset = 10;
private double ShadowHeightLimit = 300;

Get the code

Feel free to grab the code here and start playing!

Use the mouse to click and drag the ball, move the mouse and let go of the mouse button as you’re moving the mouse. The ball will pick up on the direction you were moving and continue in the same direction.

If the ball hits the ground the momentum built up by the ball will be reflected partially and rebound the ball back upwards.

If the ball hits the left, top or right boundary then the ball will be reflected partially and rebound in the opposite direction.

If the ball is dragged outside the of the boundaries of the Silverlight area then the ball will continue to move in the direction it was going in at the last point of contact, bouncing off the related boundary.

I have featured 2 Sliders to allow you to adjust the variables slightly to change the effect on the ball.

Future Enhancements

There are still a few bugs, every so often the ball will react a bit crazy – this is due to my coding no doubt, I would like to address this.

I would like to implement a dragable block that the ball would react and bounce off.

I would like to be able to have multiple balls on the stage with different properties that can additionally interact/bounce off each other

Get the code

As always you can grab the code here, please pull it apart and enjoy!

In the above example a single control houses the rain drop graphic and its storyboard animating from the top of the screen to the bottom. I then use the Random command in Silverlight to decide where the rain drop will fall, what angle it will fall at and how deep (using scale) into the image it will appear to be.

Possible enhancements

A control/slider could be added to control the wind direction and speed.
An effect placed on the background to simulate less light as rain fall increases.

Get the code

Feel free to grab the code here and start playing!

Future enhancements

I have already got additional values set up so that I can allow the user to customize each bug a little. For example you could give the bug extra life, tell it to make decisions quicker or speed it up. So I plan on making a popup/interface for the user to interact with these settings.

I also plan on adding a trait to each bug that will decide on how each bug will act when it comes in contact with another bug. For example 2 bugs could fight, run away from each other or reproduce and create more bugs. These new bugs would retain qualities from the 2 that produced them.

Finally I want to add the ability for the user to place food on the stage. This will attract bugs within a certain range and replenish their ‘bugLife’ while the food lasts.

Get the code

Feel free to grab the code here and start playing!

The below example shows three balls animating along the same distance over the same time.

The ‘easing’ feature in Blend allows us to add acceleration or inertia to an animation. In other words, instead of a constant speed we can make an object speed up and slow down during its path while still taking the same time to reach its destination. This effect can really bring animations to life, mimicking how objects work in real life.

Ball 2 uses the ‘easing’ feature to speed up the animation at the begining and slow down at the end each time the ball is moved. Notice how ball 1 still reaches its destination at the same time as ball 2 every time.

There are 2 ways of applying ‘easing’ to your animation inside the Blend interface:

Selecting a percentage for ‘easing in’ and ‘easing out’

Right click on a key frame and select either easing in or easing out. Choose a percentage from the list. In this method the Easing in relates to the journey to the keyframe where as easing out relates to the journey happening after the keyframe.

Using the Easing graph

Highlight a key frame (not at zero seconds) and go to the properties tab, the easing graph should now be displayed as below.

Pull the yellow pin on the left bottom to adjust easing in and pull the yellow pin on the top right to adjust easing out. The easing graph allows you to fine tune your animation in more detail. The easing graph effects the keyframe slightly differently to the first method, the easing in and easing out changed on the graph are related to the animation space between the current selected key frame and the key frame before it.

Ball 3 only applies the ‘easing’ feature at one of the 2 destinations mimicking a bouncing ball in real life. For the purpose of this example the ball never looses its energy through gravity so it will bounce for ever.

An additional scale animation has been placed at the moment ball 3 hits the pretend ground to mimick the ball being impacted and rebounding. This animation has been place on the grid containing the ball so that it can be easily run independantly to the bounce movement.

And finally..

This example loops forever because of a variable we can set in the XAML. Unfortunately the current version of Blend does not offer this function in the interface so you will have to switch to the XAML or Split view and find the Storyboard you want to loop. After the Storyboards x:Name place the following XAML.

RepeatBehavior=”Forever”

See a screen shot here: