XEyes Application in Windows Store App

Introduction

In this article we show that the XEYES application in Metro Style Application. XEyes is a graphical computer program showing two googly eyes which follow the cursor movements on the screen. Here, we will present an example and in this example we will use the user control, each time when the "PointerMoved" event is fired. The new position of the pupils is determined by calculating the distance between the center of the eye and the pointer and the difference between the X and Y coordinates.

So, we will use the following steps to make this application as below.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> C# -> Windows Metro Style -> Application
• Rename the application:

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 : The MainPage.xaml and MainPage.xaml.cs files are as in the following code.

Code : Let us see the code, which is given below.

<Page

    x:Class="Eyes.BlankPage"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    xmlns:local="using:Eyes"

    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

    mc:Ignorable="d">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundBrush}" Name="LayoutRoot"  Loaded="LayoutRoot_Loaded" PointerMoved="LayoutRoot_PointerMoved" > 

        <local:NoseControl x:Name="Nose" HorizontalAlignment="Left" Margin="224,279,0,0" VerticalAlignment="Top" DoubleTapped="Nose_DoubleTapped"  />

        <local:EyeControl x:Name="EyeLeft" HorizontalAlignment="Left" Height="200" Margin="50,100,0,0" VerticalAlignment="Top" Width="200"/>

        <local:EyeControl x:Name="EyeRight" HorizontalAlignment="Left" Height="200" Margin="300,100,0,0" VerticalAlignment="Top" Width="200"/>

 

    </Grid>

</Page>

 

MainPage.xaml.cs

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

 

// The Blank Page item template is documented at

namespace Eyes

{   

    /// An empty page that can be used on its own or navigated to within a Frame.   

    public sealed partial class BlankPage : Page

    {

        public BlankPage()

        {

            this.InitializeComponent();

        }      

          protected override void OnNavigatedTo(NavigationEventArgs e)

        {

        } 

        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)

        {

            EyeLeft.Initialize();

            EyeRight.Initialize(); 

            EyeLeft.LookAt(Nose.Position());

            EyeRight.LookAt(Nose.Position());

        } 

        private void LayoutRoot_PointerMoved(object sender, Windows.UI.Xaml.Input.PointerEventArgs e)

        {

            Point pos = e.GetCurrentPoint(this).Position; 

            Nose.MoveTo(pos);

            EyeLeft.LookAt(pos);

            EyeRight.LookAt(pos);

        }

         private void Nose_DoubleTapped(object sender, Windows.UI.Xaml.Input.DoubleTappedRoutedEventArgs e)

        {

            App.Current.Exit();

        } 

 

    }

}

 

Step 4 : Move your cursor around.

Change Movement according to the cursor.