Thumbnail

In This Topic

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>

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>

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>

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>

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>

Get Product Support