essentials samples

Restyle the Zoombox control

JonathanRuss — Mon, 01 Sep 2008 20:35:17 GMT

This sample demonstrates how to specify a new style and template for the Zoombox control by adding the style to the application-level resource dictionary. The style included in this sample behaves the same as the default style, but it does not have a dependency on EvalBinding. As such, it can be used with the Windows Client Profile (which does not contain the JScript.NET assembly that is required by EvalBinding).

Timeline Panel - Appointments

kurt.brockett — Mon, 18 Aug 2008 04:59:32 GMT

created by Jim Mangaly

This is a quick sample for Timeline Panel that shows appointments, meetings and call scheduled on a daily basis. This sample demonstrates the following:

Having different appointment types on the Timeline Panel
An indicator (a horizontal line) that shows the duration of each appointment
The template (visual) can be changed to give it any look you desire.

This sample was created at the request of a user looking to emulate the Janus .NET Timeline Control: http://janusys.com/janus/library/CustomPages/timelinenet.htm

TimelinePanel Data Binding Date Sample

kurt.brockett — Wed, 25 Jun 2008 05:52:54 GMT

By Jim Mangaly

This sample is in response to a question from one of customers around data binding the BeginDate and EndDate properties in TimelinePanel. You can view the complete forum topic here for additional background on the sample.

http://blendables.com/forums/t/236.aspx

Carousel3D - InteractiveFrontItem

kurt.brockett — Sun, 27 Apr 2008 23:52:56 GMT

by John Zolezzi

This example shows how to create an interactive item for only the selected item in the Carousel3D. Carousel3D class has a property called ItemModelGenerator which allows you to specify a custom model generator for each item from the ItemsSource. Inside our custom model generator we create an InteractiveVisual3D object (found in 3DTools) to allow for the 2D control interactivity on a 3D model.

We now have 2D control interactivity for all the items but we only want it for the selected item in the carousel. To make it easy for designers to control when to show and hide the interactive content, we use attached properties.

Download the sample for the complete right up and sample code.

Requires Blendables Essentials Mix.

TimelinePanel - Pictures in a Year

kurt.brockett — Thu, 03 Jan 2008 23:17:21 GMT

This sample demonstrates the use of TimelinePanel to layout a set of pictures along a year long timeline. Each of the photos has a date tag associated with it which allows for the panel to automatically lay it out.

*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 trial.

Carousel3D Image Carousel Sample

josh.wagoner — Tue, 21 Aug 2007 06:12:52 GMT

Carousel3D sample displaying images with a continual spin animation.

DragAndDrop - Custom Items Panel

kurt.brockett — Thu, 05 Jul 2007 16:11:05 GMT

This is a simple example of how to use the DragAndDrop control to enable drag and drop functionality between 2 panels. There is a set of images which can be dragged between the two panels. To run this sample simply load the solution in Blend or VS and build the project.

Zoombox - Slider Zoom

kurt.brockett — Fri, 22 Jun 2007 04:44:08 GMT

Sample created by Jim Mangaly

This sample demonstrates how you can change the control template of the Zoombox control to give it a different look. The control template that is used in this sample uses a slider to control the scale property instead of using a TextBox which is the default style of the Zoombox.

Pie - 3 different flavors

kurt.brockett — Fri, 08 Jun 2007 22:04:41 GMT

We have 3 different samples included in Pie.zip.

1. ProgressbarPie - Utilizes Pie to simulate progress tracking from 0 - 100% on a circle.

2. PieWinScenario1 - Splits a pie into 3 slices. Demonstrates how to use databinding to dynamically set start/end angles for individual slices.

3. PieSampleGraph - Utilizes two instances of the Pie control to show a typical pie graph where one slie is exploded out to show emphasis.

For complete list of all properties used in Pie check out the documentation available here: http://blendables.com/files/folders/essentials_documentation/entry97.aspx

ChromelessWindow - 3 Chromeless Windows

kurt.brockett — Fri, 08 Jun 2007 20:39:16 GMT

This sample has 3 seperate windows which show the full functionality of the ChromelessWindow control. The first allows you to see the affects of setting the resize grip areas on a window. Off of this window you can launch two additional windows. One which shows the Aero Glass functionality available and the second shows drag capability enabled by ChromelessWindow.

OSChecker - Simple OS Version Checking

kurt.brockett — Thu, 07 Jun 2007 22:58:14 GMT

This is a pretty straight forward sample which returns the current OS and prints the version to the window. Also be sure to check out the additional scenario of style switching available in the OSChecker documentation here: http://blendables.com/files/folders/essentials_documentation/entry89.aspx

Carousel3D - 3 Samples in 1

kurt.brockett — Wed, 16 May 2007 07:51:23 GMT

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

Carousel3D Samples

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:

DataBoundCarousel.xaml

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.

DataSearcher.xaml

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

SideMenuPanels.xaml

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.

DragAndDrop - 2 Lists

kurt.brockett — Wed, 16 May 2007 07:40:21 GMT

This is a simple example of how to use the DragAndDrop control to enable drag and drop functionality between 2 lists. To run this sample simply load the solution in Blend or VS and build the project.

ElementSnapshot - Bitmap Effects without the performance pain

nathan.dunlap — Tue, 08 May 2007 17:46:24 GMT

This sample demonstrates creating a button template using bitmap effects that would normally force software acceleration. The software acceleration would slow down animation performance. Using ElementSnapshot allows for the use of bitmap effects while still maintaining fast performance.

You can build this application using VisualStudio or Expression Blend.

When you are using Blend you might see rendering errors. This is a known issue. Try hitting F5 to rebuild the app and that might solve the problem.

NumericRangeToObjectConverter - The Old Switcheroo

kurt.brockett — Tue, 08 May 2007 16:56:54 GMT

This sample demonstrates a simple way for a control to do template switching based on the ActualWidth range value of the Window the control is hosted in.

For this sample app to work correctly you must have the blendables Essentials Mix installed.

You can build this application using VisualStudio or Expression Blend.

When the app runs you will see a large blue ellipse. Resize the window to see the blue ellipse switch to a red rectangle.

For detailed instructions on this sample please seen Nathan's post on designerslove.net: http://designerslove.net/?p=80

originally posted by Nathan Dunlap