Inside Amir's and Peter's Flickr Browser sample - Part 2

  • Article

The mechanics of the custom classes which provide smarts to the Flickr Browser sample were described in the previous part of this post [1]. Building on that, this post will show how the classes were used in the main Flicker Browser sample [2] application. The principles discussed here are quite general and the intention is that this explanation will help you with your own Expression Interactive Designer projects whether or not you're using custom classes.

Let's begin with how WrapPanelZ is used and what happens when an item is selected in the list box of thumbnails on the left-hand side of the application's UI. The developer (Peter) built all his custom classes into a .NET library named UIWidgets.dll which he supplied to the designer (Amir). The designer added the library to his project (Project > Add Item... ), then drew a ListBox on the artboard ready to customize it. The designer knew, from his Windows Presentation Foundation (WPF) knowledge, that a ListBox displays its items inside what is know as its items panel. By default, the items panel is a VirtualizingStackPanel so it's just a case of replacing that default with the WrapPanelZ. There is more than one way to do this. You can replace the ListBox's entire template (a ControlTemplate) or, easier, you can simply create a new ItemsPanelTemplate and point the ListBox at it. The designer chose the second option and he right-clicked the ListBox and clicked Edit Other Templates > Edit ItemsPanel > Edit a Copy of the Template... then just deleted the VirtualizingStackPanel and double-clicked WrapPanelZ in the UIWidgets library (View > Library). To cause the items to wrap, the designer then made a tiny change to the ListBox's template. Edit Template > Edit a Copy of the Template... then set the Scroller's HorizontalScrollBarVisibility property (View > Properties) to Disabled.

If you're curious enough to look in Scene1.xaml, you'll find that two things have happened. First an ItemsPanelTemplate has been created in resources with the key ItemsPanelTemplate1. Second, the ListBox has its ItemsPanel attribute set to reference this resource.

In a different post we'll talk about how to make the selected item scale up. For now, we need to make use of the SmoothMove control. For this, the designer knew that he had to edit the ListBox's item template. This is a DataTemplate which is used to generate a tree of visual elements for each item in the list box. As the ListBox items were bound to data by this stage, there was an existing item template so the designer clicked Edit Other Templates > Edit ItemTemplate > Edit Template. The workflow here for wrapping a SmoothMove around the existing template was to Cut the template, double-click SmoothMove in the UIWidgets library, then activate the SmoothMove and paste the template back in.

Again if you want to know what's happened in Scene1.xaml you'll notice that the resource with the key FlickrPhotoTemplate (a DataTemplate) defines a SmoothMove element inside which is the Grid which was created at the earlier data binding step. The ListBox has its ItemTemplate attribute set to reference this resource.

[1] https://blogs.msdn.com/expression/archive/2006/01/31/521207.aspx
[2] https://blogs.msdn.com/expression/archive/2006/01/24/517010.aspx