This is a migrated thread and some comments may be shown as answers.

Overlay small Image over PanAndZoomImage

6 Answers 72 Views

SlideView

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Alexander asked on 17 Jul 2013, 09:59 AM

Greeting Guys,

I am trying to display a small Image on a certain position on a PanAndZoomImage. I currently fail on display the small marker relative to the zoomable Image.

The dataTemplate with the small image

<UserControl.Resources>

<DataTemplate x:Name="OverlayTemplate">

<telerikPrimitives:RadTransitionControl>

<telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadTransition>

<telerikPrimitives:RadTransition.ForwardInAnimation>

<telerikCore:RadSlideAnimation StartPoint="0,0" EndPoint="30,50" Duration=""/>

</telerikPrimitives:RadTransition.ForwardInAnimation>

</telerikPrimitives:RadTransition>

</telerikPrimitives:RadTransitionControl.Transition>

<telerikPrimitives:RadTransitionControl.ContentTemplate>

<DataTemplate>

<Image Source="/Images/temp/simpleMarker.png" Stretch="None"/>

</Grid>

</DataTemplate>

</telerikPrimitives:RadTransitionControl.ContentTemplate>

</telerikPrimitives:RadTransitionControl>

</DataTemplate>

</UserControl.Resources

This is my current RadSlideView

<telerikPrimitives:RadSlideView x:Name="radSlideView" ItemsSource="{Binding Path=Maps}" ItemRealizationMode="ViewportItem" IsShowOverlayContentOnTapEnabled="True" OverlayContentTemplate="{StaticResource OverlayTemplate}">

<telerikPrimitives:RadSlideView.ItemTemplate>

<DataTemplate>

<Grid>

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Top"

Text="{Binding Path=Name}"

FontSize="{StaticResource PhoneFontSizeLarge}"/>

<telerikSlideView:PanAndZoomImage Source="Binding Path Picture" ZoomMode="Free">

<telerikSlideView:PanAndZoomImage.BusyIndicatorStyle>

<Style TargetType="telerikPrimitives:RadBusyIndicator">

<Setter Property="IsEnabled" Value="False"/>

</Style>

</telerikSlideView:PanAndZoomImage.BusyIndicatorStyle>

</telerikSlideView:PanAndZoomImage>

</Grid>

</DataTemplate>

</telerikPrimitives:RadSlideView.ItemTemplate>

<telerikPrimitives:RadSlideView.ItemPreviewTemplate>

<DataTemplate>

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="{Binding Path=Name}"

FontSize="{StaticResource PhoneFontSizeLarge}"/>

</DataTemplate>

</telerikPrimitives:RadSlideView.ItemPreviewTemplate>

<telerikPrimitives:RadSlideView.ItemContainerStyle>

<Style TargetType="telerikSlideView:SlideViewItem">

<Setter Property="BusyIndicatorStyle">

<Setter.Value>

<Style TargetType="telerikPrimitives:RadBusyIndicator">

<Setter Property="Visibility" Value="Collapsed" />

</Style>

</Setter.Value>

</Setter>

</Style>

</telerikPrimitives:RadSlideView.ItemContainerStyle>

</telerikPrimitives:RadSlideView>



One other Question: Is there a way to display the Overlay right away and not just when the user taped on the image







Thanks in advance!

//I tried to reply but it did't update somehow so i have put my response in here:

Thank you very much Todor!
You helped me a lot. There is still this one problem, when i overlay the small picture on a certain point on the picture and I zoom scroll, the panandzoom picture shifts but the Marker stays at the relative to the Slide view.
I have got the absolute position where i want to display it and somehow anchor it even if i zoom in and scroll around.
I have experimented with canvas but still got no result that could archive that.

Any response, idea or suggestion is appreciated.

Kind regards,
Alex

6 Answers, 1 is accepted

answered on 19 Jul 2013, 02:04 PM

Hello Alexander,

Thank you for contacting us.

The overlay content is displayed relatively to the whole RadSlideView and depending on the provided template it will be placed in the desired position. For example, if you want it to be displayed 24 pixels away from the left corner you can use the following template for overlay content:

<DataTemplate x:Name="OverlayTemplate">

<Grid>

<Image Margin="24,0" HorizontalAlignment="Left" VerticalAlignment="Center" Source="/Images/temp/simpleMarker.png" Stretch="None"/>

</Grid>

</DataTemplate>

I assume that you want to use some sort of transition when the overlay shows since you have added the transition control to your template. However, RadTransitionControl plays its transitions when its content is changed and in your scenario the content is not changed. The right way to apply this type of transition is to use RadSlideView's OverlayContentDisplayAnimation property. For example, if you want to use RadSlideAnimation here's how you can define it before you set it as a StaticResource in the slide view:

<telerikCore:RadSlideAnimation

x:Name="OverlayContentDisplayAnimation"

StartPoint="0,0"

EndPoint="30,50"

Duration="00:00:0.1"/>

And finally, if you want to display or hide the overlay content manually at some point, you can use the ShowOverlayContent and HideOverlayContent methods. You just need to make sure that the control is loaded first, so that it "knows" about the overlay content:

public MainPage()

{

InitializeComponent();

this.radSlideView.Loaded += this.OnRadSlideView_Loaded;

}

private void OnRadSlideView_Loaded(object sender, RoutedEventArgs e)

{

this.radSlideView.ShowOverlayContent();

}

I hope this information helps.

Regards,
Todor
Telerik

TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for WINDOWS PHONE 7.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>

answered on 30 Jul 2013, 01:16 PM

Dear telerik Team,

I am happy to tell you that today I made a huge step forward. I accomplished to display a small Image over my Map on a certain position. It is possible to zoom in and scroll around and it stays on the set position, but i have still some issues.

At first this is my current code:

Xaml:

<UserControl.Resources>

<telerikCore:RadSlideAnimation x:Name="OverlayContentDisplayAnimation" Duration="00:00:0.2"/>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<telerikSlideView:PanAndZoomImage Name="panAndZoomImage" Source="/Images/temp/GRBCC - Level 1.jpg" MaximumZoom="50" ZoomMode="Free" Grid.Row="2" Tap="panAndZoomImage_Tap" RenderTransformOrigin="0.5,0.5" ManipulationCompleted="panAndZoomImage_ManipulationCompleted" ManipulationStarted="panAndZoomImage_ManipulationStarted" ManipulationDelta="panAndZoomImage_ManipulationDelta"/>

<Image Name="animatedImage" Source="/Images/temp/simpleMarker.png" Stretch="None" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</Grid>

C# code behind:

public partial class Map : PhoneApplicationPage

{

Point ImagePos;

public Map()

{

InitializeComponent();

//this.radSlideView.Loaded += radSlideView_Loaded;

ImagePos.X = 200;

ImagePos.Y = 400;

}

private void panAndZoomImage_Tap(object sender, System.Windows.Input.GestureEventArgs e)

{

setImagePosition(ImagePos.X, ImagePos.Y, 200);

}

private void panAndZoomImage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)

{

setImagePosition(panAndZoomImage.Pan.X + ImagePos.X, panAndZoomImage.Pan.Y + ImagePos.Y, 0);

}

private void panAndZoomImage_ManipulationStarted(object sender, ManipulationStartedEventArgs e)

{

animatedImage.Visibility = System.Windows.Visibility.Collapsed;

}

/// <summary>

/// Sets the Position of the Image with an Slide Animation. Duration in ms

/// </summary>

/// <param name="x"></param>

/// <param name="y"></param>

/// <param name="duration"></param>

private void setImagePosition(double x, double y, long duration)

{

RadSlideAnimation imageSlideAnimation = this.Resources["OverlayContentDisplayAnimation"] as RadSlideAnimation;

imageSlideAnimation.StartPoint = new Point(x, 0);

imageSlideAnimation.EndPoint = new Point(x, y);

imageSlideAnimation.Duration = new System.Windows.Duration(new TimeSpan(duration * 10000));

animatedImage.Visibility = System.Windows.Visibility.Visible;

RadAnimationManager.Play(animatedImage, imageSlideAnimation);

}

private void panAndZoomImage_ManipulationDelta(object sender, ManipulationDeltaEventArgs e)

{

}

Issues in order of priority:

1. Code behind & Slideview

I managed to make this all happen only in LayoutRoot but I was unable to adress the "panAndZoomImage" or the "animatedImage" inside a SlideView.

My current slideView:

<telerikPrimitives:RadSlideView x:Name="radSlideView" ItemsSource="{Binding Path=IMaps}" ItemRealizationMode="ViewportItem">

<telerikPrimitives:RadSlideView.ItemTemplate>

<DataTemplate>

<Grid>

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition Height="*" />

</Grid.RowDefinitions>

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Top"

Text="{Binding Path=Name}"

FontSize="{StaticResource PhoneFontSizeLarge}"/>

<Image Name="animatedImage" Source="/Images/temp/simpleMarker.png" Stretch="None" Visibility="Collapsed" HorizontalAlignment="Left" VerticalAlignment="Top"/>

</Grid>

</DataTemplate>

</telerikPrimitives:RadSlideView.ItemTemplate>

<telerikPrimitives:RadSlideView.ItemPreviewTemplate>

<DataTemplate>

<TextBlock HorizontalAlignment="Center"

VerticalAlignment="Center"

Text="{Binding Path=Name}"

FontSize="{StaticResource PhoneFontSizeLarge}"/>

</DataTemplate>

</telerikPrimitives:RadSlideView.ItemPreviewTemplate>

</telerikPrimitives:RadSlideView>

2. Position of the small Image relative to the Map

Is there any way to start the positioning in the top left corner. I also have the problem that i have the exact position on the map in the reselution of the map I have to calculate this position depending on how much smaller the image is displayed.

I have attached 2 Picture. The first is a sample how a map could look like and the 2nd is a picture of my View where i display the marker on the map inside the Slide View.

3. Update Location during Zoomed in Sliding (least important / nice to have)

Currently i only update the Position when the movement stopped and at the begining i make the mark invisible. Is there an event that triggers when the Pan of the Image is changing. ManipulationDelta didn't trigger that way.

I appreciate any help or suggestion. If you have an idea to any of these points please respond as fast as you can. I want to get as much as possible done until tomorrow, because after my holidays start.

Thank you for your Time,

Regards,
Alex

answered on 02 Aug 2013, 01:11 PM

Hello Alexander,

1) You can try to move the animatedImage out of the Slide View so that you are able to access it in code behind and use the same approach that you have in the first scenario with the LayoutRoot. The only difference is that you will have to access the PanAndZoomImage in a way similar to this:

private void panAndZoomImage_ManipulationCompleted(object sender, ManipulationCompletedEventArgs e)

{

PanAndZoomImage panAndZoomImage = (sender as PanAndZoomImage);

setImagePosition(panAndZoomImage.Pan.X + ImagePos.X, panAndZoomImage.Pan.Y + ImagePos.Y, 0);

}

2) It seems like you haven't attached the images that you are talking about, but I presume that you can make some calculations knowing the resolution and the size of RadSlideView and adjust the position relatively to the full Slide View.

3) The ManipulationDelta event is handled by the PanAndZoomImage and currently there is no similar event that you can use.

Regards,
Todor
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Overlay small Image over PanAndZoomImage

6 Answers, 1 is accepted