Using Semantic Zoom in Windows Phone - c#

I am trying out released VS 2013 Update 2 and building a sample Universal Application.
As i found out, now Windows Phone supports multitouch by default, and this means new controls that previously weren't available.
I have tried to use simple Semantic zoom test
<SemanticZoom>
<SemanticZoom.ZoomedInView>
<GridView Background="Red" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False"/>
</SemanticZoom.ZoomedInView>
<SemanticZoom.ZoomedOutView>
<GridView Background="Black" ScrollViewer.IsHorizontalScrollChainingEnabled="False" ScrollViewer.IsVerticalScrollChainingEnabled="False"/>
</SemanticZoom.ZoomedOutView>
</SemanticZoom>
How can i make it happen on Windows Phone Emulator? Have tried the multitouch - didn't help

The SemanticZoom-control behaves different on Windows Phone 8.1 (compared to Windows 8). Instead of using multi-touch zoom to switch between the two views, you have to tap on the group header to show the ZoomedOutView. From this view, you can tap on an item to switch to its position in the ZoomedInView.
This behaviour is similar to the application list on Windows Phone. The letters a, b, c etc. are the group headers of the ZoomedInView - when you tap on one of them, you will see a list of all letters (ZoomedOutView).
Semantic"Zoom" might be a missleading name on Windows Phone...

Besides your emulator you have a Bar in wich you will find 'Multi-Touch input':
When you choose it, then three circles will appear - you can change their position (without touching the screen) by right click and move. Left click will invoke multitouch at points you have set (for example it will zoom in/out the photo when you left click on one circle and move it without releasing button).
As I've tested it on Photo taken by Emulator - it is working.

Related

How to setup a shopping based UI for different screen sizes in unity?

I am trying to set up a shopping based UI for different screen sizes.In the canvas settings inside the Inspector I have given a reference resolution of 750 x 1334(Iphone 6)
UI scale mode - Scale with screen size
Match(Width-Height) - 0.5 (Which I change to one can see them in the images)
Somehow I placed the Images and text according to given design.It looks ok in the Iphone resolution.But in Ipad the buttons and text gets mixed up.
Now I change the Match(Width-Height) - 1 .The result is it looks okay but in the ipad view it looks small and there is plenty of space along the two sides.
How to get a matching view/look for all the different screen sizes.
Images are given below
Actually, u don't need to change the match size.
what u actually have to use are anchors. If u use anchors no matter how the size of the screen changes the UI element will resize with it.
see this video from unity officials. It will definitely solve ur issue.
https://www.youtube.com/watch?v=FeheZqu85WI&list=PLX2vGYjWbI0Qp0sD8_RKgbWul7z_eyNAv&index=2
thank you.
U can accept this answer if this solves ur issue.

Splashscreen Rect coordinates returning Screen dimensions on Win 10 Mobile

I am trying to create an extended SplashScreen on my UWP app for which the SplashScreen image coordinates are needed. I am using the following code in App.xaml.cs:
protected override void OnLaunched(LaunchActivatedEventArgs e)
{
if (e.SplashScreen != null)
var SplashLocation = e.SplashScreen.ImageLocation;
//Rest of initialization...
}
However, if I inspect SplashLocation which is a Rect, SplashLocation.Height and SplashLocation.Width return 1280 and 768 which is the dimension of my phone's screen. All other properties are 0.
Is this a known bug in Win 10 Mobile [build 10536]? It works fine on desktop Windows 10.
Actually the issue is that the code given on the MSDN docs is wrong. Have a look at their samples on Github instead. You can find it here:
Splash Screen Sample
Notice the differences between the MSDN docs and the sample:
ExtendedSplash DOES NOT extend page
They use a ScaleFactor for phone
The root element of the XAML is Grid and not page.
I followed their sample (after hours of wondering) and it all worked well. I hope they update their docs to reflect the correct thing.
As a workaround, here's what I did:
Create an Image in XAML inside a Grid (and NOT inside a Canvas as suggested by the msdn Docs)
<Image Name="ExtSplash"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="Assets/Splash/SplashScreen.png"/>
Now, the trick is to make it work on both Mobile (which doesn't give correct Rect coordinates and Desktop (which works as expected)
So, in the loaded event of Page in code behind, I used this code:
if (splash.Top < splash.Left)
ExtSplash.Margin = new Thickness(splash.Top);
else
ExtSplash.Margin = new Thickness(splash.Left);
where Splash = e.SplashScreen.ImageLocation from the OnLaunched event in App.xaml.cs.
This works because, Splash.Top and Splash.Left both return 0 in case of Mobile. So the app just displays the splashscreen fully extended to the width. In case of Desktop, the Image may have some Left or Top Coordinates as it's reported correctly on desktop, where I set them as Margin for the centrally aligned uniform stretched image.
NOTE 1: There may be cases where a slight variation may occur between splashscreen and the ExtendedSplash image. But in my testing it worked fine. It will continue to work even when in a later build MS fixes the issue, so you can take your time to implement the standard method then.
NOTE 2: I had some issues with this logic if scale-400 splashscreen image was provided. For some reason WM10 picks up the highest resolution available. So I just supplied 100, 125, 150 and 200 scale images (skipped the 400)
I ended up ditching the SplashScreen.ImageLocation approach. The Microsoft tutorial does not work on mobile at the time of writing, and the sample is hackish. Instead I used a simple layout like this for the extended splash screen:
<Grid>
<Image x:Name="splashScreenImage" Source="Assets/SplashScreen.png" MaxWidth="620" MaxHeight="300"/>
<!-- plus some other control -->
</Grid>
The magic is to use MaxWidth/MaxHeight.
On mobile the the image will be slightly different positioned vertically (because of status bar and navigation bar I guess), but otherwise correct including size. On desktop the image seems to be exactly positioned and sized as the initial splash.

How to Erase InkCanvas Strokes in Universal Windows Platform (Windows 10) app?

Working with the InkCanvas control using the Universal Windows Platform (UWP) I can't seem to determine the correct method to erase ink strokes when using the InkCanvas - there's an event "StrokeErased" that can be handled.
Ideally the "InkCanvasEditingMode" on "InkCanvas.EditingMode" value to be set to either "InkCanvasEditingMode.EraseByPoint" or "InkCanvasEditingMode.EraseByStroke" would be used but these aren't available in the InkCanvas under Windows 10.
The example https://github.com/Microsoft/Windows-universal-samples/tree/master/simpleink mentions "Erase ink strokes" but the example just handles the StrokeErased event with no actual support for the erasing of them that I can see, what am I missing?
To let the user erase strokes (similar to WPF's InkCanvasEditingMode) set the InkCanvas's InkPresenter's InputProcessingConfiguration.Mode to InkInputProcessingMode.Erasing .
canvas.InkPresenter.InputProcessingConfiguration.Mode = Windows.UI.Input.Inking.InkInputProcessingMode.Erasing;

Lines in a windows store app

Just a simple question: I'm developing a Windows store app and for one function I want to show an intercept theorm. For that (now my question) I need some lines. Do I need to create an Image or is there any other possibility to display simple lines on a XAML-Form (I'm using XAML and C#).
I'm coming from Windows forms and there I used a line control from the Toolbox, but I can't find anything like that in the Toolbox of VS for Windows 8. I also had the idea to use GDI, but I read that it doesn't exist any longer (am I wrong?).
You should draw shape elements, in your XAML (or code-behind).
See MSDN: http://msdn.microsoft.com/en-us/library/windows/apps/hh465055.aspx
you can use like bellow
<Line X1="0" Y1="0" X2="100" Y2="100" Stroke="Red"></Line>
this draws a line from (0,0) to (100,100).
don't forget to use stroke otherwise it won't be displayed.

Application, improve performance of touch events

Basically, I have an application witch is 8000px by 8000px. We can zoom in to view a specific part, example on the radio, or we can zoom out to view everything.
Each part of the car is a control that we can manipulate with fingers, on a dual touch or multitouch monitor.
My problem is: for manipulating a control, for example the Volume button, the user needs to move the mouse exactly like in real life, so with a circular movement.
With the mouse everything is perfect, it responds instantly without any delay. I use the OnMouseLeftButtonDown, OnMouseMove, etc.
With the touch, it seems to be very difficult for the computer to get the touch position and there is a huge lag, especially when the user move 2 different button with 2 fingers at the same time. I use the OnTouchDown, OnTouchMove, etc...
The only difference between the mouse and the touch is when we need to get the position, with the Mouse I use: (e is a MouseButtonEventArgs)
Point currentPosition = e.GetPosition(this);
With the Touch I use: (e is a TouchEventArgs)
Point currentPosition = e.GetTouchPoint(this).Position;
Everything after this is the same.
I don't know if it's because I have too many control in the my application (over 5000 that we can manipulate, but when we zoom in on only 2 control it's the same thing) or because it is really difficult for the computer to get the position from a touch event....
Can someone help me with this? I need to find a solution to eliminate the lag.
I use Visual Studio 2010, Blend 4, .NET 4.0
Windows 7 64-bit
7 Gb RAM
Xeon 2.13 Ghz, 2 core, 8 thread
Screen: ELO technology, in a NEC 2490WUXi2 screen
This seems to be a bug. Take a look at this post.
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/756a2ccf-6cf1-4e4a-a101-30b6f3d9c2c9/#ed51226a-6319-49f8-be45-cf5ff48d56bb
Or
http://www.codeproject.com/Articles/692286/WPF-and-multi-touch
it's hard to say why you have such an issue - may be OnTouchMove is triggered more often than MouseMove and you should create some additional processing to smooth the touch positions data.
I'd try to comment all the code under the
Point currentPosition = e.GetTouchPoint(this).Position;
and look at the performance.
Another approach is to count how much OnTouchMove is triggered.
The problem is the touch device, try another one to see if the lag is still there.

Categories

Resources