Created by Josh Wagoner.  These instructions are also included as a word .doc in the download.

*Remember you MUST add the IdentityMine.Windows.dll and IdentityMine.Windows.Essentials.dll reference assemblies to the samples before running them.  They can be found at %ProgramFiles%\Reference Assemblies\IdentityMine Blendables\Essentials Mix\v1.0 once you install the CTP.

The Carousel3DSamples project contains three sample scenarios using Carousel3D.  The samples are each within their own page in the Samples folder.  When you run the project you can switch between the samples using the menu across the top of the window.  Most of the resources used in the samples are located in App.xaml.  Here’s a description of each sample:

This sample binds an xml file of contacts to the ItemsSource property of a Carousel3D.  It uses the DataTemplatedModelGenerator IItemModelGenerator implementation to data template the xml data and map that data template output to a plane mesh.  In this sample and the other two samples you’ll see that the camera is positioned on the z-axis looking down the negative x-axis.  This is because Carousel3D, by default, positions the front of the carousel pointing down the positive z-axis.  There are a few Carousel3D properties used in this sample:

·         ItemsSource: This is used to bind the Carousel3D to the xml data provider just as you would bind an ItemsControls ItemsSource property.

·         UpDirection:  UpDirection specifies the Vector3D around which the elliptical layout is created.  The value used in the sample (0,1,.3) has the effect of slightly tilting the front of the carousel downward and the back upward.

·         ExpandedWidth and ExpandedDepth: These properties control the size of the elliptical layout that the Carousel3D uses to position the generated item models.  The values 12 and 12 have the effect of creating a circular layout.

·         State: State can either be Expanded or Collapsed.  In this sample it is set to Expanded.  If the value is changed to collapsed at runtime the item models will animate in to the center and then be removed from the scene.

·         SelectedIndexChangedAnimationDuration: This property controls the duration of the spin animation that executed when the SelectedIndex of the Carousel3D is changed by clicking on one of the items in the Carousel3D.

This sample binds the ItemsSource property to an xml file or a larger set of contacts.  It is also making use of a few more properties of Carousel3D and supports filtering of the data in the Carousel3D using the TextBox at the top of the page to filter down based on the contact’s name.  Here’s a description of the new properties shown in this sample:

·         IsPrioritySort: This property tells the Carousel3D that the collection that is being displayed is sorted and that they should be positioned in priority order, meaning that the items at the beginning of the collection will be kept closest to the front of the Carousel3D.  This is much easier seen than explained so run the sample and see what happens when you filter using the text box.  Setting this property to true as in this sample has the effect of keeping all the items towards the front of the Carousel3D.

·         AddedItemEnterFromLocation:  This property sets the Point3D that newly added items will enter from when being animated.  When a filter operation occurs that adds more items back into the Carousel3D this property allows you to specify from where the models should be animated into the layout instead of the models just popping into place.  In this sample the property is set to -20,0,35 so that the new models animate in from the center left of the Carousel3D.

·         RemovedItemExistToLocation:  Similar to AddedItemEnterFromLocation this property allows you to specify where models should exit to when they are removed from the underlying Items collection of the Carousel3D.  In the sample it is set to 20,0,35 so that removed items exit to the center right of the Carousel3D.

·         FrontLoadLayoutItemDeltaAngle:  This is a really long property name indicating that this property allows you to set the angle between each item when they are positioned towards the front of the Carousel3D.  Suggestions for a better name for this property will be accepted. J  The sample sets this property to 7 so that there are 7 degrees separating each of the models in the Carousel3D.

The filtering in this sample is accomplished by simply wrapping the xml data in a CollectionViewSource exactly as you do sorting and filtering using an ItemsControl.  The TextBox at the top of the page is bound to a ContactFilter dependency property that has a change handler set on it in the DataSearcher.xaml.cs code behind that causes the CollectionViewSource to filter any time that property changes.

The sample illustrates one use of the Carousel3D to narrow down a large set of data to a few items in an intuitive way.  Of course, it was designed by a dev so hopefully Nathan will come up with some samples using this functionality in some even cooler ways. J

This sample does not make use of the ItemsSource property of Carousel3D and just drops 2D UI elements directly into the Carousel3D to create a 3D menu of items that can be scrolled through on the right side of the page.  This sample uses a transform on the Carousel3D itself to position the carousel so that the camera is looking at the inside of the elliptical layout instead of the outside like in the previous samples.  It also uses a transform to flip the item models around so that they face the inside of the Carousel3D.  There is only one new property of Carousel3D used in this sample:

·         MaintainItemModelFrontDirection:  The default value for this property is true.  When the property is set to true basically the Carousel3D will only translate the item models and will not rotate them in any way so that the “front” of the model always remains facing the front.  In this sample we have set this property to false.  When this property is false the Carousel3D will position the item models so that “front” of the model is tangential to the ellipse that Carousel3D is using to calculate the positioning of the item models.

This sample shows directly manipulating the Items collection property of the Carousel3D by putting several Grids inside the Carousel3D in the XAML.  It uses a custom model generator called InteractiveVisual3DModelGenerator to generate the models for those items (Grids).  In order to build the custom model generator the sample derives from ModelGeneratorBase, which is a base class provided by the Essentials mix for created model generators, and overrides the GetItemModel method. (Note: you could simply implement IItemModelGenerator yourself which only requires a few more steps than deriving from ModelGeneratorBase).  In order to get the interactivity of the 2D content on the 3D models generated for each Grid this model generator uses the InteractiveVisual3D control from codeplex.com (http://www.codeplex.com/3DTools).  It also provides a couple properties for specifying a Geometry3D and a Transform3D for the generated models.

The last thing this sample does is provide a couple buttons that move the menu by changing the selected index property of the Carousel3D in click handlers in the SideMenuPanels.xaml.cs code behind file.