Blend: making the HyperBar sample data-bound

  • Article

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.

  • Open the HyperBar sample and remove all the elements above the HyperBar – Distribution, Zoom, Transparency, Reflection, and Function Preview. After we’ve moved the HyperGrid panel into a control template it’ll be less straightforward to bind it to these controls so for the purposes of this walkthrough we’ll just eliminate that problem by removing the controls.
  • Replace the HyperGrid with a SimpleListBox.
  • Add the data.xml file (link below) to your project and create a new XML data source pointing to it.
  • Data bind the SimpleListBox’s ItemsSource to the Images [Array] node of the XML data source. If you have any issues creating a data template at this point then just perform the binding without using the Define Data Template button. Then edit the ItemTemplate later and add an Image whose Source is bound to XPath=@Source.
  • Edit a copy of the control template of the SimpleListBox and replace the StackPanel with a HyperGrid panel (use the Asset Library and the Custom Controls tab).
  • Set the HyperGrid’s IsItemsHost property to true.
  • Edit the ListBox’s ItemContainerStyle (Object > Edit Other Styles > Edit ItemContainerStyle > Edit Copy) and here do two things. First (and you’ll need to drop into XAML view for this) add a Setter whose Property is "Grid.Column" and whose value is "{Binding Mode=OneWay, XPath=@GridColumn}". Second, edit the style’s template and wrap what’s there in a Viewbox (tip: select what’s there, Cut it, add a Viewbox, activate the Viewbox, and Paste).
  • Finally, some code. Edit HyperGrid.cs and find the Update() method and add the following code to it:

 // Clear the ColumnDefinitions and re-add one per child.

this.ColumnDefinitions.Clear();

foreach (UIElement uie in InternalChildren)

{

    this.ColumnDefinitions.Add(new ColumnDefinition());

}

  • Add the following method to the code file:

protected override void OnInitialized(EventArgs e)

{

    base.OnInitialized(e);

    Update(new DependencyPropertyChangedEventArgs());

}

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.