Migrating iOS applications to Windows 8 : Controlling the appearance of your user interface controls

  • Article
  1. iOS developers typically change the appearance of their controls by leveraging APIs in UIKit controls.
  2. From what I’m noticing, developers are writing code with specific delegates, typically after our load event, such as:
    • didFinishLaunchingWithOptions
  3. They typically change properties like title, add background images, and so on.
  4. While all developers like giving their applications a custom look and feel, guidelines from both Microsoft and Apple warn you not to go too far, because users expect a certain type of look and feel inherent in any given platform.
  5. In later versions of the framework, iOS 5.0 and later, Apple introduced the UIAppearance protocol reference, which gives you access to the appearance proxy for a given class.
    • This allows developers to customize appearance of class instances by sending modification messages to this class proxy.
  6. The canonical example is that if you wish to change the appearance of all the navigation bars in your app, you can just do it in one place.
  7. You use the UIAppearance protocol to get the appearance proxy for a class.
  8. In short, you customize the appearance of instances of a class by sending appearance modification messages to the class’s appearance proxy.
  9. Apple developers can looking the header of the class (and the headers of all the superclasses) to search for any method that has UI_APPEARANCE_SELECTOR next to it. If it does, it supports the use of the UIAppearance proxy. /li>

How Microsoft Manages UI Look and Feel

  1. There are two main techniques used to control the look and feel of Windows 8 applications:
    • Styles
    • Control templates

Controlling Style Visibility

  1. You can control the visibility of styles by defining the scope properly.
  2. There are different places you can store the styles, depending on the scope that you want.
    • Where you define your style determines its visibility within the application.
      • In other words, if the style is used on just one page, you can create a section at the top of  a single XAML file. /li>
  3. Here are the techniques you can use to increase the scope of your style definitions.
    Page Level Scope Define the style within a single UI page. The styles defined here will be visible only in this XAML file.
    Application Level Scope Define the style in App.xaml as a resource dictionary. All controls within a single application can access the resource dictionary and therefore all the styles within that resource dictionary.
    Spanning Multiple Applications Place all your styles in one or more XAML files. You can reuse these XAML files across multiple applications./td>

Styling a TextBlockHere is a basic example that styles a <TextBlock/> control.

Define the Style

<Style x:Key="TitleTextStyle"

      TargetType="TextBlock">

  <Setter Property="FontWeight"

            Value="SemiBold"/>

</Style>
Use the Style

<TextBlock

      Text="Windows 8 SDK Samples"

      Style="{StaticResource TitleTextStyle}"

TextWrapping="Wrap"/>

 
  1. There may come of time when you want even greater control over the visual appearance and behavior of a given control. That’s where control templates come into the picture.
    • Styles can be very useful and changing the appearance of your controls.
      • But they do have limitations.
    • If you want to change the visual structure and visual behavior dramatically of a given control, you can use control templates.
    • The beauty of control templates is that you are changing the visual appearance and behavior, not the underlying core functionality.
    • This means that if you apply a control template to a button control, you can dramatically change the way the control locks, but at the end of the day it’s still a button control, with all the methods, events, and properties that you would expect a button control to have. /li>
    • In summary, a control template is a tree of primitives that are used for displaying the control.

Example of a Control Template What is an example of a control template? Notice the bizarre looking button and the interesting slider. Those were accomplished with control templates. Control templates give you far more control then do ordinary styles. Note that the top control is a button and the bottom control is a slider.

vgiujitd

  1. For example, you may wish to have a button contain rounded corners with a specific border color. You may also wish to have a specific animation style associated with it.
  2. Control templates give you a lot of power over the elements that make up the control
    • You can modify a control template to rearrange, add, or delete the elements (or parts) in the control.
    • For example, you can add a background image or design to a control such as a button. A control template is a property that can be shared among controls and it specifies how the control should visually be rendered.

Additional Resources These should help you get started.

Download all the Windows 8 samples here https://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples
Browse and search through Windows 8 samples here https://code.msdn.microsoft.com/windowsapps
Here’s a specific sample that illustrates many of the features (XAML essential controls sample) https://code.msdn.microsoft.com/windowsapps/Basic-Controls-29318599