使 StackLayout 透明，以便可以看到后面的 WebView

Question

我使用的是 Visual Studio 2017，该项目是一个跨平台的 Xamarin Forms 移动应用，版本 4.0

我想在包含 webview 的 StackLayout 顶部添加一个包含非透明按钮的透明 StackLayout（页脚）。

我正在努力实现这一目标：

如你所见，底部StackLayout（Footer）的不透明度为0.9，仍然可以看到后面的WebView。

我试过这种方式：

<ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="WebView" TargetType="{x:Type WebView}">
                <Setter Property="VerticalOptions" Value="Fill"></Setter>
                <Setter Property="HeightRequest" Value="1000"></Setter>
                <Setter Property="WidthRequest" Value="1000"></Setter>
            </Style>
            <Style x:Key="Footer" TargetType="{x:Type StackLayout}">
                <Setter Property="BackgroundColor" Value="{x:StaticResource BlackColor}"/>
                <Setter Property="VerticalOptions" Value="End"/>
                <Setter Property="Orientation" Value="Horizontal"/>
                <Setter Property="Opacity" Value="0.9"></Setter>
            </Style>
            <Style x:Key="AcceptButton" TargetType="{x:Type Button}">
                <Setter Property="BackgroundColor" Value="{x:StaticResource YellowColor}"/>
                <Setter Property="TextColor" Value="{x:StaticResource BlackColor}"/>
                <Setter Property="WidthRequest" Value="125" />
                <Setter Property="BorderRadius" Value="15" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout>
            <StackLayout VerticalOptions="CenterAndExpand">
                <WebView Style="{StaticResource WebView}" Source="{Binding Url}"></WebView>
            </StackLayout>
            <StackLayout Style="{StaticResource Footer}">
                <Button Text="{x:Static resources:AppLocalization.Term_Accept}" Style="{StaticResource AcceptButton}"></Button>
            </StackLayout>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

但是Footer全黑，看不到后面的WebView。 你们对如何处理这个有什么想法吗？ 非常感谢！

Answer 1

你想覆盖项目，所以最好使用网格

 <ContentPage.Content>
        <Grid>
            <StackLayout VerticalOptions="CenterAndExpand">
                <WebView Style="{StaticResource WebView}" Source="{Binding Url}"></WebView>
            </StackLayout>
            <StackLayout VerticalOptions="End" Style="{StaticResource Footer}">
                <Button Text="{x:Static resources:AppLocalization.Term_Accept}" Style="{StaticResource AcceptButton}"></Button>
            </StackLayout>
        </Grid>
    </ContentPage.Content>