SegmentedBar selectedIndexChanged added

apps/tests/testRunner.ts

@@ -80,6 +80,7 @@ allTests["SEARCH-BAR"] = require('./ui/search-bar/search-bar-tests');
 allTests["CONNECTIVITY"] = require("./connectivity-tests");
 allTests["ANIMATION"] = require("./ui/animation/animation-tests");
 allTests["NAVIGATION"] = require("./navigation-tests");
+allTests["SEGMENTED-BAR"] = require("./ui/segmented-bar/segmented-bar-tests");
 
 if (!isRunningOnEmulator()) {
     allTests["LOCATION"] = require("./location-tests");

apps/tests/ui/segmented-bar/segmented-bar-tests.ts

@@ -191,4 +191,33 @@ export var testSettingSelectedIndexLargerThanCountShouldThrow = function () {
             segmentedBar.selectedIndex = 10;
         }, "Setting selectedIndex to a larger number should throw.");
     });
-}
+}
+
+export var testSelectedIndexChangedIsReisedCorrectlyIfSelectedIndexIsSet = function () {
+    var oldIndex;
+    var newIndex;
+    var segmentedBar = _createSegmentedBar();
+
+    segmentedBar.on(segmentedBarModule.SegmentedBar.selectedIndexChangedEvent, (args : segmentedBarModule.SelectedIndexChangedEventData) => {
+        oldIndex = args.oldIndex;
+        newIndex = args.newIndex;
+    });
+
+    segmentedBar.items = _createItems(10);
+    
+    helper.buildUIAndRunTest(segmentedBar, function (views: Array<viewModule.View>) {
+        var segmentedBar = <segmentedBarModule.SegmentedBar>views[0];
+
+        segmentedBar.selectedIndex = 6;
+        TKUnit.assertEqual(oldIndex, 0);
+        TKUnit.assertEqual(newIndex, 6);
+
+        segmentedBar.selectedIndex = 3;
+        TKUnit.assertEqual(oldIndex, 6);
+        TKUnit.assertEqual(newIndex, 3);
+
+        segmentedBar.selectedIndex = 9;
+        TKUnit.assertEqual(oldIndex, 3);
+        TKUnit.assertEqual(newIndex, 9);
+    });
+}

ui/segmented-bar/segmented-bar-common.ts

@@ -76,6 +76,7 @@ export class SegmentedBar extends view.View implements definition.SegmentedBar {
     public static selectedBackgroundColorProperty = new dependencyObservable.Property("selectedBackgroundColor", "SegmentedBar", new proxy.PropertyMetadata(undefined));
     public static selectedIndexProperty = new dependencyObservable.Property("selectedIndex", "SegmentedBar", new proxy.PropertyMetadata(undefined));
     public static itemsProperty = new dependencyObservable.Property("items", "SegmentedBar", new proxy.PropertyMetadata(undefined));
+    public static selectedIndexChangedEvent = "selectedIndexChanged";
 
     public _onBindingContextChanged(oldValue: any, newValue: any) {
         super._onBindingContextChanged(oldValue, newValue);

ui/segmented-bar/segmented-bar.android.ts

@@ -21,6 +21,9 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang
             view.selectedIndex = undefined;
             throw new Error("selectedIndex should be between [0, items.length - 1]");
         }
+
+        var args = { eventName: SegmentedBar.selectedIndexChangedEvent, object: view, oldIndex: data.oldValue, newIndex: data.newValue };
+        view.notify(args);
     }
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged;

ui/segmented-bar/segmented-bar.d.ts

@@ -6,6 +6,7 @@ declare module "ui/segmented-bar" {
     import dependencyObservable = require("ui/core/dependency-observable");
     import color = require("color");
     import bindable = require("ui/core/bindable");
+    import observable = require("data/observable");
 
     /**
      * Represents a SegmentedBar item.
@@ -17,6 +18,21 @@ declare module "ui/segmented-bar" {
         public title: string;
     }
 
+    /**
+     * Defines the data for the SegmentedBar.selectedIndexChanged event.
+     */
+    export interface SelectedIndexChangedEventData extends observable.EventData {
+        /**
+         * The old selected index.
+         */
+        oldIndex: number;
+        
+        /**
+         * The new selected index.
+         */
+        newIndex: number;
+    }
+
     /**
      * Represents a UI SegmentedBar component.
      */
@@ -50,5 +66,23 @@ declare module "ui/segmented-bar" {
          * Gets or sets the items dependency property of the SegmentedBar.
          */
         public static itemsProperty: dependencyObservable.Property;
+
+        /**
+         * String value used when hooking to the selectedIndexChanged event.
+         */
+        public static selectedIndexChangedEvent: string;
+        
+        /**
+         * A basic method signature to hook an event listener (shortcut alias to the addEventListener method).
+         * @param eventNames - String corresponding to events (e.g. "propertyChange"). Optionally could be used more events separated by `,` (e.g. "propertyChange", "change"). 
+         * @param callback - Callback function which will be executed when event is raised.
+         * @param thisArg - An optional parameter which will be used as `this` context for callback execution.
+         */
+        on(eventNames: string, callback: (data: observable.EventData) => void, thisArg?: any);
+
+        /**
+         * Raised when the selected index changes.
+         */
+        on(event: "selectedIndexChanged", callback: (args: SelectedIndexChangedEventData) => void, thisArg?: any);
     }
 }

ui/segmented-bar/segmented-bar.ios.ts

@@ -21,6 +21,9 @@ function onSelectedIndexPropertyChanged(data: dependencyObservable.PropertyChang
             view.selectedIndex = undefined;
             throw new Error("selectedIndex should be between [0, items.length - 1]");
         }
+
+        var args = { eventName: SegmentedBar.selectedIndexChangedEvent, object: view, oldIndex: data.oldValue, newIndex: data.newValue };
+        view.notify(args);
     }
 }
 (<proxy.PropertyMetadata>common.SegmentedBar.selectedIndexProperty.metadata).onSetNativeValue = onSelectedIndexPropertyChanged;