Better image resolution on zoom

[Stanislav]

I've got RadSlideView with PanAndZoomImage as a ItemTemplate.

I want to load better resolution of image on zoom. I've got Image overlay and it appears on tap.
I read some forums and QA's about same issues, but haven't got my opinion about it and need advice.

This is my xaml:

<phone:PhoneApplicationPage.Resources>
    <Style x:Key="BusyIndicatorStyle" TargetType="telerikPrimitives:RadBusyIndicator">
        <Setter Property="IsRunning" Value="True"/>
        <Setter Property="Content" Value=""/>
        <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
        <Setter Property="AnimationStyle" Value="AnimationStyle9"/>
    </Style>

    <DataTemplate x:Name="GalerryItemDataTemplate">
        <telerikPrimitivesSlideView:PanAndZoomImage
            Source="{Binding Source}"
            ZoomMode="Free"
            BusyIndicatorStyle="{StaticResource BusyIndicatorStyle}"
            Zoom="{Binding Path=Zoom, ElementName=GalleryApplicationPage, BindsDirectlyToSource=True, Mode=TwoWay}"
            ManipulationStarted="ImageManipulationStartred"
            ManipulationCompleted="ImageManipulationCompleted"/>
    </DataTemplate>

    <DataTemplate x:Name="GalleryOverlayDataTemplate">
        <Grid Background="#99000000">
            <telerikPrimitives:RadTransitionControl Content="{Binding}">
                <telerikPrimitives:RadTransitionControl.Transition>
                    <telerikPrimitives:RadFadeTransition PlayMode="Simultaneously">
                        <telerikPrimitives:RadFadeTransition.ForwardInAnimation>
                            <telerikCore:RadFadeAnimation StartOpacity="0.5" EndOpacity="1" Duration="00:00:0.2"/>
                        </telerikPrimitives:RadFadeTransition.ForwardInAnimation>
                    </telerikPrimitives:RadFadeTransition>
                </telerikPrimitives:RadTransitionControl.Transition>
                <telerikPrimitives:RadTransitionControl.ContentTemplate>
                    <DataTemplate>
                        <Grid DataContext="{Binding}" VerticalAlignment="Top" Margin="0,20" Width="480" HorizontalAlignment="Left">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Border
                                Background="Black"
                                Opacity="0.5"
                                Grid.Column="1"
                                Grid.ColumnSpan="3"/>
                            <TextBlock
                                Grid.Column="1"
                                Foreground="White"
                                Text="{Binding Index}"
                                Margin="12,6,6,6"/>
                            <TextBlock
                                Grid.Column="2"
                                Foreground="White"
                                Text="{Binding Resources.From, Source={StaticResource LocalizedStrings}}"
                                Margin="0,6,6,6"/>
                            <TextBlock
                                Grid.Column="3"
                                Foreground="White"
                                Text="{Binding TotalPagesCount}"
                                Margin="0,6,12,6"/>
                        </Grid>
                    </DataTemplate>
                </telerikPrimitives:RadTransitionControl.ContentTemplate>
            </telerikPrimitives:RadTransitionControl>
        </Grid>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<Grid x:Name="LayoutRoot" Background="Black">
    <telerikPrimitives:RadSlideView
        x:Name="GallerySlideView"
        Orientation="Horizontal"
        ItemRealizationMode="Default"
        IsLoopingEnabled="False"
        SelectedItem="{Binding SelectedPage, Mode=TwoWay}"
        IsShowOverlayContentOnTapEnabled="true"
        ItemTemplate="{StaticResource GalerryItemDataTemplate}"
        OverlayContentTemplate="{StaticResource GalleryOverlayDataTemplate}"
        ItemsSource="{Binding Gallery}">
    </telerikPrimitives:RadSlideView>
</Grid>

I've got 2 ideas:
1) show overlay with better image resolution on zoom event - don't know how to show it manually on zoom, even I handle zoom event in ImageManipulationStartred
2) or I can change PanAndZoomImage Source in ImageManipulationCompletedmethod - I tried it, but it doesn't work. I loose interaction with image. Also, it jumps to left top corner with default zoom, I think that users won't like it. 
Just test code:

var pictures = GallerySlideView.GetChildObjects<Image>();
foreach (var picture in pictures)
{
    picture.Source = new BitmapImage(new Uri("best_resolution_uri"));
}

It will be great if you can advice me something!

[Todor]

Hi Stanislav,

Thank you for contacting us.

The better approach would be to change the Source of the PanAndZoomImage once the zoom start. You can use the SlideViewStateChanged event to determine when you need to change the image:

private void slideView_SlideViewStateChanged(object sender, Telerik.Windows.Controls.SlideViewStateChangedArgs e)
{
    if (e.OldState == Telerik.Windows.Controls.SlideViewState.PanAndZoom)
    {
        // Load small image
    }
    if (e.NewState == Telerik.Windows.Controls.SlideViewState.PanAndZoom)
    {
        // Load large image
    }
}

In order to find the PanAndZoomImage element, whose Source you need to change, you can use our ElementTreeHelper:

PanAndZoomImage image = ElementTreeHelper.FindVisualDescendant<PanAndZoomImage>(slideView, (descendant) =>
            {
                PanAndZoomImage panAndZoomImage = descendant as PanAndZoomImage;
                if (panAndZoomImage == null)
                {
                     return false;
                }
                BitmapImage bitmapImage = panAndZoomImage.Source as BitmapImage;
                if (bitmapImage == null)
                {
                    return false;
                }
                // You need to know that the slide view contains three PanAndZoomImage-s one for the selected item and one
                // for each of the adjacent items. In order to get the selected you need to compare the UriSource of the
                // bitmapImage and the SelectedItem of the slideView. If they are the same image (keep in mind that when you
                // change the Source of the bitmapImage, you will not change the SelectedItem in the slideView), then return
                // true, and otherwise return false.
            });

I hope this information helps. Let us know if you need further assistance.

Regards,
Todor
Telerik

[Stanislav]

Thanks for your reply!

In some reason I found panAndZoomImage with your way and don't loose an interaction! That's great!

But I've got a second part of the question in that case.
After setting new source for this PanAndZoomImage it jumps to top left corner.

For example: I try to zoom in the middle of the image, new source is set and then I see zoomed top left corner of image with better resolution.

I try to find some property to dertimine my current zoom bounds, but I see nothing in documentation about it.

[Todor]

Hello Stanislav,

You can use PanAndZoomImage's Pan and Zoom properties to determine the current zoom state.

I hope this information helps.
 
Regards,
Todor
Telerik