Details

    • Type: New Feature
    • Status: Closed
    • Priority: Medium
    • Resolution: Fixed
    • Affects Version/s: Release 6.1.0
    • Fix Version/s: Release 6.2.0
    • Component/s: Windows
    • Labels:
      None
    • Story Points:
      8
    • Sprint:
      2017 Sprint 17 SDK

      Description

      New way to deal with XAML style templates 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 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:

      Resource/Styles.xaml

      <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)

      app.js

      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.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                kiguchi Kota Iguchi
                Reporter:
                kiguchi Kota Iguchi
                Reviewer:
                Gary Mathews
                Tester:
                Samir Mohammed
              • Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Source Code