Blog header

Silverlight animation: Moving ball

I decided it was time to get more acquainted with XAML and Microsoft Silverlight.

Too keep things simple I used a couple of standard controls along with code to make a simple moving ball animation. Since I've previously made a couple of games in Adobe Flash I also wanted to mimick onEnterFrame, which isn't available in Silverlight.

The XAML code is as follows:

<UserControl x:Class="MovingBall.MainPage" 
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	Width="400" 
	Height="300">
	
    <Grid x:Name="MainGrid" 
		  Background="White" 
		  Width="400"
		  Height="300"
		  ShowGridLines="True">
		
		<Grid.RowDefinitions>
			<RowDefinition Height="250" />
			<RowDefinition Height="50" />
		</Grid.RowDefinitions>
		
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="400" />
		</Grid.ColumnDefinitions>
		
		<Canvas Name="MainCanvas"
				Width="390"
				Height="240"
				Grid.Row="0"
				Grid.Column="0"
				Background="Black">
			
			<Ellipse Name="BallEllipse" 
					 Fill="Orange" 
					 Width="20" 
					 Height="20" />
			
		</Canvas>
		
		<StackPanel Name="ButtonStackPanel"
					Height="50" 
					Orientation="Horizontal" 
					HorizontalAlignment="Center"
					Grid.Row="1"
					Grid.Column="0">
			
			<Button Name="StartButton"
					Content="Start"
					Width="100"
					Height="40"
					Margin="0,2,10,0" />
			
			<Button Name="StopButton"
					Content="Stop"
					Width="100"
					Height="40"
					Margin="10,2,0,0" />

		</StackPanel>

    </Grid>

</UserControl>

And the C# code:

public partial class MainPage : UserControl
{
	private Storyboard m_storyboardMovingBall = null;

	private double m_horizontalMovement = 0.00;
	private double m_verticalMovement = 0.00;
	
	public MainPage()
	{
		InitializeComponent();

		m_horizontalMovement = 1.00;
		m_verticalMovement = 1.00;

		// Register event handlers for the start and stop button
		StartButton.Click += 
			new RoutedEventHandler(StartButton_Click);
		StopButton.Click += 
			new RoutedEventHandler(StopButton_Click);

		// Ensure no grid lines are shown in MainGrid
		MainGrid.ShowGridLines = false;
	}

	public void StartButton_Click(object sender, RoutedEventArgs e)
	{
		if (m_storyboardMovingBall == null)
		{
			m_storyboardMovingBall = new Storyboard();
			m_storyboardMovingBall.Completed += 
				new EventHandler(StoryBoardMovingBall_Completed);

			if (!this.Resources.Contains("storyboardMovingBall"))
			{
				this.Resources.Add("storyboardMovingBall",
								   m_storyboardMovingBall);
			}
			
			m_storyboardMovingBall.Begin();
		}
		else
		{
			m_storyboardMovingBall.Begin();
		}
	}

	public void StopButton_Click(object sender, RoutedEventArgs e)
	{
		if (m_storyboardMovingBall != null)
		{
			m_storyboardMovingBall.Stop();
		}
	}

	public void StoryBoardMovingBall_Completed(object sender, 
											   EventArgs e)
	{
		// Get hold of the ball ellipse's left (X) and top (Y) property
		double ballEllipseLeft = 
			(double)BallEllipse.GetValue(Canvas.LeftProperty);
		double ballEllipseTop = 
			(double)BallEllipse.GetValue(Canvas.TopProperty);

		// If we reach the right side, the ball should be moved left
		if (ballEllipseLeft >= (MainCanvas.Width - BallEllipse.Width))
		{
			m_horizontalMovement = -m_horizontalMovement;
		}

		// If we reach the left side, the ball should be moved right
		if (ballEllipseLeft <= 0.00)
		{
			m_horizontalMovement = Math.Abs(m_horizontalMovement);
		}

		// If we reach the bottom, the ball should be moved up
		if (ballEllipseTop >= (MainCanvas.Height - BallEllipse.Height))
		{
			m_verticalMovement = -m_verticalMovement;
		}

		// If we reach the top, the ball should be moved down
		if (ballEllipseTop <= 0.00)
		{
			m_verticalMovement = Math.Abs(m_verticalMovement);
		}

		// Move the ball
		BallEllipse.SetValue(Canvas.LeftProperty, 
							 ballEllipseLeft + m_horizontalMovement);
		BallEllipse.SetValue(Canvas.TopProperty, 
							 ballEllipseTop + m_verticalMovement);

		m_storyboardMovingBall.Begin();
	}
}

You can check out the moving ball animation here.

DISCLAIMER: I'm a Silverlight novice so there are [probably] many better solutions available than the one described above.

 

Published Sat, 09 Jan 2010 20:52:20 GMT by Marcus Andersson
Filed under C#, Silverlight, XAML

Comments

Leave a comment
Title (required)
Message (required) []
Name (required)
Email (optional - will not be shown)
Url (optional)
Verify (required - type answer)
Captcha Reload captcha
Activity indicator