How do I add an image over the page thumbnail control and annotations?

[James]

Q:

1] We are trying to  add a clip image over a highlight annotation in Silverlight web viewer as shown in snap 1 PFA .

     We could implemented this in  IOS viewer through stamp annotation , and as there is no stamp annotation in SL web viewer,

     Can you please suggest a way how it can be done ?

2] We are trying to add a clip image over Page Thumbnail as shown in snap 2 PFA,  it looks like it is a inbuilt custom control

     How can we do that?

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

A:

1) Have a look at the Annotations sample project that comes with SilverDox. It has example code showing how to create a custom annotation.

2) To change focus colour, you can customize the ListBoxItem style of Thumbnail control by defining 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"],

                };

To add an icon image, you would use the same ListBoxItemStyle binding technique. 

(ie. define a custom style for ListBoxItem in SideWindowControl.xaml, set the ListBoxItemStyle property in SideWindowControl.xaml.cs when ThumbnailControl is initialized)

I'm assuming you need to programmatically determine which thumbnail pages should show the icon, so I'll explain how to do this.

In the custom defined style CustomListBoxItemStyle, in SideWindowControl.xaml, we added a custom Image element to display an icon.

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

                                   VerticalAlignment="Top" HorizontalAlignment="Left" 

                             Visibility="{Binding Converter={StaticResource ThumbnailItemConverter}, RelativeSource={RelativeSource TemplatedParent}}"

                                   />

What we are trying to do here is bind the visibility of the icon image to the ListBoxItem, and use a converter to calculate the actual visibility.

Note that the RelativeSource TemplateParent refers to the ListBoxItem in this case.

The Tag value of ListBoxItem is set internally by the ThumbnailControl, but it corresponds to the 0-indexed page number.

Here's a sample of a converter, where only odd pages are visible:

namespace PDFTron.SilverDox.Samples.Utility

{

    public class ThumbnailItemConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

          int pageIndex = (int)((ListBoxItem)value).Tag;

            if (pageIndex % 2 == 0)

            {

                return Visibility.Visible;

            }

            return Visibility.Collapsed;

        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

        {

            throw new NotImplementedException();

        }

    }

}

Please see the follow link for more information about Silverlight value converters:

Silverlight Value Converter: http://msdn.microsoft.com/en-us/library/system.windows.data.ivalueconverter(v=vs.95).aspx