[TIMOB-24984] Windows: Support XAML style templates

GitHub Issue	n/a
Type	New Feature
Priority	Medium
Status	Closed
Resolution	Fixed
Resolution Date	2017-08-24T13:51:24.000+0000
Affected Version/s	Release 6.1.0
Fix Version/s	Release 6.2.0
Components	Windows
Labels	n/a
Reporter	Kota Iguchi
Assignee	Kota Iguchi
Created	2017-07-20T02:16:58.000+0000
Updated	2017-08-24T15:44:59.000+0000

Description

New way to deal with [XAML style templates](https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/xaml-styles) by directly editing XAML files in order to get much more flexibility. Considering the case where developer wants to add define XAML styles to the controls:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Pink"/>
            <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="Yellow"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
    
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="BorderThickness" Value="2" />
    </Style>

</ResourceDictionary>

We could implement this as new Titanium Button property like Ti.UI.Button.backgroundPointerOver, but I think it won't be a good idea to do so because there should be a lot more other properties supported in XAML in various controls. I would think that we want a new way to deal with [XAML style templates](https://docs.microsoft.com/en-us/windows/uwp/controls-and-patterns/xaml-styles) by directly dealing with XAML format to get much more flexibility. I mean I am thinking of new feature like below. First, define component visual styles in XAML format:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Light">
            <SolidColorBrush x:Key="ButtonBorderBrush" Color="MediumSlateBlue"/>
            <SolidColorBrush x:Key="ButtonBorderBrushPointerOver" Color="Pink"/>
            <SolidColorBrush x:Key="ButtonBorderBrushPressed" Color="Yellow"/>
        </ResourceDictionary>
    </ResourceDictionary.ThemeDictionaries>
    
    <Style x:Key="ButtonStyle" TargetType="Button">
        <Setter Property="BorderThickness" Value="2" />
    </Style>

</ResourceDictionary>

And then apply this style in xaml (Note that the Ti.UI.Windows.createStyle will be the new feature)

var win = Ti.UI.createWindow({ backgroundColor: 'white' });

var button = Ti.UI.createButton({
    title: 'BUTTON'
});

var style = Ti.UI.Windows.createStyle({ source: 'ms-appx:///Styles.xaml' });
style.apply(button, 'ButtonStyle');

win.add(button);
win.open();

By doing this, you are able to define any styles which XAML supports, not only for Buttons but also for all the other components.

Comments

Kota Iguchi 2017-07-25

https://github.com/appcelerator/titanium_mobile_windows/pull/1044
Kota Iguchi 2017-08-07

https://github.com/appcelerator/titanium_mobile_windows/pull/1066
Kota Iguchi 2017-08-21

Moving target to 7.0.0.
Samir Mohammed 2017-08-23

[~kiguchi] Master is merged, waiting for 6_2_X.
Kota Iguchi 2017-08-24

Merged to 6_2_X.
Ewan Harris 2017-08-24

Verified in 6.2.0.v20170824074531

JSON Source