Question

Hi I am writing a windows phone app with C# in VS2010 for WP 7.1

I try to let the user tap on the contentPanel (Grid) then show something or go to another page.

However, I found that it is not working properly.

Here is my code in xaml

<phone:PhoneApplicationPage 
    x:Class="MyApp.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <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="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="page" 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" ManipulationStarted="ContentPanel_ManipulationStarted">
            <TextBlock x:Name="lblTap" Text="Tap to Start" Height="30" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
        </Grid>
    </Grid>
</phone:PhoneApplicationPage>

and in cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace MyApp
{
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        private void ContentPanel_ManipulationStarted(object sender, ManipulationStartedEventArgs e)
        {
            NavigationService.Navigate(new Uri("/secondpage.xaml", UriKind.Relative));
        }
    }
}

it does not work, I can only go to the secondpage by the textblock “Tap to Start”, but not the whole Grid area.

I even try to change NavigationService.Navigate(new Uri("/secondpage.xaml", UriKind.Relative)); in the ContentPanel_ManipulationStarted method to MessageBox.Show("Tap"); but still not working.

I know I may override the OnManipulationStarted method to achieve. But I think it should be done by event handler, do I make something wrong?

Answer 1

A better way is to use another control to fill the grid space and check to Tap gesture (marking the Textblock as IsHitTestVisible=”false”. This way you get the Tap anywhere within the page grid.

    <Grid x:Name="ContentPanel"
          Grid.Row="1"
          Margin="12,0,12,0">
        <Rectangle Tap="ContentPanel_Tap" />

        <TextBlock x:Name="lblTap"
                   HorizontalAlignment="Center"
                   VerticalAlignment="Center"
                   IsHitTestVisible="False"
                   Text="Tap to Start" />
    </Grid>