The team blog of the Expression Blend and Design
People have been wondering how to do this so I thought I’d write up an explanation.
The HyperBar sample which ships with Blend Beta 1 has a fixed set of eleven images in it. But what if you want to combine the HyperBar effects with the flexibility of binding to data – be it XML data or CLR object data? The solution is to draw out a ListBox and bind your data to that. Then you edit the ListBox’s control template and place a HyperGrid panel in there as the items host. It’s the HyperGrid panel that does all the magic in the HyperBar sample. Here are the steps you’ll need to follow to get this to work, and then links to some files so you can study/copy the code in there.
// Clear the ColumnDefinitions and re-add one per child.
foreach (UIElement uie in InternalChildren)
protected override void OnInitialized(EventArgs e)
Now you’re done. Build and run. If you have any problems then you can study the following files to see if they differ from what you have. One final point is that the image files are still embedded in the project and the data.xaml refers to them as embedded resources. An exercise for the reader is to store these in a folder which the .exe reads at runtime.
To view a sample or tutorial, click on one of thumbnails or links below. Some samples also have supporting
An intriguing sample, the HyperBar demonstrates a bar of icon images scaled according to a hyperbolic-type function of the mouse pointer’s position. This sample demonstrates how to gradually amplify the UI in proportion to the user’s indicated degree