ImageGear for Silverlight
Thumbnail Items
Send Feedback
ImageGear for Silverlight User Guide > Using ImageGear for Silverlight > Using ImageGear.Windows.Controls Namespace > Thumbnail Control > Thumbnail Items

Glossary Item Box

The container for each thumbnail item is an ImGearThumbnailListItem. The ImGearThumbnailList control uses an ImGearVirtualizingWrapPanel so that items are only generated when visible. The CacheItemContainers property is true by default so that once an item container is generated, it remains in memory so that the item appears immediately when scrolled back into view. The CacheItemContainers property can be set to false to only cache the thumbnail images and destroy the item containers when items are scrolled out of view; this option uses less memory but there is a small delay when displaying cached thumbnails that are scrolled back into view. During generation the thumbnail image is created internally by resizing the source image to fit within the width and height of the thumbnail item.

The ImGearThumbnailList ReloadItem(int index) method can be used to regenerate a thumbnail image from its source. The ImGearThumbnailList ReloadItems method can be used to regenerate the thumbnail images for the thumbnail items that are currently displayed. If the width or height of the thumbnail items is changed, the thumbnail images will stretch to fit the new size. The ReloadItems method will regenerate the thumbnail images to best fit the new size.

The Caption, PageNumber, PageCount, PageDisplay, and Source properties of an ImGearThumbnailListItem are set when the item is generated, and some of these properties are bound to the properties of elements in the ItemContainerStyle of the ImGearThumbnailList Style as shown in the default style XAML below.

The ImGearThumbnailList control contains the following properties that apply to all thumbnail items: ItemWidth, ItemHeight, ItemBackground, ItemBorderBrush, ItemBorderThickness, ItemCaptionBackground, and ItemCaptionForeground. These properties are also bound to the properties of elements in the XAML below. The ImGearThumbnailList XSpacing and YSpacing properties specify the amount of space between thumbnail items. The ImGearThumbnailList ItemsMargin property specifies the region within the ImGearThumbnailList control where thumbnail items are displayed. The ImGearVisualImage class is used in the XAML below to show the thumbnail items with rounded corners.

You can specify your own ImGearThumbnailList ItemContainerStyle to change the appearance of thumbnail items. For example, if you want to show the PageNumber and PageCount in addition to the Caption, you could copy the XAML below and add TextBlocks that bind to the PageNumber and PageCount properties. You can also specify how an item appears in different states, such as when it is selected or when the mouse is over it.

XAML Example Copy Code
    <Style TargetType="local:ImGearThumbnailList">
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="local:ImGearThumbnailListItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="local:ImGearThumbnailListItem">
                                <Grid Background="{TemplateBinding Background}">
                                <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal" />
                                            <VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="itemBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FFBB00" Duration="0" />
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                        <VisualStateGroup x:Name="SelectionStates">
                                            <VisualState x:Name="Unselected" />
                                            <VisualState x:Name="Selected">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="itemGrid" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="#FFBB00" Duration="0" />
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <Border Name="itemBorder" CornerRadius="10">
                                        <local:ImGearBindingHelper.Binding>
                                            <local:ImGearBindingList>
                                                <local:ImGearRelativeSourceBinding TargetProperty="Width" Path="ItemWidth" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                <local:ImGearRelativeSourceBinding TargetProperty="Height" Path="ItemHeight" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                <local:ImGearRelativeSourceBinding TargetProperty="BorderBrush" Path="ItemBorderBrush" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                <local:ImGearRelativeSourceBinding TargetProperty="BorderThickness" Path="ItemBorderThickness" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                            </local:ImGearBindingList>
                                        </local:ImGearBindingHelper.Binding>
                                        <Grid>
                                            <Border x:Name="mask" CornerRadius="8">
                                                <local:ImGearBindingHelper.Binding>
                                                    <local:ImGearRelativeSourceBinding Path="ItemBackground" TargetProperty="Background" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                </local:ImGearBindingHelper.Binding>
                                            </Border>
                                            <local:ImGearVisualImage x:Name="visualImage" Visual="{Binding ElementName=mask}" ImageBrush="{Binding ElementName=brush}"/>
                                            <Grid Name="itemGrid">
                                                <Grid.RowDefinitions>
                                                    <RowDefinition Height="*" />
                                                    <RowDefinition Height="Auto" />
                                                </Grid.RowDefinitions>
                                                <Grid.OpacityMask>
                                                    <ImageBrush x:Name="brush"/>
                                                </Grid.OpacityMask>
                                                <local:ImGearBindingHelper.Binding>
                                                    <local:ImGearRelativeSourceBinding Path="ItemBackground" TargetProperty="Background" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                </local:ImGearBindingHelper.Binding>
                                                <local:PageView UpdateMode="Automatic" Grid.Row="0" PageViewContextMenu="{x:Null}" Margin="5,5,5,0">
                                                    <local:ImGearBindingHelper.Binding>
                                                        <local:ImGearRelativeSourceBinding TargetProperty="Display" Path="PageDisplay" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" BindingMode="OneWay" />
                                                    </local:ImGearBindingHelper.Binding>
                                                </local:PageView>
                                                <Grid Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Bottom">
                                                    <local:ImGearBindingHelper.Binding>
                                                        <local:ImGearRelativeSourceBinding TargetProperty="Background" Path="ItemCaptionBackground" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                    </local:ImGearBindingHelper.Binding>
                                                    <TextBlock HorizontalAlignment="Center" TextWrapping="NoWrap">
                                                        <local:ImGearBindingHelper.Binding>
                                                            <local:ImGearBindingList>
                                                                <local:ImGearRelativeSourceBinding Path="FontSize" TargetProperty="FontSize" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="FontFamily" TargetProperty="FontFamily" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="FontSource" TargetProperty="FontSource" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="FontStretch" TargetProperty="FontStretch" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="FontStyle" TargetProperty="FontStyle" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="FontWeight" TargetProperty="FontWeight" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="Caption" TargetProperty="Text" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                                <local:ImGearRelativeSourceBinding Path="ItemCaptionForeground" TargetProperty="Foreground" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailList" />
                                                                <local:ImGearRelativeSourceBinding Path="CaptionVisibility" TargetProperty="Visibility" RelativeMode="FindAncestor" AncestorType="ImageGear.Windows.Controls.ImGearThumbnailListItem" />
                                                            </local:ImGearBindingList>
                                                        </local:ImGearBindingHelper.Binding>
                                                    </TextBlock>
                                                </Grid>
                                            </Grid>
                                        </Grid>
                                    </Border>
                                </Grid>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>
©2013. Accusoft Corporation. All Rights Reserved.