AvatarGroup

Use an AvatarGroup to render multiple Avatar controls.

AvatarGroup with image-based avatars and some items overflowed

Presentation

Use the ItemLength property to define the width and height of each Avatar in the group.

By default, each avatar will slightly overlap with the avatar that appears before it. Use the OverlapPercentage property to define the extent of the overlap. The default value is 0.2 for a 20% overlap.

The Orientation property determines if the non-overflowed avatars are arranged horizontally or vertically. The default is Horizontal.

Overflow

Individual Avatar controls can optionally be overflowed when there is not enough room to display them all inline. When overflow is necessary, a button is added at the end of the group that, when clicked, will display the additional items in a popup.

Overflow is set to Popup by default. Set the OverflowKind property to None to disable overflow behavior.

By default, the group will display as many avatars as possible in the space available, but the MaxInlineCount property can be set to limit how many are displayed before overflowing.

The overflow button indicates the number of overflowed items. Use the OverflowStringFormat property to customize how the count is formatted. The default is "+{0}", where {0} is the placeholder for the current value of OverflowedItemCount (e.g., "+9").

The OverflowOrientation property determines if the overflowed avatars are arranged horizontally or vertically, and is configured separately from the Orientation property. The default is Horizontal.

Configuring Avatar Items

The AvatarGroup is an ItemsControl for Avatar controls.

Individual instances of Avatar can be directly defined as the ItemsSource as shown below:

xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...

<shared:AvatarGroup ... >
	<shared:Avatar Description="Han Solo" />
	<shared:Avatar Description="Leia Organa" />
	<shared:Avatar Description="Luke Skywalker" />
	...
</shared:AvatarGroup>

The ItemsSource can also be defined as non-Avatar items. In this scenario, each item is automatically wrapped in an Avatar container with the original item as the DataContext. Each Avatar instance will need to be configured to bind its properties to the underlying DataContext. This can be done using an ItemContainerStyle as shown in the following example where ItemsSource is bound to a collection of view models:

xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...

<shared:AvatarGroup ItemsSource="{Binding SomeUserCollection}" ... >
	<shared:AvatarGroup.ItemContainerStyle>
		<Style TargetType="shared:Avatar" BasedOn="{StaticResource {x:Type shared:Avatar}}">
			<Setter Property="Description" Value="{Binding UserName}" />
			<Setter Property="Content" Value="{Binding ProfileImage}" />
		</Style>
	</shared:AvatarGroup.ItemContainerTheme>
</shared:AvatarGroup>

Working with Large Datasets

The built-in overflow behavior of AvatarGroup is not designed for use with large data sets where the number of overflowed items cannot be reasonably displayed in a popup.

For example, consider a scenario where an open source project wants to display the avatars of contributing users. For some projects, that could be thousands of users that would never display properly in a popup!

One option is to limit the number of items included in the dataset. For example, instead of listing all contributors to the open source project, the dataset could be limited to the top 20 contributors.

Another option is to configure the AvatarGroup to disable built-in overflow support and present an alternate UI. The following example disables overflow and places a custom link next to the control which could be used to display a more appropriate view of all the contributors.

xmlns:shared="http://schemas.actiprosoftware.com/winfx/xaml/shared"
...

<StackPanel Orientation="Horizontal">
	<shared:AvatarGroup OverflowKind="None" ItemsSource="{Binding Contributors}">
		...
	</shared:AvatarGroup>
	<TextBlock><Hyperlink ="{ShowContributorsCommand}">+ 58 contributors</Hyperlink></TextBlock>
</StackPanel>