background-image css property added

ui/styling/style.ts

@@ -9,6 +9,7 @@ import stylers = require("ui/styling/stylers");
 import styleProperty = require("ui/styling/style-property");
 import converters = require("ui/styling/converters");
 import enums = require("ui/enums");
+import imageSource = require("image-source");
 
 // key is the property id and value is Dictionary<string, StylePropertyChangedHandler>;
 var _registeredHandlers = {};
@@ -34,6 +35,13 @@ export class Style extends observable.DependencyObservable implements styling.St
         this._setValue(backgroundColorProperty, value, observable.ValueSource.Local);
     }
 
+    get backgroundImage(): string {
+        return this._getValue(backgroundImageProperty);
+    }
+    set backgroundImage(value: string) {
+        this._setValue(backgroundImageProperty, value, observable.ValueSource.Local);
+    }
+
     get fontSize(): number {
         return this._getValue(fontSizeProperty);
     }
@@ -332,6 +340,25 @@ export var colorProperty = new styleProperty.Property("color", "color",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.Inheritable, undefined, undefined, color.Color.equals),
     converters.colorConverter);
 
+export var backgroundImageProperty = new styleProperty.Property("backgroundImage", "background-image",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, onBackgroundImagePropertyChanged));
+
+function onBackgroundImagePropertyChanged(data: observable.PropertyChangeData) {
+    var style = <Style>data.object;
+    var newValue = <string>data.newValue;
+
+    if (imageSource.isFileOrResourcePath(newValue)) {
+        style._setValue(backgroundImageSourceProperty, imageSource.fromFileOrResource(newValue), observable.ValueSource.Local);
+    } else if (types.isString(newValue)) {
+        imageSource.fromUrl(newValue).then(r=> {
+            style._setValue(backgroundImageSourceProperty, r, observable.ValueSource.Local);
+        });
+    }
+}
+
+export var backgroundImageSourceProperty = new styleProperty.Property("backgroundImageSource", "background-image-source",
+    new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, undefined));
+
 export var backgroundColorProperty = new styleProperty.Property("backgroundColor", "background-color",
     new observable.PropertyMetadata(undefined, observable.PropertyMetadataSettings.None, undefined, undefined, color.Color.equals),
     converters.colorConverter);

ui/styling/stylers.android.ts

@@ -7,6 +7,7 @@ import definition = require("ui/styling");
 import stylersCommon = require("ui/styling/stylers-common");
 import enums = require("ui/enums");
 import utils = require("utils/utils");
+import imageSource = require("image-source");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
@@ -35,6 +36,27 @@ export class DefaultStyler implements definition.stylers.Styler {
         return drawable;
     }
 
+    //Background image methods
+    private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
+        (<android.view.View>view.android).setBackgroundDrawable(new android.graphics.drawable.BitmapDrawable(newValue));
+    }
+
+    private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
+        if (types.isDefined(nativeValue)) {
+            (<android.view.View>view.android).setBackgroundDrawable(nativeValue)
+        }
+    }
+
+    private static getNativeBackgroundImageSourceValue(view: view.View): any {
+        var drawable = view.android.getBackground();
+
+        if (drawable instanceof android.graphics.drawable.BitmapDrawable) {
+            return drawable;
+        }
+
+        return undefined;
+    }
+
     //Visibility methods
     private static setVisibilityProperty(view: view.View, newValue: any) {
         var androidValue = (newValue === enums.Visibility.visible) ? android.view.View.VISIBLE : android.view.View.GONE;
@@ -78,6 +100,11 @@ export class DefaultStyler implements definition.stylers.Styler {
             DefaultStyler.resetBackgroundProperty,
             DefaultStyler.getNativeBackgroundValue));
 
+        style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBackgroundImageSourceProperty,
+            DefaultStyler.resetBackgroundImageSourceProperty,
+            DefaultStyler.getNativeBackgroundImageSourceValue));
+
         style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setVisibilityProperty,
             DefaultStyler.resetVisibilityProperty));

ui/styling/stylers.ios.ts

@@ -3,6 +3,7 @@ import style = require("ui/styling/style");
 import definition = require("ui/styling");
 import stylersCommon = require("ui/styling/stylers-common");
 import enums = require("ui/enums");
+import imageSource = require("image-source");
 
 // merge the exports of the common file with the exports of this file
 declare var exports;
@@ -32,6 +33,29 @@ export class DefaultStyler implements definition.stylers.Styler {
         return undefined;
     }
 
+    //Background image methods
+    private static setBackgroundImageSourceProperty(view: view.View, newValue: any) {
+        var nativeView: UIView = <UIView>view._nativeView;
+        if (nativeView) {
+            nativeView.backgroundColor = UIColor.alloc().initWithPatternImage(newValue);
+        }
+    }
+
+    private static resetBackgroundImageSourceProperty(view: view.View, nativeValue: any) {
+        var nativeView: UIView = <UIView>view._nativeView;
+        if (nativeView) {
+            nativeView.backgroundColor = nativeValue;
+        }
+    }
+
+    private static getNativeBackgroundImageSourceValue(view: view.View): any {
+        var nativeView: UIView = <UIView>view._nativeView;
+        if (nativeView) {
+            return nativeView.backgroundColor;
+        }
+        return undefined;
+    }
+
     //Visibility methods
     private static setVisibilityProperty(view: view.View, newValue: any) {
         var nativeView: UIView = <UIView>view._nativeView;
@@ -68,6 +92,11 @@ export class DefaultStyler implements definition.stylers.Styler {
             DefaultStyler.resetBackgroundProperty,
             DefaultStyler.getNativeBackgroundValue));
 
+        style.registerHandler(style.backgroundImageSourceProperty, new stylersCommon.StylePropertyChangedHandler(
+            DefaultStyler.setBackgroundImageSourceProperty,
+            DefaultStyler.resetBackgroundImageSourceProperty,
+            DefaultStyler.getNativeBackgroundImageSourceValue));
+
         style.registerHandler(style.visibilityProperty, new stylersCommon.StylePropertyChangedHandler(
             DefaultStyler.setVisibilityProperty,
             DefaultStyler.resetVisibilityProperty));