How to customize the thumbnail control.

[James]

Q: 

We have two requirements in PDFNET Silverlight control as follows

·         Can we change Mouse-Over & Selected List-box item color in Thumbnail control? If yes than can you please guide us how can we change it to grey

·         Can we bind external icons with property visible & hidden, over Thumbnails?  If yes than can you please guide us how

------------------------------------------------------------------

A:

You can customize the ListBoxItem style of Thumbnail control as follows

To change the style, first define a new Style for the ListBoxItem type (in SideWindowControl.xaml UserControl.Resources)

A sample style you can use is here:

<Style x:Key="CustomListBoxItemStyle" TargetType="ListBoxItem">

            <Setter Property="Margin" Value="1"/>

            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

            <Setter Property="VerticalContentAlignment" Value="Top"/>

            <Setter Property="BorderBrush" Value="MidnightBlue"/>

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="TabNavigation" Value="Local"/>

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="ListBoxItem">

                        <Grid Background="{TemplateBinding Background}" Margin="{TemplateBinding Margin}" >

                            <VisualStateManager.VisualStateGroups>

                                <VisualStateGroup x:Name="CommonStates">

                                    <VisualState x:Name="Normal"/>

                                    <VisualState x:Name="MouseOver">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Disabled">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="SelectionStates">

                                    <VisualState x:Name="Unselected"/>

                                    <VisualState x:Name="Selected">

                                        <Storyboard>

                                            <DoubleAnimation Duration="0" To=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>

                                        </Storyboard>

                                    </VisualState>

                                </VisualStateGroup>

                                <VisualStateGroup x:Name="FocusStates">

                                    <VisualState x:Name="Focused">

                                        <Storyboard>

                                            <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">

                                                <DiscreteObjectKeyFrame KeyTime="0">

                                                    <DiscreteObjectKeyFrame.Value>

                                                        <Visibility>Visible</Visibility>

                                                    </DiscreteObjectKeyFrame.Value>

                                                </DiscreteObjectKeyFrame>

                                            </ObjectAnimationUsingKeyFrames>

                                        </Storyboard>

                                    </VisualState>

                                    <VisualState x:Name="Unfocused"/>

                                </VisualStateGroup>

                            </VisualStateManager.VisualStateGroups>

                            <Rectangle x:Name="fillColor" Fill="Gray" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>

                            <Rectangle x:Name="fillColor2" Fill="DarkGray" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>

                            

                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"

         Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>

                            <Image Source="/ReaderControl;component/Resources/note.png" Stretch="None" Margin="0"

                                   VerticalAlignment="Top" HorizontalAlignment="Left" 

                                   Visibility="{Binding Converter={StaticResource ThumbnailConverter}}"

                                   />

                            <Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="2" Visibility="Collapsed" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

        </Style>

You can change the color of the focused item by changing the fillColor elements. You'll see that an image was added as well.

As an example, the visibility is bound and passed through a converter. You can use this to control when you want to show the image.

Since you can define the template, you can change how you want to do the bindings.

Once your style is defined, you'll have to set the style to the ThumbnailsControl in SideWindowContro.xaml.cs:

e.g.

 ThumbnailsControl thumbnailViewer = new ThumbnailsControl()

                {

                    Background = new SolidColorBrush(Colors.White),

                    Foreground = new SolidColorBrush(Colors.Black),

                    ScaleFactor = 1,

                    ListBoxItemStyle = (Style)this.Resources["CustomListBoxItemStyle"],

                };