Let's make use of PlaneProjection to program other 3D effects : carousels in this post.
First a simple one, to show how easy it is : just a few lines of code !
Project / source code
The images are not included in the xap file as internal ressources, they are loaded from the web server at run time (to do so, the images must be copied in the ClientBin folder, the one that contains the xap file to be published).
We define a playing ground for the carousel :
<Grid x:Name="ground" Width="400" />
The code is self-explanatory (just a bit of very basic geometry to put each image at different angle) :
string[] arImageNames = { "Amsterdam", "London", "Moskow", "Paris", "Pisa", "Roma",
"TajMahal", "Venice" };
Image[] arImages;
public MainPage()
{
InitializeComponent();
InitializeCarrousel();
}
private void InitializeCarrousel()
{
Storyboard stb = new Storyboard();
int N = arImageNames.Length; // number of images
arImages = new Image[N];
// for each image
for (int i = 0; i < N; i++)
{
// load image first from the server
arImages[i] = new Image();
arImages[i].Width = 150; arImages[i].Height = 150;
arImages[i].Source = new BitmapImage(new Uri(arImageNames[i] + ".jpg", UriKind.Relative));
// prepare an image for the carousel
Image img = new Image();
img.Width = img.Height = 150;
img.Source = arImages[i].Source;
img.Stretch = Stretch.Fill;
// prepare rotation around the Y-axis
PlaneProjection pp = new PlaneProjection();
pp.CenterOfRotationZ = -250; // center behind the screen
img.Projection = pp;
// prepare the animation
DoubleAnimation da = new DoubleAnimation();
da.From = i * 360 / N; // each image at different angle
da.By=360; da.Duration = TimeSpan.FromSeconds(10);
da.RepeatBehavior = RepeatBehavior.Forever;
Storyboard.SetTarget(da, pp);
Storyboard.SetTargetProperty(da, new PropertyPath("RotationY"));
stb.Children.Add(da);
// add image to the carousel
ground.Children.Add(img);
}
this.Resources.Add("stb", stb);
stb.Begin();
}
Let's now create a more sophisticated carousel :
Project / source code
We replaced each image with a stack panel made of :
- a semi-transparent black rectangle,
- an image,
- another semi-transparent black rectangle.
A bit more geometry to compute the width of each semi-transparent rectangle.
To change speed, we handle the MouseMove event in a colored rectangle and change the Duration property of each animation (as many as images to be displayed). To change rotation, we need to stop the animation and restart it.
To end the day, another carousel :
Project / source code
Each city is displayed as a TextBlock inside a border. For each such border, we add 6 containers (again borders). Doing so, the figure looks more as a circle. The trick is to compute the height of each elementary border : we fixed the
height of each display panel, we know how many cities we have. And we know from basic geometry that a circonference is 2*PI*radius...
Subscribe