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> </Start>
<End>~</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]()