# Sunday, 18 November 2012

Here are some tips for using Window 8 with a touchscreen that you might not know about.

Moving Tiles On The Start Screen

It's easy to move tiles around using the mouse, just click and drag the icons from where they are on the start screen. But when you try to do it using a touch screen, you might find it a bit harder, sometimes you end up scrolling the screen instead of dragging the tile.

image

What's happening is because if you try to drag a tile directly off it's spot as indicated by the RED arrows, Windows will interpret that as an intent to scroll the screen and you end up scrolling instead of moving the tile. If you want to move the tile via touch, what you need to do is to drag the tile DOWNWARDS first as indicated by the BLUE arrow, once you draw a tile down far enough it'll tear off it's spot in the screen and you can start moving it.

Showing The Keyboard Whenever You Want

The touch keyboard automatically shows up when there's a need for it, do not fret if you need to access the keyboard when there doesn't seem to be anyway for you to do so. Just bring up the Charms Bar, hit Settings then in the lower right corner you'll see a Keyboard icon.

image

Hitting the Keyboard icon, brings up the input selection list and at the bottom of the list is the option Touch keyboard and handwriting panel tapping on this option will immediately bring up the touch keyboard.

Getting access to other keys on the keyboard

The default touch keyboard is a nice finger friendly keyboard consisting of the most commonly used keys.

image

This is enough for most of your typing duties, but for legacy desktop apps this might not be sufficient, for example you don't have access to the ALT key and also the function keys.

You can enable a fuller keyboard by bringing up the Charms Bar -> Settings -> Change PC Settings (it's at the bottom) Then in the PC settings screen, hit General on the left, then scroll down to the Touch Keyboard section on the right and find the setting Make The Standard Keyboard Available and turn it on.

image

Once you turned that setting on you'll now find a new keyboard icon in the change keyboard type button on the touch keyboard (it's the little keyboard icon beside the right arrow key)

image

This will bring up the fuller more cramped touch keyboard.

image

You can toggle between numbers and function keys by hitting the Fn button in the lower left. One thing to note is that if you encounter any instance where the program doesn't seem to respond to the default keyboard, you might want to try it with the fuller keyboard.

Accessing The Even FULLER Keyboard

You'll notice that on the standard touch keyboard, some keys are still missing. Such as the Print Screen key, you still have one more option, bring up the Start Screen and type On Screen Keyboard.

image

This will bring up the legacy on screen keyboard meant for accessibility use.

image

This should solve all your legacy keyboard needs.


Sunday, 18 November 2012 13:30:45 (Malay Peninsula Standard Time, UTC+08:00)  #    Comments [0]  | 
# Wednesday, 10 October 2012

I picked up another Nerf gun to add to my little arsenal, this time it's the Nerf Vortex Vigilon

DSC01549

The main difference about this line of guns is the name VORTEX, Vortex guns don't shoot darts, Vortex guns shoots little foam discs.

DSC01550

The fact that the discs are basically little frisbees shows in their flight performance, they coast and float through the air easily covering the length of a living room, and are quite accurate though at long ranges due to their disc shape it'll start veering off to the side.

The Vigilon is a great gun to pelt play with your children, mainly due to how you load the gun.

DSC01551

It doesn't use an ammo magazine like the bigger guns, but rather a built in compartment. The cool and useful thing about this is that at any point in time while you're chasing your son around firing discs at him you can just open up the door and reload the gun at any thing, very convenient and leads to less downtime while reloading and letting son get an opening for a counter attack.

One thing to note is that the disc do hit a bit harder than darts due to the heavier nature, mommy complained a bit about it but I think it's mostly because immediately after she said "You're hurting WH by shooting him!" I shot her...

If you are interested in a Nerf gun that shoots little foam discs, you can't go wrong with the Vigilon it's not too expensive and holds 5 discs for the thrill of rapid fire. Highly recommended!


Wednesday, 10 October 2012 23:07:44 (Malay Peninsula Standard Time, UTC+08:00)  #    Comments [0]  | 
# Saturday, 08 September 2012

Today's post starts off with an interactive exercise, first download the sample project file and run the program in there. The program looks like this.

screenshot_09082012_111515

When you've run the program, perform a simple exercise, move your mouse in and out of the extra large buttons and note what happens.

The buttons are essentially a ViewBox control containing the XAML which makes up the buttons. The viewbox is then contained inside a grid and scaled to the grid's size.

Code is tied to the PointerEntered and PointerExited events of the Viewbox which basically just changes the background color of the Grid which contains it. If you haven't already run the program and then move the mouse in and out of all of the buttons, do so now.

After running the program and trying out what I mentioned you should have noticed the following problem, given that a button looks like this.

image

  • Button 1 didn't seem to respond to mouse events in the green area
  • Buttons 2 and 3 did.

So what's happening and why the difference in behavior? Let's take a look at Button 1's XAML construction. (Behold my l33t diagraming skills!)

image

Note that it is made up of two vector paths (the Stroke and the [Path])

Now let's take a look at Button 2's XAML construction.

image

Compared to Button 1, there's an extra Ellipse element (the green circle) called hitAssist which is sitting behind the blue circle and 'i' which makes up the button.

By now you should have figured out why Button 1's mouse events where behaving so weirdly, for Button 1 the only elements which have a physical appearance are the circle and the 'i' and that's exactly what triggers the mouse events.

Whereas Button 2 has an additional hitAssist element which fills up the empty gap between the circle and the 'i' and hence the mouse events are triggered as if they're one consecutive element.

"But what about the Grids that are containing the strokes? Wouldn't THEY trigger the mouse entry and exit events?" But they don't! In XAML you'll use a LOT of Grids, Panels and Canvas to layout your elements, you do NOT want every single container to simple fire mouse events!

So how DOES an element qualify for mouse interactivity? Well, I gave a hint just now already. It must have a PHYSICAL appearance. In more easy to understand terms... Make sure the element has a Background Brush assigned to it. The moment a background brush is assigned to an element it will start participating in mouse events because the mouse is able to know if it's running over an element's background brush or not.

So now we know that what we want to do is to fill up gaps in our interactive elements so it makes more sense when users are using them. "But I don't want my sleek outline buttons to have an ugly unadaptable background color!" you say. Well, that's why there's a Button 3 in the sample.

image

Construction wise it looks just like Button 2, except the Ellipse element that's covering the gap is called hitAssistClear and it's can't be seen. "But didn't you just say that only elements which have a physical appearance can have mouse events?" Because it IS still physically there, it just has an Opacity property value of 0%. It's like a really really really clear piece of glass, you can't see it but it's there! Just remember:-

Any element that has a Visibility property value of Visible will participate in mouse events even if Opacity is 0%. Setting Visibility to Collapsed will remove it from mouse events too. And just in case you didn't realize, there's a property on every element called IsHitTestVisible setting that to FALSE will remove it from mouse events too.

And that is what the name of this whole notion of seeing wheter the mouse is over an element or not : Hit Testing

It's something that I feel all XAML developers and designers should know about, yet I don't really see anyone talking about it much. If you think this is not important, what if the button was only this small?

image

Notice the hit area of 'i' is now merely a few pixels, do you want your users to have to pixel hunt in order to click a button? Would YOU like to pixel hunt in order to click a button? This experience gets WORSE if your user is using touch to navigate your app!

ps. The button icon you see was created using the TOTALLY EXCELLENT Metro Studio by SyncFusion. Hmm... I should submit a feature request where they insert a hit test element into their XAML output.


Saturday, 08 September 2012 23:11:41 (Malay Peninsula Standard Time, UTC+08:00)  #    Comments [0]  | 
# Tuesday, 28 August 2012

At some point when you're developing a Windows 8 App you probably realized that if the app is run on a tablet form factor device you'd want to freeze the app orientation in either landscape or portrait display modes like you'd do in a Windows Phone app. So what you do in Visual Studio 2012 is that you double click on the Package.appxmanifest file so you can start tweaking the manifest settings for your app, in particular is the Supported rotations section.

image

Since you want your app to only support landscape mode, you check both landscape modes. Then you decide to test if this works, so you fire up the simulator, and rotate it, but instead of being locked in landscape, your app still rotates to potrait mode.

image

This doesn't work because the simulator doesn't accurately simulate the hardware rotation, as mentioned in the documentation (look under the change device orientation section)

Since that doesn't work, you try to manually rotate your screen using Windows Mobility Center (Windows + X, then select Windows Mobility Center)

image

And STILL your app doesn't stick to landscape orientation!

So what exactly is wrong?

The problem here is that the rotation preference setting of the app is only enforced on a Windows 8 system with a supported HARDWARE ACCELEROMETER.

Which means unless Windows knows how the system is orientated through the means of a supported sensor, it'll never attempt to switch to the app's preferred orientation.

So you shouldn't need to worry that your preferred orientation setting isn't working, it'll work on any hardware that is properly designed for Windows 8. How do you deal with people who manually rotate their screens using Windows Mobility Center then? Well... did you know you could rotate your screen using Windows Mobility Center? Did you even know that there was a Windows Mobility Center? It should be safe to assume that if someone knew enough to manually rotate their screen display, they'll know enough that not all apps run fine in both portrait and landscape orientations. Winking smile


Tuesday, 28 August 2012 22:02:29 (Malay Peninsula Standard Time, UTC+08:00)  #    Comments [0]  | 
# Sunday, 26 August 2012

So I've recently obtained the RTM version of Windows 8 through my MSDN subscription. And therefore I have a few updates to add to my previous Windows To Go post.

The first and most important finding which was discovered by a friend was that the San Disk Cruzer Fit 32GB is actually capable of running Windows 8 at usable speeds.

DSC01320

Performance wise, it's still not going to be as good as a hard disk, but the fact that it's

  • Bloody small so it doesn't get in your way like a hard disk would.
  • Bloody cheap (RM67!)

Makes it a very tempting proposition! So what kind of performance are we talking about? Well... overall reading performance will feel slow, but not unbearably slow during normal usage. And you might encounter some instances where it seems like the system stalls for while when there's heavy traffic going through the USB bus. Also, disk intensive scenarios like when you try to install programs might be a bit slower than usual.

One thing to note is that actual performance still depends a lot on your PC's USB Bus, if that becomes a performance bottleneck you still will get unbearable speeds from the drive.

Speaking of installing programs, another interesting scenario popped up once my friend made his Windows To Go drive. If you installed Windows 8 directly onto the USB drive, it's possible that the OS would regard it as a removable drive, this would cause many programs to refuse to install onto the OS drive. Which is not what you'd want.

Luckily, there is a solution for this. All you need to do is to install Windows 8 onto a VHD that's on the USB drive and boot into it. There are again various guides to do this on the net so just search around for it. I might get around to doing one if people actually ask for it.

Till the next update then!


Sunday, 26 August 2012 15:11:15 (Malay Peninsula Standard Time, UTC+08:00)  #    Comments [0]  |