2017-07-03 67 views
1

我真的不明白爲什麼這個圖像TapGestureRecognizer不點火。圖片TapGestureRecognizer不點火

<?xml version="1.0" encoding="utf-8" ?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="MainMenu"> 

    <ContentPage.Padding> 
     <OnPlatform x:TypeArguments="Thickness" 
       iOS="0, 20, 0, 0" 
       Android="0, 0, 0, 0" 
       WinPhone="0, 0, 0, 0" /> 
    </ContentPage.Padding> 

    <ContentPage.Content> 

     <Grid> 

      <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="0"> 

       <Grid.RowDefinitions> 
        <RowDefinition Height="40"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 

       <BoxView BackgroundColor="AliceBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="5"/> 
       <Image Source="itemIcon1" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" BackgroundColor="Transparent" WidthRequest="30" HeightRequest="30" /> 
       <Label Text = "Cpyname" FontSize="16" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/> 


       <Grid Grid.Row="1"> 

        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width ="200"/> 
          <ColumnDefinition Width ="10"/> 
          <ColumnDefinition Width ="200"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 


         <Grid Grid.Row="0" Grid.ColumnSpan="3"> 
          <StackLayout HeightRequest="80" Orientation="Horizontal"> 
          </StackLayout> 
         </Grid> 



         <StackLayout Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical"> 
          <Image x:Name="ImgRepairSvc" Source="M1.png" HeightRequest="100" WidthRequest="100"/> 
         </StackLayout> 

         <StackLayout Grid.Row="1" Grid.Column="2" WidthRequest="110" Orientation="Vertical"> 
          <Image Source="M2.png" HeightRequest="100" WidthRequest="100"/> 
         </StackLayout> 


        </Grid> 
       </Grid> 

      </Grid> 
     </Grid> 

    </ContentPage.Content> 
</ContentPage> 

下面的代碼:

1) XAML : 

<StackLayout Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical"> 
    <Image x:Name="ImgSvc" Source="M1.png" HeightRequest="100" WidthRequest="100"/> 
</StackLayout> 


2) Code behind the XAML: 

public MainMenu 
{   
    InitializeComponent();    
    SetUp(); 

} 


void SetUp() 
{ 

    ImgSvc.GestureRecognizers.Add(new TapGestureRecognizer() 
    { 
     Command = new Command(TapCallback) 

    }); 

    } 


    private void TapCallback() 
    { 
    DisplayAlert("Tap", "This is image Tap", "Ok"); 

    } 

編譯成功後在模擬器(Droid的),但是當用鼠標點擊圖像,沒有displayAlert。

您的幫助表示讚賞。

感謝

+0

你把斷點放在'TapCallback'裏面,並沒有停下來,或者只是你不能看到警報? –

+0

單擊模擬器中的圖像時,什麼都沒有發生。即使我在TapCallback中設置了斷點。在模擬器上測試時點擊是否與點擊相同? – MilkBottle

+0

請顯示你的佈局的其餘部分,你可能有東西重疊你的形象。給你的元素一個backgroundcolor和/或把InputTransparent屬性設置爲true,你可以在 –

回答

3

我想大多數的這是爲什麼不能正常工作是你使用的所有GridStackLayout控制的混亂結構。你必須用具有Width設爲40。在該列中您要添加一個Grid有其中有200 Width列和Image是110寬的列的網格。你可以看到這個圖片:

enter image description here

當我點擊Image(紅色)當您單擊距離紫紅色有色Grid元素圖像的左側部分TapGestureRecognizer纔會觸發。除了Image的父級之外的所有內容都將不會觸發TapGestureRecognizer

我的建議是清理你的XAML,因爲我無法想象你正在創建一個需要這種複雜性與所有嵌套StackLayoutGrid控件的佈局。

這裏的設置爲的情況下,你想看到自己每一個元素BACKGROUNDCOLOR的代碼。

<ContentPage.Padding> 
     <OnPlatform x:TypeArguments="Thickness" 
       iOS="0, 20, 0, 0" 
       Android="0, 0, 0, 0" 
       WinPhone="0, 0, 0, 0" /> 
    </ContentPage.Padding> 
    <ContentPage.Content> 
     <Grid BackgroundColor="Yellow"> 
      <Grid BackgroundColor="Blue" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="0"> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="40"/> 
        <RowDefinition Height="Auto"/> 
       </Grid.RowDefinitions> 
       <BoxView BackgroundColor="AliceBlue" Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="5"/> 
       <Image BackgroundColor="Olive" Source="itemIcon1" Grid.Row="0" Grid.Column="0" Aspect="AspectFit" WidthRequest="30" HeightRequest="30" /> 
       <Label BackgroundColor="Gray" Text = "Cpyname" FontSize="16" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"/> 

       <Grid Grid.Row="1" BackgroundColor="Teal"> 
        <Grid BackgroundColor="Fuchsia"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="200"/> 
          <ColumnDefinition Width="10"/> 
          <ColumnDefinition Width="200"/> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
          <RowDefinition Height="Auto"/> 
         </Grid.RowDefinitions> 

         <Grid BackgroundColor="Lime" Grid.Row="0" Grid.ColumnSpan="3"> 
          <StackLayout HeightRequest="80" Orientation="Horizontal"> 
          </StackLayout> 
         </Grid> 

         <StackLayout BackgroundColor="Maroon" Grid.Row="1" Grid.Column="0" WidthRequest="110" Orientation="Vertical"> 
          <Image x:Name="ImgRepairSvc" BackgroundColor="Red" Source="M1.png" HeightRequest="100" WidthRequest="100"/> 
         </StackLayout> 

         <StackLayout BackgroundColor="Purple" Grid.Row="1" Grid.Column="2" WidthRequest="110" Orientation="Vertical"> 
          <Image Source="M2.png" HeightRequest="100" WidthRequest="100"/> 
         </StackLayout> 
        </Grid> 
       </Grid> 
      </Grid> 
     </Grid> 
    </ContentPage.Content> 
+0

@Both:史蒂芬傑拉德,謝謝。你的意見是有效的,我清理了佈局,然後嘗試。 – MilkBottle