Thumbnail Items

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 ItemTemplate 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.

You can specify your own ImGearThumbnailList Style ItemTemplate 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 Triggers, for example to change the appearance when an item is selected or when the mouse is over it.

XAML Example	Copy Code
<Style TargetType="local:ImGearThumbnailList"> <Setter Property="ItemTemplate"> <Setter.Value> <DataTemplate> <Border BorderThickness="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBorderThickness}" BorderBrush="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBorderBrush}" Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemWidth}" Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemHeight}" CornerRadius="10" Name="itemBorder"> <Grid> <Border Name="mask" Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBackground}" CornerRadius="8" /> <Grid x:Name="itemGrid" Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBackground}"> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="Auto" /> </Grid.RowDefinitions> <Grid.OpacityMask> <VisualBrush Visual="{Binding ElementName=mask}"/> </Grid.OpacityMask> <local:PageView UpdateMode="Automatic" Grid.Row="0" Margin="5,5,5,0" Display="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=PageDisplay, Mode=OneWay}" MouseToolSettings="{x:Null}" ContextMenu="{x:Null}" /> <TextBlock TextWrapping="NoWrap" Grid.Row="1" HorizontalAlignment="Center" Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=Caption}" Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemCaptionBackground}" Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemCaptionForeground}" FontSize="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontSize}" FontFamily="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontFamily}" FontStretch="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontStretch}" FontStyle="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontStyle}" FontWeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontWeight}" > <TextBlock.Style> <Style TargetType="TextBlock"> <Style.Triggers> <Trigger Property="Text" Value=""> <Setter Property="Visibility" Value="Collapsed"/> </Trigger> </Style.Triggers> </Style> </TextBlock.Style> </TextBlock> </Grid> </Grid> </Border> <DataTemplate.Triggers> <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsSelected}" Value="True"> <Setter TargetName="itemGrid" Property="Background" Value="{StaticResource ThumbnailSelectedBrush}"/> </DataTrigger> <MultiDataTrigger> <MultiDataTrigger.Conditions> <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsMouseOver}" Value="True"/> <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsSelected}" Value="False"/> </MultiDataTrigger.Conditions> <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ThumbnailSelectedBrush}" /> </MultiDataTrigger> </DataTemplate.Triggers> </DataTemplate> </Setter.Value> </Setter> </Style> ... <SolidColorBrush x:Key="ThumbnailSelectedBrush" Color="#FFBB00" />

XAML Example

Copy Code

    <Style TargetType="local:ImGearThumbnailList">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Border BorderThickness="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBorderThickness}"
                            BorderBrush="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBorderBrush}"
                            Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemWidth}"
                            Height="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemHeight}"
                            CornerRadius="10" Name="itemBorder">
                        <Grid>
                            <Border Name="mask" Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBackground}" CornerRadius="8" />
                            <Grid x:Name="itemGrid" Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemBackground}">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*" />
                                    <RowDefinition Height="Auto" />
                                </Grid.RowDefinitions>
                                <Grid.OpacityMask>
                                    <VisualBrush Visual="{Binding ElementName=mask}"/>
                                </Grid.OpacityMask>
                                <local:PageView UpdateMode="Automatic" Grid.Row="0" Margin="5,5,5,0"
                                            Display="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=PageDisplay, Mode=OneWay}"
                                            MouseToolSettings="{x:Null}" ContextMenu="{x:Null}" />
                                <TextBlock TextWrapping="NoWrap" Grid.Row="1" HorizontalAlignment="Center"
                                            Text="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=Caption}"
                                            Background="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemCaptionBackground}"
                                            Foreground="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=ItemCaptionForeground}"
                                            FontSize="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontSize}"
                                            FontFamily="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontFamily}"
                                            FontStretch="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontStretch}"
                                            FontStyle="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontStyle}"
                                            FontWeight="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailList}}, Path=FontWeight}"
                                            >
                                    <TextBlock.Style>
                                        <Style TargetType="TextBlock">
                                            <Style.Triggers>  
                                                <Trigger Property="Text" Value="">            
                                                    <Setter Property="Visibility" Value="Collapsed"/>        
                                                </Trigger>    
                                            </Style.Triggers>
                                        </Style>
                                    </TextBlock.Style>
                                </TextBlock>         
                            </Grid>
                        </Grid>
                    </Border>
                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsSelected}" Value="True">
                            <Setter TargetName="itemGrid" Property="Background" Value="{StaticResource ThumbnailSelectedBrush}"/>
                        </DataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsMouseOver}" Value="True"/>
                                <Condition Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:ImGearThumbnailListItem}}, Path=IsSelected}" Value="False"/>
                            </MultiDataTrigger.Conditions>
                            <Setter TargetName="itemBorder" Property="BorderBrush" Value="{StaticResource ThumbnailSelectedBrush}" />
                        </MultiDataTrigger>
                    </DataTemplate.Triggers>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
...
<SolidColorBrush x:Key="ThumbnailSelectedBrush" Color="#FFBB00" />