I have a Windows Phone 7 application and I regularly see "weird" UI glitches that take me AGES to debug. It's a range of issues like controls appearing to have extra margin, scrollbars not appearing, animations looking really glitchy, entire page scrolled down, combobox items offset, etc. etc.
I'm happy to admit it might be me - but how to you debug UI errors like this? I know there's Silverlight Spy for the PC Silverlight Apps. Is there anything like this for Windows Phone 7?
Any debugging tips v much appreciated.
I have found that it is a good idea to start with Windows Phone 7 Design Templates, adopt a version control system right from day one of the project and to edit the XAML, use Expression Blend. The Visual Studio is great for writing code, but, to harness the real power of the tools, Expression Blend is the best to style your application.
HTH,
indyfromoz
Here are some tips:
Many people have issues with the emulator due to their graphics card.
Things like slow animations and ui glitches are very common.
Check that your graphics card is Direct X 10.1 at least and that your Driver
Model is WDDM 1.1
Make sure you have the latest drivers.
Windows 7 has less issues with the emulator than Vista
Make sure you have the latest tools, get the RTM release from the website.
In the RTM release, the frame rate counters are displayed by default in a vertical bar on the left, you should monitor these to check for performance issues
Here are a couple of things which I normally do... none of them are real smart, but sharing nevertheless.
Deploy it after every 2-3 controls that you add and ensure things are correctly laying out.
If by chance it doesn't work the way I am expecting it to, I have a parallel Silverlight 3 project running in which I typically paste the XAML and see if it works fine.
After that, I typically check it out as a Silverlight project since even I am not sure of any tools available for Win Phone 7.
I have favorited this question and I hope someone points us to something more interesting.
There's a lot you can checkout with Blend as Indy suggests. This is really good advice.
Regarding some of your specific issues these aren't necessarily glitches. I'll comment on a couple that stand out.
Extra margin - this and padding are built into the metro controls by design. Again, in blend you can dig into this by retemplating the control and changing properties of objects within the control.
The procedure for this is rclick the control, edit template, edit a copy. Then you can look at the different states and objects and change things as suits. While doing this please keep in mind the App Certification Requirements and UI Design Guidelines.
Regarding scrollbars, these are by design hidden until you start scrolling. You can control their availability with Horizontal/VerticalScrollBarVisibility on relevant controls (or on the ScrollViewer embedded in some controls - again retemplate in blend).
Combobox isn't metro themed so is going to struggle in the fitting in department, but there are posts around where people have done work on this. ListPicker is a better fit imo from the Windows Phone Toolkit released with the RTM tools.
If you can't see any obvious causes for the glitches in your code the first thing I would recommend is to actually test your app on a real device. Somethings - particularly animated objects -don't always look exactly the same when you run them on a device.
I thought I had a animation glitch in one of my apps but it only appears in the emulator. When I run on an actual device I don't see it.
Of course this doesn't help you if you can't get a phone to test it on yet, but before you potentially waste hours trying to debug a problem you might not have I would work on the rest of the app until such time as you can test the app on a real phone.
The same goes for anyone creating animations - don't waste time perfecting animations in the emulator. The timings will almost certainly be different on the actual device, so wait till you have one to test on.
Related
I moved a few of my applications to WINDOWS 10 and one of the issue I noticed - which is not really an issue with functionality but rather the colors. Msgboxes seem to not have the top bar anymore (where TITLE goes) - it's actually there, but it's so light that it's difficult to see where the top bar is and the rest of the msg box. does anyone know how to tweak it so that it looks more defined just like it did when it was run in XP or Win7
The controls implemented from the OS. You need to change properties on the operation system. Maybe this could help:
http://answers.microsoft.com/en-us/windows/forum/windows_10-start/change-application-background-color-window-10/167b133e-62f4-4eae-9425-2b9a6019bded
I have a dev box with Windows 8 + VS2012 Update 2 on top. Ever since I had this system, the XAML designer has been behaving weird (for Win8 and WPF as well): it redraws only every second time.
Meaning that if I place a control, it does not update (the control cannot be seen, but its outline can be, if I hover over it); but if I place another control, or change the zoom level, or do any other action, then it refreshes. When I do a third action, no update; when I do a fourth action, it redraws. And so on, it is 100% repro-able.
Pretty bad for productivity.
I have the latest drivers and updates, I have loads of RAM (16GB) and a discrete Nvidia video card, I restarted umpteen times, the usual fixes do nothing.
A screenshot: http://sdrv.ms/13BJSof
Anyone with similar experience?
OK, I found a solution - my laptop uses nVidia Optimus (it's a Lenovo W520) and that was the source of this error (amongst others, such as being unable to properly "duplicate" my display to a projector). I solved it by simply turning off Optimus in the BIOS and enabling only the Discrete card.
I recently upgraded my system to Windows 7 Professional. Furthermore, I recently upgraded from VB6 to VB.NET and I've been working with forms and control under the new interface. Controls such as text boxes and tab controls are washed out and very difficult to see.
In my attempt to remedy the situation, I personalized my display by unchecking the box under "Windows Color" entitled "Enable transparency" and adjusting the Color Intensity slider all the way to the right. But no matter what I try to do, I still get washed-out form colors.
Is there a setting for adjusting the default form colors? What am I missing?
It seems to me that you have a couple of choices, all of which you probably won't like.
Change your Textbox BorderStyle from Fixed3D to FixedSingle, this will give you a more pronounced border around the textboxes (no such property on comboboxes though). This will also make your textboxes look a lot more 'flat', which you may not want.
Change either the background of your form or the background of your controls, thereby providing a better contrast between the two. Even slight variations on the same color would help.
Purchase (or make your own) custom controls that have built-in style changing abilities. I use the Telerik controls sometimes. They have the ability to let you change the UI Element's styles, including all kinds of colors and different borders and such. The issue with this option is a lot of these custom controls are overly expensive, although you can find decent ones for fairly cheap sometimes (I found a control set once that was pretty nice for $19).
Whatever you decide to do, you have to remember that your form will look different to users that are using different operating systems than what you're developing on. You noticed a big change when you went from (I'm assuming) Windows XP to Windows 7 right? You have to remember to test your application on all operating systems that your application will be expected to run on. You could design it beautifully on Windows 7 and it may look horrible on XP. You may be able to ignore OSs that are older than XP, but for the time being almost 50% of users still use XP (last I checked).
BTW, there is no setting for adjusting the default form colors... this just happens to be how forms look on Windows 7. I found it an adjustment when I went from XP to Win7, but you get used to it. I very rarely make the background of my controls the same color as the background of my form just because of this... oh, and don't go changing your display, you want to see what your users are going to see - otherwise you'll end up with something that only looks good on your computer. :)
I'm working on a project that will use a Surface table to show web browsers that can be manipulated via the multitouch behaviors. I'd like to be able to show a browser at full screen and then resize, move, etc.
I'd also like to be able to launch a new, separate browser windows that can also be manipulated through multitouch.
Any suggestions on controls to look into for this?
Thanks!
This is a non-trivial task. As far as I know, many have tried and put months of effort into it but none of been very successful. Don't even bother trying to get something to work well based on WPF's built in WebBrowser control. Best bet is to start with the SurfaceScatterView control and trying to put a 'Chromium' control inside of it (http://wpfchromium.codeplex.com/). It appears that even this isn't straightforward though: http://wpfchromium.codeplex.com/discussions/244117
If you aren't familiar with Cinch, its an application on Mac App Store that allows you to resize ANY window to half/full screen size if you drag the window to the edge of the screen. Exactly like the functionality in windows 7.
Now my question is, how is it done? I have looked all over cocoa apis looking for notifications/delegate methods for whenever a window is being dragged (ALL windows, not just windows owned by the app from which code is running from) but can't find it. Looked in Core Graphics API...Quartz Display Services....but can't find it.
Any help will be greatly appreciated as I have been looking for the past week....Thanks!
Edit: Resize the window is easy since it can be done through applescript bridge..
Are you developer behind i-Snap or some other Mac App Store clone of Cinch?
I'm the developer behind Cinch, and while I try to maintain an "abundance mentality" which basically says "There's enough out there for everyone", I've been upset by the Mac App Store lowering the barrier for entry to this market which has produced a number of half-backed competitors.
I would be thrilled to see some real innovation around the work I have done, and not just clones looking to make a quick buck.
Anyway, you want to look at the Accessibility APIs. It's a Carbon C API. This is probably your best reference: http://developer.apple.com/library/mac/#samplecode/UIElementInspector/Introduction/Intro.html%23//apple_ref/doc/uid/DTS10000728
I've not used the Cinch app, but if I were to do this I'd expect to be using cocoa events. (Also see here) Specifically the mouse handling events, combined with where the mouse is currently on-screen. They probably set a variable when a window is grabbed and then track the mouse pointer until it hits an edge or until they release the mouse button.
Events are very powerful and provide very low level access to what is happening, but can also be very complex. Good luck!
I'm not sure. Maybe the developers combine apple script and carbon events. You can create carbon events to know when the mouse has been clicked or dragged