diff --git a/apps/ui-tests-app/mainPage.ts b/apps/ui-tests-app/mainPage.ts
index 19d380815..c2b692d67 100644
--- a/apps/ui-tests-app/mainPage.ts
+++ b/apps/ui-tests-app/mainPage.ts
@@ -86,6 +86,7 @@ examples.set("padding", "padding/padding");
 examples.set("timePicker", "time-picker/time-picker");
 examples.set("gestures", "pages/gestures");
 examples.set("touch", "pages/touch-event");
+examples.set("pan", "pages/pan-event");
 examples.set("handlers", "pages/handlers");
 
 examples.set("animeBG", "animations/background");
diff --git a/apps/ui-tests-app/pages/pan-event.ts b/apps/ui-tests-app/pages/pan-event.ts
new file mode 100644
index 000000000..9b7c04ca9
--- /dev/null
+++ b/apps/ui-tests-app/pages/pan-event.ts
@@ -0,0 +1,23 @@
+import { EventData } from "data/observable";
+import { Page } from "ui/page";
+import { PanGestureEventData } from "ui/gestures";
+import { View } from "ui/core/view";
+import { TextView } from "ui/text-view";
+
+var view: View;
+export function navigatingTo(args: EventData) {
+    var page = <Page>args.object;
+    view = page.getViewById("target");
+}
+
+export function onPan(data: PanGestureEventData) {
+    console.log(`data state:${data.state} [${data.deltaX}, ${data.deltaY}]`);
+    var msg = `data state:${data.state} [${data.deltaX}, ${data.deltaY}]`;
+        (<TextView>view.page.getViewById("output")).text += msg + "\n";
+    view.translateX = data.deltaX;
+    view.translateY = data.deltaY;
+}
+
+export function clear(args) {
+    args.object.page.getViewById("output").text = "";
+}
\ No newline at end of file
diff --git a/apps/ui-tests-app/pages/pan-event.xml b/apps/ui-tests-app/pages/pan-event.xml
new file mode 100644
index 000000000..a2a4eab8f
--- /dev/null
+++ b/apps/ui-tests-app/pages/pan-event.xml
@@ -0,0 +1,7 @@
+<Page navigatingTo="navigatingTo">
+  <GridLayout rows="*, auto, *" >
+    <GridLayout backgroundColor="lightgreen" id="target" automationText="target" width="100" height="100" pan="onPan"/>
+    <Button row="1" text="clear" tap="clear"/>
+    <TextView row="2" text="here" id="output" automationText="output" style="font-size: 10, font-family: monospace;"/>
+  </GridLayout>
+</Page>
\ No newline at end of file