Forum Xamarin Xamarin.Forms

showing transparent label containing username

at the top of the page im trying to add a label with transparent background.

<?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"
         mc:Ignorable="d"
         x:Class="Kula.Profile"
         FlowDirection="RightToLeft"
         >
<RelativeLayout>

    <ImageButton 
x:Name="profileImage"
Aspect="AspectFill" 
Source="DefaultProfileImage.jpg" 
RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Width,
        Factor=1}"
        RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Height,
        Factor=.3}"/>



    <Grid RelativeLayout.HeightConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Height,
        Factor=.09}"
          RelativeLayout.WidthConstraint="{ConstraintExpression
        Type=RelativeToParent,
        Property=Width,
        Factor=1}"
             RelativeLayout.YConstraint="{ConstraintExpression
        Type=RelativeToView,
        ElementName=profileImage,
        Property=Height,
        Factor=.84

        }">
        <Grid.RowDefinitions>
            <RowDefinition Height="1*"/>

        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width=".2*"/>
            <ColumnDefinition Width=".2*"/>
            <ColumnDefinition Width=".2*"/>
            <ColumnDefinition Width=".2*"/>
            <ColumnDefinition Width=".2*"/>
        </Grid.ColumnDefinitions>
        <BoxView Grid.Row="0" Grid.Column="0"/>
        <Frame Grid.Row="0" Grid.Column="1"  Grid.ColumnSpan="3" BackgroundColor="#DCDCDC" HasShadow="False" CornerRadius="10" 
   Padding="0" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="1*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width=".33*"/>
                    <ColumnDefinition Width=".005*"/>
                    <ColumnDefinition Width=".33*"/>
                    <ColumnDefinition Width=".005*"/>
                    <ColumnDefinition Width=".33*"/>
                </Grid.ColumnDefinitions>
                <Grid Grid.Row="0" Grid.Column="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".6*"/>
                        <RowDefinition Height=".4*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Label x:Name="posts" Grid.Row="0" Grid.Column="0" Text="0" FontSize="25" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Grid.Row="1" Grid.Column="0"  Text="Posts" FontSize="10" HorizontalOptions="Center" VerticalOptions="Center"/>
                </Grid>
                <Grid Grid.Row="0" Grid.Column="1">
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".075*"/>
                        <RowDefinition Height=".85*"/>
                        <RowDefinition Height=".075*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <BoxView Grid.Row="0" Grid.Column="0"/>
                    <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="#686868" />
                    <BoxView Grid.Row="2" Grid.Column="0"/>
                </Grid>
                <Grid  Grid.Row="0" Grid.Column="2" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".6*"/>
                        <RowDefinition Height=".4*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Label  x:Name="Followers" Grid.Row="0" Grid.Column="0" Text="0" FontSize="25" HorizontalOptions="Center" 
      VerticalOptions="Center"/>
                    <Label Grid.Row="1" Grid.Column="0"  Text="Followers" FontSize="10" HorizontalOptions="Center" VerticalOptions="Center"/>
                </Grid>
                <Grid Grid.Row="0" Grid.Column="3" >
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".075*"/>
                        <RowDefinition Height=".85*"/>
                        <RowDefinition Height=".075*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <BoxView Grid.Row="0" Grid.Column="0"/>
                    <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="#686868"/>
                    <BoxView Grid.Row="2" Grid.Column="0"/>
                </Grid>
                <Grid  Grid.Row="0" Grid.Column="4">
                    <Grid.RowDefinitions>
                        <RowDefinition Height=".6*"/>
                        <RowDefinition Height=".4*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="1*"/>
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0" Grid.Column="0" Text="0" FontSize="25" HorizontalOptions="Center" VerticalOptions="Center"/>
                    <Label Grid.Row="1" Grid.Column="0"  Text="Following" FontSize="10" HorizontalOptions="Center" VerticalOptions="Center"/>
                </Grid>

        </Grid>
        </Frame>

        <BoxView Grid.Row="0" Grid.Column="4"/>

    </Grid>





</RelativeLayout>


Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited November 2019

    Could you please post more details about your question?

  • theConfusedOnetheConfusedOne Member ✭✭✭

    @jezh said:
    Could you please post more details about your question?

    i cant edit this now but i need to add a username label at the top of the page with a transparent background to not cover up the picture. but every time i try to it pushes the picture out of the way rather than showing on top of it

  • NMackayNMackay GBInsider, University admin
    edited November 2019

    You can also set the color to "Transparent" if your not worried about the level of transparency

    <Label BackgroundColor="Transparent" Text="overlay" />
    
Sign In or Register to comment.