Inside Amir's and Peter's Flickr Browser sample - Part 2
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
Comments
- Anonymous
February 01, 2006
These are great tutorials but unfortunatly I am not so much a programmer as I am a designer.
So my confusion lies in the fact that I downloaded the source for Smoothmove and WrapPanel Z but have no idea how to get them into my application as they are not a dll.
What do I do? - Anonymous
February 01, 2006
Forget my last comment I just needed to dog and I figured it out.
One problem I do have is that when I cut my grid then add the smoothmove then paste the grid back in, it just overwrites the smoothmove.
What am I missing? - Anonymous
February 01, 2006
Greg, the reason your paste is replacing the SmoothMove is because the SmoothMove is not the activated container.
After you cut the Grid and add the SmoothMove, double-click the SmoothMove in the element tree in the Timeline palette. Now you have made the SmoothMove element the 'activated' element and when you use the paste command the pasted elements will become the child of the SmoothMove.
This detail is subtle in the above post: "[...] then activate the SmoothMove and paste [...]". For a full explanation of what 'activated' means and how to parent controls, see the posts http://blogs.msdn.com/expression/archive/2006/01/29/518986.aspx and http://blogs.msdn.com/expression/archive/2006/02/01/522695.aspx.
- The Expression team