Wednesday, June 27, 2012

Windows 8 Enter on textbox navigates back. WinJS app

Why would this happen? Here is the cause.
  1. The default page adds  “win-backbutton” button to the  header of each page.
  2. The HTML5 button tag by default set to Submit Button
  3. Since we are running in a browser, hitting the enter key “clicks” the first submit button
  4. The navigator class handles the click event of “win-backbutton” and calls nav.back()

How to resolve it? Here is the solution.

<button class="win-backbutton" type="button" disabled></button>

Change the type of the back button  In the header of the secondary page, set the button type to “button” . That's it problem solved

Thursday, May 31, 2012

Set Application Theme in XAML Windows 8

Here in Windows 8 XAML we can set themes and they are:
1. Dark.
2. Light.

By default it is "Dark" and so it wont be declared anywhere to change it to light theme we have to set
RequestedTheme="Light" in App.xaml namespace

Light Theme:

Dark Theme:

In addition to it.

High Contrast setting
In addition to that, there is a user setting "High Contrast" which you can support in your application. Enable this setting by going to Easy of Acces in PC Settings.
Supporting High Contrast is easy using the ThemeDictionaries.
    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <SolidColorBrush x:Key="MyBackgroundBrush" Color="Green"></SolidColorBrush>
        </ResourceDictionary>
        <ResourceDictionary x:Key="HighContrast">
             <SolidColorBrush x:Key="MyBackgroundBrush" Color="Black"></SolidColorBrush>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
In a ThemeDictionary you can define the same key multiple times, one time for each Theme. So you can use different colors when the user has the High Contrast setting enabled.

System Styles
If you want to explore all the system defined styles, you can find them in this directory:
C:\Program Files (x86)\Windows Kits\8.0\Include\winrt\xaml\design
Notice that the system defined styles are also using a ThemeDictionary for differences between Default, Light and HighContrast.

Windows 8- Dark/Light theme is a developer setting
- No accent color
- High contrast is a user setting which your app can support
- Default styles which you can use as a developer