Selected Index

6 posts, 1 answers
  1. Cojocaru
    Cojocaru avatar
    6 posts
    Member since:
    Mar 2012

    Posted 10 Mar 2012 Link to this post

    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.

  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 12 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. DevCraft banner
  4. Cojocaru
    Cojocaru avatar
    6 posts
    Member since:
    Mar 2012

    Posted 14 Mar 2012 Link to this post

    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>
  5. Deyan
    Admin
    Deyan avatar
    2041 posts

    Posted 15 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  6. Cojocaru
    Cojocaru avatar
    6 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2012 Link to this post

    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
  7. Answer
    Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 27 Mar 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top
DevCraft banner