首页 \ 问答 \ 图像TapGestureRecognizer未触发(Image TapGestureRecognizer not firing)

图像TapGestureRecognizer未触发(Image TapGestureRecognizer not firing)

我真的不明白为什么这个图像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");

  }

在Emulator(Droid)上编译成功,但是当使用鼠标单击图像时,没有displayAlert。

感谢您的帮助。

谢谢


I dont really understand why this image TapGestureRecognizer not firing.

<?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>

Here the code:

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");

  }

Compiling is successful on Emulator (Droid), but when use mouse to click the image, there is no displayAlert.

Your help is appreciated.

Thanks


原文:https://stackoverflow.com/questions/44880227
更新时间:2019-12-07 10:26

最满意答案

我认为大多数为什么这不能正常工作是你正在使用的所有GridStackLayout控件的混乱结构。 您有一个网格,其列Width设置为40.在该列中,您添加的Grid具有Width为200的列和Width为110的Image 。 你可以在这张图片中看到它:

在此处输入图像描述

当我单击Image (红色)时, TapGestureRecognizer仅在您单击紫红色的Grid元素内的图像的左侧部分时触发。 外部的所有内容都在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>

I think most of why this is not working correctly is the chaotic structure of all the Grid and StackLayout controls you're using. You have a grid with a column that has a Width set to 40. In that column you're adding a Grid that has a column which has a Width of 200 and an Image that is 110 wide. You can see it in this image:

enter image description here

When I click on the Image (red) the TapGestureRecognizer only triggers when you click the left part of the image that is within the Fuchsia colored Grid element. Everything outside that is being rendered outside the parent of the Image won't trigger the TapGestureRecognizer.

My advice is to clean up your XAML because I can't imagine you're creating a layout that needs this kind of complexity with all the nested StackLayout and Grid controls.

Here's the code with a BackgroundColor set to each element in case you want to see for yourself.

 <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>
2017-07-03

相关文章

更多

最新问答

更多
  • 这个listArray是如何填充的?(How is this listArray populated?)
  • iOS 7上的CTSubscriber(以及如何使用它)是什么?(What's CTSubscriber (and how to use it) on iOS 7?)
  • 手动创建VisualStudio 2012项目文件(Manually creating VisualStudio 2012 project file)
  • 删除不适用于JSP中使用for循环的每个id(Deletion not working for every id using for loop in JSP)
  • 如何从std :: filesystem :: path中删除引号(How to remove quotation marks from std::filesystem::path)
  • 验证多个控制器方法的URL路径(Validate URL path for several controller methods)
  • 如何在datarow []中的列中找到最大值?(How to find max value in a column in a datarow[] ?)
  • 如何使用预定义文本替换来自数据库的部分结果(How do I replace part of result coming from Database with predefined text)
  • Selenium Java注入了新的Javascript函数(Selenium Java inject new Javascript function)
  • 使用.on的多个下拉菜单选择文本仅适用于第一个下拉列表(Multiple Dropdowns Menu Selection text using .on works only on first dropdown)
  • 快速将黄土曲线添加到大型数据集图中的方法(Quick way to add loess curve to large data set graph)
  • FilteringSelect in mvc(FilteringSelect in mvc)
  • 在Delphi XE2中开发Mac或iOS应用程序需要哪些硬件/软件?(What hardware/software is necessary to develop Mac or iOS apps in Delphi XE2?)
  • 在原型的构造函数中初始化属性时获取“未定义”(Getting 'undefined' when a property is initialized in the constructor of a prototype)
  • 通过越狱加载的应用程序的Documents文件夹位置(Location of Documents folder for an app loaded via jailbreak)
  • 在OpenGL中使用可编程和固定管道功能(Using both programmable and fixed pipeline functionality in OpenGL)
  • 将任何用户输入重定向到单独的底层程序(redirect any user input to a separate underlying program)
  • 编辑文本不能正常工作android(Edit texts not working properly android)
  • “user_denied”Facebook应用页面上的Facebook用户区域设置(Facebook user locale on “user_denied” facebook app page)
  • 在大图像中找到小的部分透明图像的坐标(find coordinates of small partially-transparent image within a large image)
  • 我如何在cakephp 3.1中获得完整的相对路径?(How i can get full relative path of image in cakephp 3.1?)
  • 如何保存拖动标记的新本地化?(How to save new localization of dragged marker?)
  • MySQL UPDATE vs INSERT和DELETE(MySQL UPDATE vs INSERT and DELETE)
  • 在执行查询之前,在SQLAlchemy模型中将datetime转换为unix时间戳?(Convert datetime to unix timestamp in SQLAlchemy model before executing query?)
  • OpenCL与OpenGL互操作的优势(Advantage of OpenCL interoperability with OpenGL)
  • 如何解析用点和等分隔的数据然后添加到listview(How to parsing data from delimited with dot and equal then add to listview)
  • 带调试输出的X3解析器段错误(BOOST_SPIRIT_X3_DEBUG)(X3 parser segfaults with debug output (BOOST_SPIRIT_X3_DEBUG))
  • 将文件夹名称添加到fgrep结果(Add folder name to fgrep result)
  • 在MySQL中加载一个表是非常慢的(Loading one table in MySQL is ridiculously slow)
  • 如何将JSON放入PHP变量?(How do I put JSON into a PHP Variable?)