Blendables Component Review

by Don Burnett

I continue  to be amazed at the quality and functionality of the IdentityMine's Blendables..

I started using the 3d Carousel control tonight. As some of you know I am porting my web based personal portfolio as a Rich Internet Application with 1 click install on the internet. Mostly to test functionality but also to have a cool demo online of my RIA skillset.

I have found the 3D carousel very easy and flexible. It's also the first time that I have used the 3dTools.dll as well.

 

What you are looking at above is a series of images mapped to some surfaces and rotated in a carousel. The images were brought in thru an XML datasource and the code for doing so is pretty easy to work with.

The first thing I did was define a data template for the actual images and place it in app.xaml with a resource dictionary.

 

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="Resources\Resources.xaml" />
</ResourceDictionary.MergedDictionaries>

<DataTemplate x:Key="FolioTemplate">
<Grid Width="160" Height="100">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Grid.ColumnSpan="2" Fill="White"
Stroke="Black" StrokeThickness="1" />
<Image Margin="2" Source="{Binding XPath=fullSizeImage}" />
<Grid Grid.Column="1" Margin="5">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
</Grid>
</Grid>
</DataTemplate>
</ResourceDictionary>
</Application.Resources>
</Application>

later I added 3d meshes and the required 3d transforms etc.. for brevity of example I am not listing the geometry here..

<MeshGeometry3D x:Key="PlaneMesh"/>
<MeshGeometry3D x:Key="SphereMesh"/>
<MeshGeometry3D x:Key="ConcavePlaneMesh"/>

<ScaleTransform3D x:Key="ContactTransform" ScaleX="2.5" />

<Transform3DGroup x:Key="MenuTransform">
<ScaleTransform3D ScaleX="2" />
<RotateTransform3D>
<RotateTransform3D.Rotation>
<AxisAngleRotation3D Axis="0,1,0" Angle="180" />
</RotateTransform3D.Rotation>
</RotateTransform3D>
</Transform3DGroup>

next in my resources section of the page I added my XML datasource

<xmlDataProvider x:Key="Portfolio" XPath="portfolio/portfolioItem" d:IsDataSource="True" Source="/Resources/portfolio.xml" IsAsynchronous="False" />

<XmlDataProvider x:Key="Contacts" XPath="portfolio/portfolioItem" d:IsDataSource="True" Source="/Resources/portfolio.xml" IsAsynchronous="False" />

The next thing I do is add the controls

 

<Grid>
<Viewport3D Grid.Row="1" x:Name="viewport">
<Viewport3D.Camera>
<PerspectiveCamera Position="0,0,22" LookDirection="0,0,-1" />
</Viewport3D.Camera>
<ModelVisual3D x:Name="light">
<ModelVisual3D.Content>
<Model3DGroup>
<AmbientLight Color="#777777" />
<DirectionalLight Color="#BBBBBB" Direction="-1,-1,-1" />
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
<blendables:Carousel3D x:Name="_carousel" ItemsSource="{Binding Source={StaticResource Contacts}}"
UpDirection="0,1,.3" ExpandedWidth="12" ExpandedDepth="12" State="Expanded"
SelectedIndexChangedAnimationDuration="0:0:0.3">
<blendables:Carousel3D.ItemModelGenerator>
<blendables:DataTemplatedModelGenerator Template="{StaticResource FolioTemplate}"
DefaultGeometry="{StaticResource PlaneMesh}"
ItemModelTransform="{StaticResource ContactTransform}" />
</blendables:Carousel3D.ItemModelGenerator>
</blendables:Carousel3D>
</Viewport3D>
</Grid>

 

and viola we are in business.. I will talk more about the carousel again very soon, but it's very easy to use and very flexible.

 

You should check this out, it's very cool..