Better image resolution on zoom

4 posts, 0 answers
  1. Stanislav
    Stanislav avatar
    2 posts
    Member since:
    Oct 2013

    Posted 31 Oct 2013 Link to this post

    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!
  2. Todor
    Admin
    Todor avatar
    778 posts

    Posted 05 Nov 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
  3. DevCraft banner
  4. Stanislav
    Stanislav avatar
    2 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    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.
  5. Todor
    Admin
    Todor avatar
    778 posts

    Posted 14 Nov 2013 Link to this post

    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
    Have a suggestion or face a problem - you can use the Ideas & Feedback portal to submit ideas, feedback and vote for them.
Back to Top
DevCraft banner