xamarin.forms - 如何在xamarin上制作半透明背景图片

Question

我必须用彩色面纱遮盖(使半透明)背景图像，我尝试添加一个框架，但我没有得到想要的效果`

    <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:viewmodels="clr-namespace:GET_SOUND_V2.ViewModels" x:DataType="viewmodels:LoginViewModel"
             mc:Ignorable="d"
             x:Class="GET_SOUND_V2.Views.LoginPage"
             BackgroundImage="maco.jpg">
    <ContentPage.Content>
        <Frame BorderColor="Transparent" Opacity="0.7">
            <Frame.Background>
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="1,0">
                        <GradientStop Color="#1d57a8"
                          Offset="0.1"/>
                    <GradientStop Color="#1d57a8"
                          Offset="1.0"/>
                </LinearGradientBrush>
    </Frame.Background>
        <StackLayout Orientation="Vertical" Padding="30" Spacing="40">
            <BoxView HeightRequest="30"/>
            <StackLayout Orientation="Vertical">
                <Entry x:Name="txtUserName" Text="{Binding UserName}" HorizontalTextAlignment="Center" Placeholder="UserName"   
                           PlaceholderColor="White" HeightRequest="40"   
                           Keyboard="Email"  
                           TextColor="White"
                           Focused="BiometricCredentials" />
                <Entry x:Name="txtPassword" Text="{Binding Password}" HorizontalTextAlignment="Center" Placeholder="Password"   
                           PlaceholderColor="White" HeightRequest="40"   
                           IsPassword="True"  
                           TextColor="White"/>
            </StackLayout>
            <Button Command="{Binding SubmitCommand}" Text="Accedi" TextColor="White" CornerRadius="50"
                    FontAttributes="Bold" FontSize="Large" HorizontalOptions="FillAndExpand" VerticalOptions="EndAndExpand"
                    Margin="0,0,0,150" BackgroundColor="#EF7F1A" />
        </StackLayout>
</Frame>
    </ContentPage.Content>
</ContentPage>

但是，我希望这些元素不受不透明度值的影响(仍然是完全不透明的)，关于我该怎么做的任何建议？

Answer 1

一种方法是使用单单元格网格将两个元素相互“叠加”。

• “下面”项是图像(应用了不透明度)。
• “顶部”项目是布局的其余部分。

.

<Grid>
    <Frame ...>
        ...
    </Frame>
    <StackLayout ...>
        ...
    </StackLayout>
</Grid>

注意 StackLayout不再在里面 Frame .因为没有Grid.Row或 Grid.Column在这两个元素上指定，它们都位于 Row=0，Column=0。因此，将一个叠加在另一个之上。

可能需要将属性添加到 <Grid>元素，以获得所需的大小等。但是从我展示的内容开始，看看会发生什么。