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.
