React xaml

current/Libraries/Components/View/PlatformViewPropTypes.windows.js

@@ -81,74 +81,78 @@ module.exports = {
   ]),
 
   /**
-   * Mouse move handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse move handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
   onMouseMove: PropTypes.func,
 
   /**
-   * Mouse move (capturing phase) handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse move (capturing phase) handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
-  onMouseMoveCapture: PropTypes.func,  
+  onMouseMoveCapture: PropTypes.func,
 
   /**
-   * Mouse over handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse over handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
   onMouseOver: PropTypes.func,
 
   /**
-   * Mouse over (capturing phase) handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse over (capturing phase) handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
-  onMouseOverCapture: PropTypes.func,  
+  onMouseOverCapture: PropTypes.func,
 
   /**
-   * Mouse out handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse out handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
   onMouseOut: PropTypes.func,
 
   /**
-   * Mouse out (capturing phase) handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse out (capturing phase) handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
-  onMouseOutCapture: PropTypes.func,  
+  onMouseOutCapture: PropTypes.func,
 
   /**
-   * Mouse enter handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse enter handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
 
   onMouseEnter: PropTypes.func,
   /**
-   * Mouse leave handler. 
-   * This is explicitly defined here in order to be able to have an associated "handler detection" property 
+   * Mouse leave handler.
+   * This is explicitly defined here in order to be able to have an associated "handler detection" property
    * on the native side
    *
    * @platform windows
    */
   onMouseLeave: PropTypes.func,
+
+  onPointerEntered: PropTypes.func,
+  onPointerExited: PropTypes.func,
+
 };

vnext/App.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+import React, {Component} from 'react';
+import {AppRegistry} from 'react-native';
+import {StackPanel} from 'react-native-windows';
+import ToDoList from './ToDoList';
+import SampleData from './data/SampleData';
+
+const initialState = {
+  tasks: SampleData.getTasks(),
+};
+
+export default class ToDoListApp extends Component {
+  constructor() {
+    super();
+    this.state = initialState;
+  }
+
+  render() {
+    return (
+      <StackPanel>
+        <ToDoList tasks={this.state.tasks} />
+      </StackPanel>
+    );
+  }
+
+  toggleSwitchChanged(toggleState) {
+    this.setState({dude: toggleState});
+  }
+}
+
+AppRegistry.registerComponent('ToDoListApp', () => ToDoListApp);

vnext/Controls/ToggleSwitch.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+import React, {Component} from 'react';
+import {Grid, Rectangle} from 'react-native-windows';
+
+export default class ToggleSwitch extends Component {
+  constructor() {
+    super();
+    this.state = {
+      on: false,
+      pointerDown: false,
+    };
+  }
+
+  render() {
+    return (
+      <Grid
+        Width="50"
+        Height="20"
+        Background={this.state.on ? 'Blue' : 'Transparent'}
+        BorderBrush={this.state.on ? 'Blue' : 'Black'}
+        BorderThickness="2"
+        CornerRadius="10"
+        PointerPressed={this.onPointerPressed}
+        PointerReleased={this.onPointerReleased}>
+        <Rectangle
+          HorizontalAlignment="Left"
+          Translation={this.state.on ? '33,0,0' : '3,0,0'}
+          Fill={this.state.on ? 'White' : 'Black'}
+          Width="10"
+          Height="10"
+          RadiusX="5"
+          RadiusY="5"
+        />
+      </Grid>
+    );
+  }
+
+  onPointerPressed = () => {
+    this.setState({pointerDown: true});
+  };
+
+  onPointerReleased = () => {
+    if (this.state.pointerDown) {
+      this.updateToggleState(!this.state.on);
+    }
+    this.setState({pointerDown: false});
+  };
+
+  updateToggleState(toggleState) {
+    this.setState({on: toggleState});
+    this.props.onToggleSwitchChanged(toggleState);
+  }
+}

vnext/Playground/Playground.sln

@@ -18,6 +18,7 @@ EndProject
 Global
 	GlobalSection(SharedMSBuildProjectFiles) = preSolution
 		..\Chakra\Chakra.vcxitems*{2d5d43d9-cffc-4c40-b4cd-02efb4e2742b}*SharedItemsImports = 4
+		..\Shared\Shared.vcxitems*{2d5d43d9-cffc-4c40-b4cd-02efb4e2742b}*SharedItemsImports = 4
 		..\Chakra\Chakra.vcxitems*{c38970c0-5fbf-4d69-90d8-cbac225ae895}*SharedItemsImports = 9
 	EndGlobalSection
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -51,50 +52,50 @@ Global
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|ARM.Build.0 = Debug|ARM
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x64.ActiveCfg = Debug|x64
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x64.Build.0 = Debug|x64
-		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x86.ActiveCfg = Debug|x86
-		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x86.Build.0 = Debug|x86
+		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x86.ActiveCfg = Debug|Win32
+		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Debug|x86.Build.0 = Debug|Win32
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|ARM.ActiveCfg = Release|ARM
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|ARM.Build.0 = Release|ARM
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x64.ActiveCfg = Release|x64
 		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x64.Build.0 = Release|x64
-		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x86.ActiveCfg = Release|x86
-		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x86.Build.0 = Release|x86
+		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x86.ActiveCfg = Release|Win32
+		{A990658C-CE31-4BCC-976F-0FC6B1AF693D}.Release|x86.Build.0 = Release|Win32
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|ARM.ActiveCfg = Debug|ARM
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|ARM.Build.0 = Debug|ARM
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x64.ActiveCfg = Debug|x64
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x64.Build.0 = Debug|x64
-		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x86.ActiveCfg = Debug|x86
-		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x86.Build.0 = Debug|x86
+		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x86.ActiveCfg = Debug|Win32
+		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Debug|x86.Build.0 = Debug|Win32
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|ARM.ActiveCfg = Release|ARM
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|ARM.Build.0 = Release|ARM
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x64.ActiveCfg = Release|x64
 		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x64.Build.0 = Release|x64
-		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x86.ActiveCfg = Release|x86
-		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x86.Build.0 = Release|x86
+		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x86.ActiveCfg = Release|Win32
+		{A9D95A91-4DB7-4F72-BEB6-FE8A5C89BFBD}.Release|x86.Build.0 = Release|Win32
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|ARM.ActiveCfg = Debug|ARM
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|ARM.Build.0 = Debug|ARM
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x64.ActiveCfg = Debug|x64
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x64.Build.0 = Debug|x64
-		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x86.ActiveCfg = Debug|x86
-		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x86.Build.0 = Debug|x86
+		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x86.ActiveCfg = Debug|Win32
+		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Debug|x86.Build.0 = Debug|Win32
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|ARM.ActiveCfg = Release|ARM
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|ARM.Build.0 = Release|ARM
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x64.ActiveCfg = Release|x64
 		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x64.Build.0 = Release|x64
-		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x86.ActiveCfg = Release|x86
-		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x86.Build.0 = Release|x86
+		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x86.ActiveCfg = Release|Win32
+		{2D5D43D9-CFFC-4C40-B4CD-02EFB4E2742B}.Release|x86.Build.0 = Release|Win32
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|ARM.ActiveCfg = Debug|ARM
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|ARM.Build.0 = Debug|ARM
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x64.ActiveCfg = Debug|x64
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x64.Build.0 = Debug|x64
-		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x86.ActiveCfg = Debug|x86
-		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x86.Build.0 = Debug|x86
+		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x86.ActiveCfg = Debug|Win32
+		{11C084A3-A57C-4296-A679-CAC17B603144}.Debug|x86.Build.0 = Debug|Win32
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|ARM.ActiveCfg = Release|ARM
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|ARM.Build.0 = Release|ARM
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x64.ActiveCfg = Release|x64
 		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x64.Build.0 = Release|x64
-		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x86.ActiveCfg = Release|x86
-		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x86.Build.0 = Release|x86
+		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x86.ActiveCfg = Release|Win32
+		{11C084A3-A57C-4296-A679-CAC17B603144}.Release|x86.Build.0 = Release|Win32
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE