Mouse Point on Landscape Mode - windows-phone-7

Question

I need an image that can follow my finger (mouse) on the screen... the following code works fine on Portrait Mode, but it get's completely mess up on Landscape Mode, has anybody been across to this?
<Image Height="68" HorizontalAlignment="Left" Margin="872,388,0,0" Name="imgStarPoint" Stretch="Fill" VerticalAlignment="Top" Width="54" Source="/GetMousePoint;component/StarT.png" ManipulationCompleted="imgStarPoint_ManipulationCompleted">
<i:Interaction.Behaviors>
<el:MouseDragElementBehavior x:Name="imgStar"/>
</i:Interaction.Behaviors>
</Image>
and code behind:
void Touch_FrameReported(object sender, TouchFrameEventArgs e)
{
var PrimaryPoint = e.GetPrimaryTouchPoint(null);
imgStar.X = PrimaryPoint.Position.X;
imgStar.Y = PrimaryPoint.Position.Y;
txt1.Text = PrimaryPoint.Position.X + "." + PrimaryPoint.Position.Y;
}
Does anybody has a way to set the image on my finger tip on Landscape Mode?

Answer 1

EDIT:
Ok, for some reason I though you were using WP Toolkit's Gesture listener which will report the correct X any Y in each orientation mode. In your case you need to detect which orientation mode you are in and do the necessary adjustments.
It seems like when orientation is in landscape the axis are switched. When in landscape-left mode the X axis is inverted and in landscape-right mode the Y axis is inverted. Following code should fix your problem:
bool _switchAxis;
bool _invertX ;
bool _invertY;
private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e) {
_switchAxis = (e.Orientation | PageOrientation.LandscapeLeft | PageOrientation.LandscapeRight) == (PageOrientation.LandscapeLeft | PageOrientation.LandscapeRight);
_invertX = e.Orientation == PageOrientation.LandscapeLeft;
_invertY = e.Orientation == PageOrientation.LandscapeRight;
}
private void Touch_FrameReported(object sender, System.Windows.Input.TouchFrameEventArgs e) {
var width = Application.Current.Host.Content.ActualWidth;
var height = Application.Current.Host.Content.ActualHeight;
var primaryPoint = e.GetPrimaryTouchPoint(null);
if (_switchAxis) {
if (_invertY) imgStar.X = height - primaryPoint.Position.Y; else imgStar.X = primaryPoint.Position.Y;
if (_invertX) imgStar.Y = width - primaryPoint.Position.X; else imgStar.Y = primaryPoint.Position.X;
} else {
imgStar.X = primaryPoint.Position.X;
imgStar.Y = primaryPoint.Position.Y;
}
}
You need to add OrientationChanged event to your page xaml:
<phone:PhoneApplicationPage
<!-- ... -->
OrientationChanged="PhoneApplicationPage_OrientationChanged"
/>
In Landscape mode, a visible application bar and system tray will mess up X for you.
If you have an application bar, set its mode to minimized
ApplicationBar.Mode = ApplicationBarMode.Minimized
You also need to hide the system tray to avoid manual adjustments on X. Do that on the page Loaded event
Xaml:
<phone:PhoneApplicationPage
<!-- stuff -->
Loaded="PhoneApplicationPage_Loaded"
/>
Code behind:
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e) {
SystemTray.IsVisible = false;
}
Also you would want to deduct image.Width/2 from X and image.Height/2 from Y to make it exactly at the center of your finger tip.
imgStar.X = PrimaryPoint.Position.X - (img.Width/2);
imgStar.Y = PrimaryPoint.Position.Y - (img.Height/2);
That should fix the problem.