由于重叠视图，按钮不可点击答案

【问题标题】：Button not clickable due to overlapping view由于重叠视图，按钮不可点击
【发布时间】：2019-10-08 10:01:41
【问题描述】：

这可能是一个简单的解决方案，但由于某种原因我无法在线找到解决方案。

我有两种观点。一个视图是网格，另一个是按钮。 Grid View 显示不同的视图（boxview、label 等）

但在它下面是一个按钮视图。但是这个视图不包含在网格视图中。由于某些原因，我无法将其放入网格视图中。我只是想知道是否有可能在不移动视图的情况下点击它，或者即使它上面有视图？

它是这样的：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="PlayUIArea.NotificationConfirmView">
    <ContentView.Content>
        <Grid BackgroundColor="Blue">
            <BoxView
                WidthRequest="100"
                VerticalOptions="Fill"
                HorizontalOptions="Start"
                BackgroundColor="Black" />
            <Button Text="Confirm"
                        OnClick="Button_Click"
                        VerticalOptions="Start"
                        HorizontalOptions="Center" />
            <Grid BackgroundColor="Red" Margin="100,0,0,0" Padding="-100,0,0,0">
                <Label Text="Label Here"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />

            </Grid>

        </Grid>
    </ContentView.Content>
</ContentView>

有没有办法让它可以点击？

【问题讨论】：

标签： c# visual-studio xamarin xamarin.forms

【解决方案1】：

同意@G.Mich，您应该将所有元素放在一个布局中。例如，您可以将它们放在StackLayout

<ContentPage.Content>
   <StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
      <Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
      <Grid>
         your code here
      </Grid>      
   </StackLayout> 
</ContentPage.Content>

【讨论】：

张。我也在这里编辑过。抱歉，我被带去参加一个会议。
我想是因为你没有设置 Grid.Row 。所以所有元素都会重叠。你需要设置网格的布局。

【解决方案2】：

我有点晚了，但我想我找到了解决办法。

<Grid>
    <WebView Grid.Row ="1" Source="[insert random embedded youtube source]"/>
        
    <RelativeLayout Grid.Row ="1" InputTransparent="True" CascadeInputTransparent="False">
          <Button CornerRadius="0" Command="{Binding GoToVideoFullscreen}"
                RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
                RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
                RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=17}"
                RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=17}"/>
    </RelativeLayout> 
</Grid>

我遇到了类似的问题，我想将 WebView 与自定义按钮重叠。但是我用来放置按钮的 RelativeLayout 正在吃掉所有的输入，并且 WebView 不能再使用了。

所以我在RelativeLayout 中添加了InputTransparent="True" 和CascadeInputTransparent="False"。 InputTransparent="True" 使其对输入不可见，CascadeInputTransparent="False" 防止 InputTransparent 值继承给子项（在本例中为我的按钮）。

文档：

https://docs.microsoft.com/de-de/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms

https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.cascadeinputtransparent?view=xamarin-forms

【讨论】：

【解决方案3】：

将button 放在Grid 的顶部，方法是将其放在 XAML 中的 Grid 之后

<ContentPage.Content>
    <Grid>
         My code here
    </Grid>
    <Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
</ContentPage.Content>

【讨论】：