Xamarin - ImageButton 不会激活每次点击

问题描述

Screen

在上图中，您可以看到 ImageButton 有时会激活的位置。当我在蓝色区域点击垃圾邮件时，计数器有时会增加。我认为 ImageButton 顶部可能还有另一个层，但我不知道如何修复它。下面是 XAML 代码。希望有人可以提供帮助。谢谢！

<StackLayout>
    <Label Text="discover" TextColor="Black" FontSize="24" FontAttributes="Bold" Margin="15" />

    <CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame  HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterandExpand" CornerRadius="10" >
                        <Grid>
                            <StackLayout>
                                <ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand" 
                                    Aspect="AspectFill" Opacity="0.8" Clicked="ImageButton_Clicked"/>
                            </StackLayout>

                            <StackLayout Margin="0,10" >

                                <Image Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
                       Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,-15"/>
                                <Label Text="{Binding name_norm}" TextColor="Black" FontSize="16" FontAttributes="Bold"
                       Margin="15,-10,0" VerticalOptions="EndAndExpand" />

                                <StackLayout Orientation="Horizontal" Margin="15,-8,0" >
                                    <Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
                       Aspect="AspectFit"/>
                                    <Label Text="{Binding name_lat}" TextColor="Black" FontSize="16" FontAttributes="Italic"  VerticalOptions="EndAndExpand" Margin="-5,0" />
                                </StackLayout>
                            </StackLayout>
                        </Grid>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>
    </CarouselView>
    <Label x:Name="label" Text="0 ImageButton clicks"
           FontSize="Large"
           HorizontalOptions="Center"
           VerticalOptions="CenterandExpand" />
</StackLayout>

这里是 C# 代码：

namespace PlantBase
{
public partial class MainPage : ContentPage
{
    int clickTotal;
    public MainPage()
    {
        InitializeComponent();
    }

    private void ImageButton_Clicked(object sender,EventArgs e)
    {
        clickTotal += 1;
        label.Text = $"{clickTotal} ImageButton click{(clickTotal == 1 ? "" : "s")}";
    }
}

}

解决方法

好的，我发现了问题。正是在我将红旗放在顶部并将文本放在底部的一个 Stacklayout 中，从上到下扩展。现在我将它们放在单独的 StackLayouts 中，它可以工作并且 ImageButton 是免费的。

之前/之后的照片。

old StackLayout

new Stacklayout

新的 XAML 是：

<CarouselView ItemsSource="{Binding plants}" HeightRequest="300" PeekAreaInsets="100">
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <StackLayout>
                    <Frame  HeightRequest="280" WidthRequest="180" BackgroundColor="Wheat" HasShadow="True" Margin="10" Padding="0" HorizontalOptions="CenterAndExpand" CornerRadius="10" >
                        <Grid>
                            <StackLayout>
                                <ImageButton Source="{Binding imgsource}" VerticalOptions="FillAndExpand"
                                    Aspect="AspectFill" Opacity="0.9" Clicked="ImageButton_Clicked" />
                            </StackLayout>

                            <StackLayout VerticalOptions="StartAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="Aqua">
                                <ImageButton Source="https://icons-for-free.com/iconfiles/png/512/bookmark-131964752402712733.png" HeightRequest="35"
                                            Aspect="AspectFit" HorizontalOptions="EndAndExpand" Margin="5,0" BackgroundColor="Transparent" Clicked="ImageButton_Clicked_1" />
                            </StackLayout>
                            
                            <StackLayout Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">

                                <Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold"
                                        Margin="15,-10,0" VerticalOptions="EndAndExpand" />

                                <StackLayout Orientation="Horizontal" Margin="15,-8,0" BackgroundColor="Aqua" >
                                    <Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15"
                                        Aspect="AspectFit" />
                                    <Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic"  VerticalOptions="EndAndExpand" Margin="-5,0" />
                                </StackLayout>
                                
                                
                                
                            </StackLayout>
                        </Grid>
                    </Frame>
                </StackLayout>
            </DataTemplate>
        </CarouselView.ItemTemplate>

现在有新问题。由于底部有 Text StackLayout，Text 所在的位置我无法按下 ImageButton。如何将 ImageButton 作为顶部“层”，以便我也可以在按下文本的同时按下它。

,

检查VisualElement.InputTransparent Property。

false 如果元素及其子元素应该接收输入； true 如果元素及其子元素都不应该接收输入，而是应该将输入传递给当前视觉元素后面的元素。 Default is false。

您需要的是在文本 stackLayout 上将 InputTransparent 设置为 true。

 <StackLayout  InputTransparent="True"  Margin="0,10" VerticalOptions="EndAndExpand" BackgroundColor="SaddleBrown">
     <Label Text="{Binding name_norm}" TextColor="White" FontSize="16" FontAttributes="Bold" Margin="15,0" VerticalOptions="EndAndExpand" />
     <StackLayout Orientation="Horizontal" Margin="15,0" BackgroundColor="Aqua">
         <Image Source="https://www.freeiconspng.com/thumbs/info-icon/info-icon-24.png" HeightRequest="15" Aspect="AspectFit" />
         <Label Text="{Binding name_lat}" TextColor="White" FontSize="16" FontAttributes="Italic"  VerticalOptions="EndAndExpand" Margin="-5,0" />
     </StackLayout>
 </StackLayout>