CODEWITHSUNDEEP
xamarin.formsbackground-imagealpha-transparency
user16937336
user16937336

Reputation:

How to make a semi-transparent background image on xamarin

I have to opacify (make semi-transparent) the background image with a colored veil, I tried adding a frame but I don't get the desired effect`

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

enter image description here

I would like the elements, however, not to be affected by the opacity value (still be fully opaque), any advice on how I could do?

Upvotes: 3

Views: 1416

Answers (1)

ToolmakerSteve
ToolmakerSteve

Reputation: 21358

One approach is to "overlay" two elements over each other, using a single-cell Grid.

  • The "underneath" item is the image (with opacity applied).
  • The "top" item is the rest of your layout.

.

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

Notice that StackLayout is no longer inside Frame. Because no Grid.Row or Grid.Column is specified on these two elements, they both are at Row=0, Column=0. Hence, overlaid one on top of the other.

May need to add properties to <Grid> element, to get desired size, etc. But start with what I show, see what happens.

Upvotes: 2

Related Questions