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

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

Make StackLayout transparent so the WebView behind can be seen

webview

xamarin.forms