Selected Index

[Cojocaru]

Hello, 
I'm trying now slideview. Is there any way to find selected index?

my XAML:

 <telerikPrimitives:RadSlideView x:Name="slideView" ItemsSource="{Binding}" >
            
            <telerikPrimitives:RadSlideView.ItemTemplate>
                <DataTemplate>
                    <telerikPrimitivesSlideView:PanAndZoomImage x:Name="zoomer" Source="{Binding}" ZoomMode="Free" MaximumZoom="10,10" />
                </DataTemplate>
            </telerikPrimitives:RadSlideView.ItemTemplate>
        </telerikPrimitives:RadSlideView>

Code:

 for (int i = 1; i <= answer.data.numberOfPages; i++)
 {
Uri addr = new Uri(String.Format("{0}/04/{1:000}.jpeg", BaseAddress, i), UriKind.Absolute);
Collection.Add(addr);
}
slideView.DataContext = Collection;

Why I need this? :

I'm creating slideview with low quality images. If user decide to zoom I'm downloading a hq image in background and want to replace lq image with hq. Please advice if there is another more elegant way to solution this.

[Kiril Stanoev]

Hello Cojocaru,

Thank you for contacting us. Here is one possible way to achieve the scenario you described. Imagine you have a RadSlideView which is bound to a collection of ImageViewModel object. Each ImageViewModel has low resolution image path (LowResImagePath) and high resolution image path (HighResImagePath) properties. Let's assume that by default the PanAndZoomImage is bound to the low resolution image path as following:

<telerikPrimitives:RadSlideView ItemsSource="{Binding Images}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <slideView:PanAndZoomImage Source="{Binding LowResImagePath}"
                        ManipulationDelta="PanAndZoomImage_ManipulationDelta" />
            </Grid>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>

Then, you need to subscribe to the ManipulationDelta event of the PanAndZoomImage and load the high resolution path as soon as you zoom the image.

private void PanAndZoomImage_ManipulationDelta(object sender, System.Windows.Input.ManipulationDeltaEventArgs e)
{
    // As soon as we zoom, replace the low resolution image with a high resolution image.
    if (e.CumulativeManipulation.Scale.X > 0 && e.CumulativeManipulation.Scale.Y > 0)
    {
        this.viewModel.SelectedItem.LowResImagePath = this.viewModel.SelectedItem.HighResImagePath;
    }
}

Of course, if you don't want to load the high resolution image immediately, you can do it after e.CumulativeManipulation.Scale.X and e.CumulativeManipulation.Scale.Y pass a certain threshold.

Finally, please note that the ImageViewModel implements the INotifyPropertyChanged interface and both HighResImagePath and LowResImagePath properties raise property changed.

Give this approach a try and let me know how it works for you.

All the best,
Kiril Stanoev
the Telerik team

[Cojocaru]

Thanks, 
great answer, but one more problem. If I use this approach double tap stops working on low resolution images ( but works ok after HQ images are loaded). Should I override this also?

<telerikPrimitives:RadSlideView x:Name="slideView" ItemsSource="{Binding Images}" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" IsLoopingEnabled="False">
            <telerikPrimitives:RadSlideView.ItemTemplate>
                <DataTemplate>
                    <telerikPrimitivesSlideView:PanAndZoomImage x:Name="zoomer" Source="{Binding Path=LowQImage}" ZoomMode="Free" MaximumZoom="20,20" ManipulationDelta="zoomer_ManipulationDelta">
                        <telerikPrimitivesSlideView:PanAndZoomImage.BusyIndicatorStyle>
                            <Style TargetType="telerikPrimitives:RadBusyIndicator">
                                <Setter Property="AnimationStyle" Value="AnimationStyle9"/>
                                <Setter Property="InitialDelay" Value="0:0:0"/>
                            </Style>
                        </telerikPrimitivesSlideView:PanAndZoomImage.BusyIndicatorStyle>
                        
                    </telerikPrimitivesSlideView:PanAndZoomImage>
                </DataTemplate>
            </telerikPrimitives:RadSlideView.ItemTemplate>
            
        </telerikPrimitives:RadSlideView>

[Deyan]

Hello Cojocaru,

Thanks for getting back to us.

Could you please clarify what do you mean by saying  "double tap stops working on low resolution image"?

If you mean that once the HQ image is loaded the LQ is not used anymore, I believe this is expected behavior - you can simply start using only the HQ image and zoom over it. The optimization here is that initially you do not need to load it, but simply display a LQ image.

Let me know in case you think I am missing something.

Greetings,
Deyan
the Telerik team

[Cojocaru]

Well I mean if I do in the way it was explained it works perfect, I can zoom in and zoom out image with 2 fingers, but it stops react on double tap.

I've modified a little an example from this forum to reflect my problem. (check Color button) - http://computer-registry.com/id524416.rar
In case I create a simple ObservableCollection<string> and bind to slider and zoomer double tap works perfect, it zoom and unzoom image.

Best regards

[Kiril Stanoev]

Hi Cojocaru,

You can load the high resolution image on double tap by implementing the following approach:

<telerikPrimitives:RadSlideView ItemsSource="{Binding Images}"
        SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
    <telerikPrimitives:RadSlideView.ItemTemplate>
        <DataTemplate>
            <slideView:PanAndZoomImage x:Name="zoomer" Source="{Binding Path=LowResImagePath}"
                    ZoomMode="Free" MaximumZoom="20,20"
                    ManipulationDelta="PanAndZoomImage_ManipulationDelta" Loaded="PanAndZoomImage_Loaded">
                <slideView:PanAndZoomImage.BusyIndicatorStyle>
                    <Style TargetType="telerikPrimitives:RadBusyIndicator">
                        <Setter Property="AnimationStyle" Value="AnimationStyle9" />
                        <Setter Property="InitialDelay" Value="0:0:0" />
                    </Style>
                </slideView:PanAndZoomImage.BusyIndicatorStyle>
            </slideView:PanAndZoomImage>
        </DataTemplate>
    </telerikPrimitives:RadSlideView.ItemTemplate>
</telerikPrimitives:RadSlideView>

private void PanAndZoomImage_Loaded(object sender, RoutedEventArgs e)
{
    this.RemoveHandler(UIElement.DoubleTapEvent, new EventHandler<System.Windows.Input.GestureEventArgs>(PanAndZoomImage_DoubleTap));
    this.AddHandler(UIElement.DoubleTapEvent, new EventHandler<System.Windows.Input.GestureEventArgs>(PanAndZoomImage_DoubleTap), true);
}

private void PanAndZoomImage_DoubleTap(object sender, System.Windows.Input.GestureEventArgs e)
{
    if (this.viewModel.SelectedItem.LowResImagePath != this.viewModel.SelectedItem.HighResImagePath)
    {
        this.viewModel.SelectedItem.LowResImagePath = this.viewModel.SelectedItem.HighResImagePath;
    }
}

For further reference, please take a look at the attached project. If you have additional questions or comments, don't hesitate to contact us again. Greetings,
Kiril Stanoev
the Telerik team