Positioning Label and Images components Xamarin Forms

Question

I need something like this:

And I have this right now:

XAML:

<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="PetCare.Client.View.Forgot.ForgotPasswordView">
    <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
                <RowDefinition Height="*" ></RowDefinition>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="2*" ></ColumnDefinition>
                <ColumnDefinition Width="auto" ></ColumnDefinition>
                <ColumnDefinition Width="2*" ></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0"
                         Grid.Column="0" 
                         Grid.ColumnSpan="3" 
                         x:Name="BackgroundTop">
            </StackLayout>

            <Image Grid.Row="0"
                   Grid.Column="1" 
                   Grid.RowSpan="2"
                   x:Name="Icon"/>
            <StackLayout  Grid.Row="2" 
                          Grid.Column="0"
                          Grid.ColumnSpan="3" 
                          Grid.RowSpan="4"
                          x:Name="BackgroundBot"
                          Spacing="0">
                <Label Grid.Row="2" 
                       Grid.Column="1"
                       x:Name="TextTitleLable"
                   />
                <StackLayout Grid.Row="3"
                             Grid.Column="1"
                             BackgroundColor="Red"
                             x:Name="BackgroundImage"
                             Spacing="0">
                    <Image x:Name="Phone"/>
                </StackLayout>
                <StackLayout Grid.Row="3"
                             Grid.Column="1"
                             BackgroundColor="Blue"
                             x:Name="BackgroundTextDescription"
                             Spacing="0">
                    <Label x:Name="TextDescription"></Label>
                </StackLayout>
                <StackLayout Grid.Row="4"
                             Grid.RowSpan="2"
                             x:Name="BackgroundInputNavigation">
                    <Entry x:Name="InputUser" />
                    <Label x:Name="ErrorMessage"/>
                    <Label x:Name="OtherOption"/>
                </StackLayout>
            </StackLayout>
            <Button  Grid.Row="8" 
                     Grid.Column="1"
                     x:Name="BtnContinue"
                     Clicked="ClickedBtnContinue"/>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#:

 //BackgrouTextndInputNavigation.
        public ForgotPasswordView()
        {
            InitializeComponent();
            NavigationPage.SetHasNavigationBar(this, false);
            SetColorsApp();
            SetBtnContinueProperties();
            SetTextTitleLableProperties();
            SetIconProperties();
            SetBackgroundTopProperties();
            SetBackgroundBotProperties();
            SetInputUserProperties();
            SetOtherOptionProperties();
            SetErrorMessageProperties();
            SetPhoneProperties();
            SetTextDescriptionProperties();
            SetBackgroundImageProperties();
            SetBackgroundTextDescriptionProperties();

            

        }
        private void SetBackgroundTextDescriptionProperties()
        {
            BackgroundTextDescription.Orientation = StackOrientation.Horizontal;
            BackgroundTextDescription.HorizontalOptions = LayoutOptions.End;
            BackgroundTextDescription.VerticalOptions = LayoutOptions.Center;
        }
        private void SetBackgroundImageProperties()
        {
            BackgroundImage.Orientation = StackOrientation.Horizontal;
            BackgroundImage.HorizontalOptions = LayoutOptions.Start;
            BackgroundImage.VerticalOptions = LayoutOptions.Center;


        }
        private void SetTextDescriptionProperties()
        {
            Label textPhoneNumber = new Label();

            textPhoneNumber.Text = "XXXXX-XX89";
            textPhoneNumber.TextColor = Color.FromHex(ColorsApp.ColorAppWarning);
            textPhoneNumber.FontSize = 18;


            string Text = "Foi enviada uma mensagem\ncom Código de Verificação\npara o Telefone "+ textPhoneNumber.Text+ "\ncadastrado em sua conta.\nInforme este Código para\nprosseguir.".Replace("\n", System.Environment.NewLine);
            TextDescription.Text = Text;
            TextDescription.FontSize = 18;
            TextDescription.HorizontalTextAlignment = TextAlignment.End;
            TextDescription.VerticalOptions = LayoutOptions.Center;
        }
        private void SetPhoneProperties()
        {
            Phone.Source = ImageSource.FromFile("phone.png");
            Phone.HorizontalOptions = LayoutOptions.Start;
            Phone.VerticalOptions = LayoutOptions.Center;
            Phone.HeightRequest = 110;

        }
        private void SetErrorMessageProperties()
        {
            ErrorMessage.FontAttributes = FontAttributes.Bold;
            ErrorMessage.Margin = new Thickness(0, 0, 0, 30);
        }

        private void SetOtherOptionProperties()
        {
            var tap = new TapGestureRecognizer();

            tap.Tapped += async (s, e) => await Navigation.PushAsync(new OtherOptionResetPasswordView());

            OtherOption.Text = "Usar outra opção de verificação";
            OtherOption.FontSize = 18;
            OtherOption.GestureRecognizers.Add(tap);
            OtherOption.TextColor = Color.FromHex(ColorsApp.ColorAppPrimary);

            tap = null;
        }
        private void SetInputUserProperties()
        {
            InputUser.Placeholder = "Inserir o Código";
            InputUser.Margin = new Thickness(0, 20, 0, 0);
        }
        private void SetBackgroundBotProperties()
        {
            BackgroundBot.Padding = 30;
            BackgroundBot.HeightRequest = 300;
            BackgroundBot.HorizontalOptions = LayoutOptions.FillAndExpand;
            BackgroundBot.VerticalOptions = LayoutOptions.FillAndExpand;
        }
        private void SetBackgroundTopProperties()
        {
            BackgroundTop.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemePrimary);
            BackgroundTop.HorizontalOptions = LayoutOptions.FillAndExpand;
            BackgroundTop.VerticalOptions = LayoutOptions.FillAndExpand;
            BackgroundTop.Padding = 10;
        }
        private void SetIconProperties()
        {
            Icon.Source = ImageSource.FromFile("smartphone.png");
            Icon.HorizontalOptions = LayoutOptions.Center;
            Icon.VerticalOptions = LayoutOptions.Center;
        }
        private void SetTextTitleLableProperties()
        {
            TextTitleLable.HorizontalTextAlignment = TextAlignment.Start;
            TextTitleLable.VerticalTextAlignment = TextAlignment.Start;
            TextTitleLable.Text = "Verificar Identidade";
            TextTitleLable.FontSize = 28;
            TextTitleLable.TextColor = Color.FromHex(ColorsApp.ColorAppDark);
        }
        private void SetBtnContinueProperties()
        {
            BtnContinue.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemePrimary);
            BtnContinue.VerticalOptions = LayoutOptions.End;
            BtnContinue.HorizontalOptions = LayoutOptions.End;
            BtnContinue.TextColor = Color.White;
            BtnContinue.Padding = new Thickness(3);
            BtnContinue.Margin = new Thickness(0, 0, 30, 30);
            BtnContinue.Text = "Continuar";
            BtnContinue.FontSize = 22;
            BtnContinue.WidthRequest = 140;
        }
        private void SetColorsApp()
        {
            BackgroundBot.BackgroundColor = Color.FromHex(ColorsApp.ColorAppThemeDefault);
        }
        private async void ClickedBtnContinue(object sender, EventArgs e)
        {
            await Navigation.PushAsync(new ResetPasswordView());
        }

I need two things: put the phone number in another color; and place the image next to the label.

I am very beginner, so I ask for some code along with the explanation. Please

It appears that even if the components are oriented horizontally, they cannot stand side by side. I tried to put both in the same stack layout but the stack layout height is based on the image, leaving one or two lines of text hidden

Answer 1

Being honest with you, your Grid is a mess XD

First of all, you should be aware that by using Grid you should be able to get rid of most (if not all) of your Stacklayouts. Please take a look at the great docu that Xamarin has on Grid and many other topics :D

Next i share with you a Grid that i worked out to display what you want (notice the lack of Stacklayout!):

<Grid Padding="20" RowSpacing="70"
      BackgroundColor="White">

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto"/>
        <ColumnDefinition Width="*"/>
    </Grid.ColumnDefinitions>

    <Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
           Text="Verificar Identidade"
           FontSize="30"/>
    <Image Grid.Row="1" Grid.Column="0"
           Source="TelefonImage"
           WidthRequest="100"/>
    <Label Grid.Row="1" Grid.Column="1"
           FontSize="Medium"
           HorizontalTextAlignment="End">
        <Label.FormattedText>
            <FormattedString>
                <Span Text="Foi enviada uma mensagem com Código de Verificação para o Telefone "/>
                <Span Text="XXXXX-XX89"
                      TextColor="Orange"/>
                <Span Text=" cadastrado em sua conta. Informe este Código para prosseguir."/>
            </FormattedString>
        </Label.FormattedText>
    </Label>
</Grid>

On my side this looks like:

Also take note of what @Jason said in the comment: "everything you're doing in C# could be included in your XAML" (and that mean all the property setting).

I hope that will get you going!

---

Edit 1

I was able to quickly achieve the result in the image above by using the Hot Reload in Xamarin.Forms: play with it!