![]() ![]() You know, the simple left-to-right scrollers that you see in so many applications? I’ve seen them in several applications, yet when I searched around for a Silverlight version that met my criteria I came up empty. It all started with a requirement for a simple Scroller control. UcProj5.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.Last week I had the opportunity to really dive into some fun with a Silverlight 2 ListBox. UcProj4.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 UcProj3.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 UcProj2.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 UcProj1.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 UcProj0.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 LayoutRoot.MouseMove += new MouseEventHandler(LayoutRoot_MouseMove) ĬompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering) Private void UserControl_Loaded(object sender, RoutedEventArgs e) How do I get to rotate my UserControls also? It works fine with an image control or grid control. I used UserControls instead of images, they appear correctly in Blend but when I run the application they won`t rotate. Image6.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Īs always you can grab the code source here. ![]() Image5.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Image4.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Image3.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Image2.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Image1.Opacity = (pt.Y / LayoutRoot.ActualHeight) * 0.5 + 0.5 Image6Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Image5Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Image4Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Image3Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Image2Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Image1Projection.RotationY += ((pt.X – (LayoutRoot.ActualWidth / 2)) / LayoutRoot.ActualWidth) * 10 Void CompositionTarget_Rendering(object sender, EventArgs e) I use the mouse X co-ordinates to change the speed and direction of the carousel and the mouse Y value to change the opacity: Next I set up a CompositionTarget.Rendering function so that I can update my 3 dimensional carousel constantly. Void LayoutRoot_MouseMove(object sender, MouseEventArgs e) In the C# I set up a listener to monitor the mouse movement and store the values in ‘pt’: This will allow me to easily change the angle of each image dynamically in the C#. I then place an x:Name on each images projection tag as seen in the below example: I then use the ‘RotationY’ value to change the angle of each image, as I have 6 images each image is rotated by a factor of 60 degrees (6 x 60 = 360 degrees). This value needs to be the same on each of the 6 images I use in order to get them to match up at the edges. I use the ‘CenterOfRotationZ’ value to move the center point away from each image plane. I do this by changing 2 projection properties: To start with I have placed 6 images inside Blend and used the projection properties to offset them against each other to form a 3 dimensional hexagon. ![]() Please upgrade your browser The ‘how to’ bit
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |