ARTICLE

Example of Touch In Windows Phone 7

Posted by Mahak Gupta Articles | Windows Phone October 06, 2012
In this article I we will discuss the GestureType Tap in WP7.
Reader Level:
Download Files:
 

There are many GestureTypes available, such as: DoubleTap, Hold, FreeDrag, HorizontalDrag etc. In this example we are using the Tap member of the GestureType. Basically Tap means that we have quickly touched and released something. First we look at this in Silverlight and after that in XNA.

In SilverLight: In this program when the user touches a button its foreground color will change. For this use the following procedure.

Step 1: First we click on the File :-> New Project. The following window will appear, here we select this:

windows-phone-application.gif

Step 2: Now we write the following code in the MainPage.xaml Page like this:

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Example Of Silverlight Tap" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Silverlight Tap" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel> 
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBlock x:Name="txt1" Text="My Name is Mahak Gupta"
Padding="0 22"
HorizontalAlignment="Center"
VerticalAlignment="Center" ManipulationStarted="txt1_ManipulationStarted" />
           
<Button Content="Click Me!!!!" Height="72" HorizontalAlignment="Left" Margin="10,10,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
        </Grid>
    </Grid>

Here we take a TextBlock and a Button Control. The output will be:

windows-phone-button-control.gif

Step 3: Now we write the following code in the .cs page :

Random rand1 = new Random();

// Constructor
public MainPage()
{
    InitializeComponent();
}
private void txt1_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
{
    Color myclr = Color.FromArgb(255, (byte)rand1.Next(100),
    (byte)rand1.Next(256),
    (byte)rand1.Next(256));
    txt1.Foreground = new SolidColorBrush(myclr);
}
private void button1_Click(object sender, RoutedEventArgs e)
{
    Color myclr = Color.FromArgb(255, (byte)rand1.Next(100),
    (byte)rand1.Next(256),
    (byte)rand1.Next(256));
    button1.Foreground = new SolidColorBrush(myclr);
}


Here we write the code to change the foreground color of both the controls. After that the output will be:

windows-phone-button-control-color.gif

In XNA: In this program we take two normal text values and when the user touches either of them, its color changes. For this use the following:

Step 1: First we click on the File :-> New Project. The following window will appear; here we select this:

windows-phone-game.gif

Step 2: After that we add a SpriteFont for our program for this we right-click on the Content Part like this:

SpriteFont-in-windows-phone-application.gif

Here we choose the SpriteFont and use the following code in the SpriteFont1.spritefont:

    <FontName>Segoe UI Mono</FontName> 
    <Size>30</Size> 
    <Spacing>0</Spacing> 
    <UseKerning>true</UseKerning> 
    <Style>Regular</Style> 
    <CharacterRegions>
        <CharacterRegion>
            <Start>&#32;</Start>
            <End>&#126;</End>
        </CharacterRegion>
    </CharacterRegions>

Step 3: Now we write the following code in the Game1.cs page:

GraphicsDeviceManager graphics;
SpriteBatch spriteBatch; 
Random rand = new Random();
string text = "Mahak Gupta";
string text1 = "Khyati Zindal";
SpriteFont spritefont1;
Vector2 txtsize1;
Vector2 txtsize;
Vector2 txtpos;
Vector2 txtpos1;
Color txtcolor = Color.Red;
Color txtcolor1 = Color.Plum;
public Game1()
{
    graphics = new GraphicsDeviceManager(this);
    Content.RootDirectory = "Content";

   
// Frame rate is 30 fps by default for Windows Phone.
    TargetElapsedTime = TimeSpan.FromTicks(333333);

   
// Extend battery life under lock.
    InactiveSleepTime = TimeSpan.FromSeconds(1);
}

Here we declare two Text and an instance of SpriteFont and color of the Text. Here Vector2 is used to declare the size and position of the Text.

protected override void LoadContent()
{
   
// Create a new SpriteBatch, which can be used to draw textures.
    spriteBatch = new SpriteBatch(GraphicsDevice);
    spritefont1 = this.Content.Load<SpriteFont>("spritefont1");
    txtsize = spritefont1.MeasureString(text);
    txtsize1 = spritefont1.MeasureString(text1);
    Viewport viewport = this.GraphicsDevice.Viewport;
    txtpos = new Vector2((viewport.Width - txtsize.X) / 2,
    (viewport.Height - txtsize.Y) / 2);
    txtpos1 = new Vector2((viewport.Width - txtsize.X) / 5,
    (viewport.Height - txtsize.Y) / 5);
    TouchPanel.EnabledGestures = GestureType.Tap;
}

LoadContent is used for load all our content. Here we mention the Size, Position font and GestureType (Tap).

protected override void Update(GameTime gameTime)
{
    // Allows the game to exit
    if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    this.Exit();

    // TODO: Add your update logic here
    while (TouchPanel.IsGestureAvailable)
    {
        GestureSample gestureSample = TouchPanel.ReadGesture(); 
        if (gestureSample.GestureType == GestureType.Tap)
        {
            Vector2 touchPosition = gestureSample.Position; 
            if (touchPosition.X >= txtpos.X &&
                touchPosition.X < txtpos.X + txtsize.X &&
                touchPosition.Y >= txtpos.Y &&
                touchPosition.Y < txtpos.Y + txtsize.Y)
            {
                txtcolor = new Color((byte)rand.Next(156),
                (byte)rand.Next(60),
                (byte)rand.Next(100));
            }
            else
            {
                txtcolor = Color.Red; 
            } 
            if (touchPosition.X >= txtpos1.X &&
                touchPosition.X < txtpos1.X + txtsize1.X &&
                touchPosition.Y >= txtpos1.Y &&
                touchPosition.Y < txtpos1.Y + txtsize1.Y)
            {
                txtcolor1 = new Color((byte)rand.Next(156),
                (byte)rand.Next(60),
                (byte)rand.Next(100));
            }
            else
            { 
                txtcolor1 = Color.Plum;
            }
        }
    }
    base.Update(gameTime);
}
protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.Purple);
 
    // TODO: Add your drawing code here
    spriteBatch.Begin();
    spriteBatch.DrawString(spritefont1, text, txtpos, txtcolor);
    spriteBatch.DrawString(spritefont1, text1, txtpos1, txtcolor1);
    spriteBatch.End();
    base.Draw(gameTime);
}

The output will be:

GestureType-Tap-in-WP7.gif

COMMENT USING

Trending up