As you may recall, I announced the upcoming release of the new Gallery Control in a previous post. There, the general features of the control were introduced and a few example screenshots demonstrated the powerful customization capabilities of the control. There was great interest shown in this product, therefore we decided to provide a more detailed overview of what the control is designed to do and describe some of the features in greater detail.
The Gallery control’s main purpose is to display images which are categorized into groups. In other words, the control consists of gallery groups which contain gallery items. Each gallery item is displayed as an image with a title and a description. Here’s an example of the Gallery control containing four groups of images:

By clicking the header of the Gallery control, the filter menu is invoked. This is essentially a context menu that allows the user to select which groups to be displayed:

If you notice from the above screenshots, item captions and description are by default located to the right of the image. Thanks to the Gallery control’s advanced customization features, you have several properties at your disposal which can be used to control the positioning of basic elements with respect to each other. For example, the following screenshot shows the text and description displayed below each image:

If the included properties do not satisfy your layout needs for positioning items, then you can further customize the elements in any way you like using custom templates and structure for each gallery item. If necessary, the template of an item’s border can also be changed.
Gallery group headers can also be easily modified by using a custom DataTemplate.You can see in the following screenshot that additional buttons have been added to the group headers:

If required, you may also hide the headers completely...

Or conditionally hide some and display others…

Furthermore, each item supports a hover animation. Check out the following short clip that shows the animation effect when the cursor is hovered over each item:
In addition to displaying gallery items, the Gallery Control can also be used as an editor. For this purpose, several modes of item selection are supported:
- Multiple – When an item is clicked, its IsSelected property is set to opposite.
- Single – When an item is clicked, its IsSelected property value is set to true. That property is then automatically set to false for all other items (similar to the behavior found in a radio group).
- SingleInGroup – Similar to the Single mode above, however it only functions within a single group.