Xamarin

Question

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,0" VerticalOptions="EndAndExpand" />

                                <StackLayout Orientation="Horizontal" Margin="15,-8,0,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")}";
    }
}

}

Answer 1

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

图片before/after.

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,0" VerticalOptions="EndAndExpand" />

                                <StackLayout Orientation="Horizontal" Margin="15,-8,0,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>

现在有新问题。由于底部有文本 StackLayout，文本所在的位置我无法按 ImageButton。我怎样才能将 ImageButton 放在顶层“层”，这样我也可以在按下文本的同时按下它。

Answer 2

检查VisualElement.InputTransparent Property。

false if the element and its children should receive input; true if neither the element nor its children should receive input and should, instead, pass inputs to the elements that are visually behind the current visual element. 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,-10,0,0" VerticalOptions="EndAndExpand" />
     <StackLayout Orientation="Horizontal" Margin="15,-8,0,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>

Xamarin - ImageButton 不会激活每次点击

Xamarin - ImageButton doesnt activate every click

mobile

xaml

imagebutton

visual-studio