ImageGear .NET v24.12 - Updated
Thumbnail
User Guide > How to Work with... > Common Operations > Viewing > Viewing with WPF > XAML GUI Controls and Templates > Thumbnail

WPF Thumbnail control is similar to the one provided by ImageGear.Windows.Forms Namespace, but it can be easily configured using the following XAML templates, as described in the following sections:

ImGearThumbnailCtl

The following template defines ImGearThumbnailCtl Class style and consists of ScrollViewer with binding, ScrollBarVisibility dependency property, and ListBox control with another binded property (SelectionMode), items source (ItemsSource="{Binding Path = Thumbnails}") and overridden styles, called ThumbnailListBoxItemStyle for generic items and ThumbnailListBoxStyle for ListBox itself. 

XAML
Copy Code
  <Style TargetType="{x:Type local:ImGearThumbnailCtl}
    <Setter Property="HorizontalAlignment" Value="Stretch"/>
    <Setter Property="VerticalAlignment" Value="Stretch"/>
    <Setter Property="Template
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:ImGearThumbnailCtl}
          <ScrollViewer
            VerticalScrollBarVisibility="{Binding ScrollBarVisibility}"
            HorizontalScrollBarVisibility="Disabled"
            Background ="{Binding Background}
            <ListBox
                IsSynchronizedWithCurrentItem="True"
                Name="ThumbnailListBox"
                SelectedIndex="0"
                SelectionMode="{Binding SelectionMode}"
                Style ="{StaticResource ThumbnailListBoxStyle}"
                ItemsSource="{Binding Path = Thumbnails}"
                ItemContainerStyle =
"{StaticResource ThumbnailListBoxItemStyle}"
                >
            </ListBox>
          </ScrollViewer>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

ThumbnailListBoxStyle

The following template defines a style that determines what type of panel is used in the Thumbnail control. It is a WrapPanel by default. User can overwrite this style in his application to use StackPanel, Panel etc, using given properties (like Margin, Background in current implementation). In this case it is necessary to overwrite main style for thumbnail control to set ListBox Style property to newly created style.

XAML
Copy Code
<Style TargetType="{x:Type ListBox}" x:Key="ThumbnailListBoxStyle
    <Setter Property="Template
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBox}
          <WrapPanel IsItemsHost="True" Orientation="Horizontal"
                     Background="{Binding Background}"
                     Margin="{Binding Margin}"
                     ItemWidth="{Binding CellSize.Width}"
                     ItemHeight="{Binding CellSize.Height}
          </WrapPanel>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

ThumbnailListBoxItemStyle

The following template is used to cancel default selection drawing, because there is a special selection/highlighting logic in the Thumbnail control.

XAML
Copy Code
 <Style TargetType="{x:Type ListBoxItem}" x:Key="ThumbnailListBoxItemStyle
    <Setter Property="Template
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ListBoxItem}" >
          <ContentPresenter
            VerticalAlignment="Top"
            HorizontalAlignment="Left"/>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

ImGearThumbnailItem

The following template is used by framework to show ImGearThumbnailItem Class in any Panel control. This data template is only related to ImGearThumbnailItem Class data type and does not depend on the container type. ImGearThumbnailItem Class data template consists of shadow, border, image and label.

XAML
Copy Code
  <!-- Thumbnail Template -->
  <DataTemplate DataType="{x:Type local:ImGearThumbnailItem}
    <Grid
      VerticalAlignment="Top"
      HorizontalAlignment="Left"
      Margin="0"
      >
      <!-- Drop Shadow -->
      <Border
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Width="{Binding ParentCtl.ItemWidth}"
        Height="{Binding ParentCtl.ItemHeight}"
        CornerRadius="{Binding ParentCtl.BorderWidth}"
        Background="#55000000"
        Visibility="{Binding ParentCtl.ShadowsVisibility}"
        >
      <!-- Drop Shadow shift and blur effect-->
        <Border.RenderTransform>
          <TranslateTransform X="{Binding ParentCtl.ShadowWidth}" Y="{Binding ParentCtl.ShadowWidth}" />
        </Border.RenderTransform>
        <Border.BitmapEffect>
          <BlurBitmapEffect Radius="{Binding Path=ParentCtl.ShadowWidth}" />
        </Border.BitmapEffect>
      </Border>

      <!aBorder (select and highlight)-->
      <Border
        x:Name="IGThumbnailSelectionBorder"
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        BorderThickness="{Binding ParentCtl.BorderWidth}"
        BorderBrush="{Binding CurrentBackground}"
        CornerRadius="{Binding ParentCtl.BorderWidth}"
        Background="White"
        Width="{Binding ParentCtl.ItemWidth}"
        Height="{Binding ParentCtl.ItemHeight}
          <StackPanel Orientation="Vertical" Margin=
"{Binding ParentCtl.Interior}
        <!aThumbnail image-->
            <Image Width="{Binding ParentCtl.ImageSize.Width}"
                   Height="{Binding ParentCtl.ImageSize.Height}"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Source ="{Binding Image}"/>
  <!a-Title-->
            <Label Content="{Binding Title}"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   Foreground ="{Binding CurrentForeground}"
                   Visibility ="{Binding ParentCtl.TitlesVisibility}"
                   >
            </Label>
          </StackPanel>
       </Border>
    </Grid>
</DataTemplate>