Sand Effect Control
For those familiar with the game Sandmania and due to popular request here is a re-usable control that allows the effect to be used in your own applications. For various reasons, mainly performance, the size of the control must be set before it can be used and to resize it afterwards you will need to remove the current control and create a new instance at the new size.
Here we will create an hourglass timer.
<UserControl x:Class="SandmaniaControl.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:liquidSandmania="clr-namespace:Liquid;assembly=Liquid.Sandmania"
>
<Grid x:Name="LayoutRoot">
<liquidSandmania:Sandmania x:Name="sand" Width="99" Height="205" />
<Image Source="images/timer2.png" Stretch="None" />
</Grid>
</UserControl>
Here is the C#, here we use the BlitReady event to draw the underlying image which contains our solid pixels which the sand will not travel through and our sand pixels. In this example White pixels (#FFFFFF) are solid pixels.
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
sand.BlitReady += sand_BlitReady;
}
private void sand_BlitReady(object sender, EventArgs e)
{
sand.Blit(0, 0, "SandmaniaControl;component/images/timer.png");
}
}
Here are the images we use to build our hourglass. The important one is the underlay image on the left which contains the solid pixels (#FFFFFF), sand cannot travel through solid pixels. The sand itself at the top, and the Red pixels at the bottom which we use to measure how many pixels are in a target area.
The overlay image is simply that, to hide the solid White lines and make the hourglass more realistic.
You need to login to Download the full demo example, If you do not have a login you can register for free!
Rate this:
1 Star
2 Star
3 Star
4 Star
5 Star
5 Ratings / 4.6 Average