Insert the icon at the begging of the entry

Question

1.00/5 (1 vote)

See more:

I just want to put the icon on the begging of the Entry, there is not way, i had read and i can not, please i need any help Here you have part of the code where i want to insert the ico

<ContentPage.Content>
    <Grid RowSpacing="{OnPlatform iOS=25,Android=20}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>        
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
             <ColumnDefinition/>
         </Grid.ColumnDefinitions>
    
        <StackLayout Grid.Row="3" HorizontalOptions="Center"
              WidthRequest="{OnPlatform iOS=300,Android=300}"
              Orientation="Vertical">
             <!-- Here where i insert the image -->
                <Image Grid.Column="1" Source="userImage.png"></Image>
                <Label 
                    Text="Usuario"
                    FontSize="{OnPlatform Android=13}"
                    TextColor="Black"
                />
                
                <Frame 
                    HasShadow="{OnPlatform Android=true, iOS=false}"
                    Padding="{OnPlatform Android=6,iOS=0}"
                    CornerRadius="{OnPlatform Android=7}">                   

                    <Entry                              
                      
                       Placeholder="Usuario" 
                       ClearButtonVisibility="WhileEditing"
                       MaxLength="25"
                       FontSize="{OnPlatform Android=15,iOS=16}"                       
                       TextColor="Blue" 
                       x:Name="txtUser">                        
                    </Entry>
                </Frame>
            </StackLayout>

What I have tried:

I had read the instructions, but i can not get it

Posted 27-Jul-22 6:00am

Luis M. Rojas

Updated 27-Jul-22 6:33am

Add a Solution

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Gerry Schmitz · Answer 1 · 2022-07-27T06:14:00

Solution 1

A Grid.Row or Grid.Column is relative to "0".

You reference Column "1" when all you have is one Column ("0")
You reference Row "3" (4) while you have only 3 rows.

The image is inside a StackLayout with a label (vs its own column in the Grid); so is (probably) collapsed.

Posted 27-Jul-22 6:14am

Gerry Schmitz

Luis M. Rojas · Answer 2 · 2022-07-27T06:33:00

Hello Gerry
It is just part of the code,
I try to use <relative> but i could not.
here is the complete code:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Login.Login">
    <ContentPage.Content>
        <Grid RowSpacing="{OnPlatform iOS=25,Android=20}">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>

            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition/>
            </Grid.ColumnDefinitions>
            <StackLayout Grid.Row="1">
                <Image
                    Source="logoPaq.png"
                    HeightRequest="{OnPlatform iOS=90,Android=70}"
                    WidthRequest="{OnPlatform iOS=90,Android=0}"
                  />
            </StackLayout>
            <StackLayout Grid.Row="2" HorizontalOptions="Center">
                <Label 
                    Text="Entrada a consulta"
                        TextColor="Black"
                        Font="Montserrat-Medium.oft"
                        FontSize="{OnPlatform Android=20,iOS=23}"
                        WidthRequest="300"
                />
            </StackLayout>
            
                <StackLayout Grid.Row="3" HorizontalOptions="Center"
                         WidthRequest="{OnPlatform iOS=300,Android=300}"
                         Orientation="Vertical">

                
                <Label 
                    Text="Usuario"
                    FontSize="{OnPlatform Android=13}"
                    TextColor="Black"
                />
                <Image Grid.Row="3" Source="userImage.png"></Image>
                <Frame 
                    HasShadow="{OnPlatform Android=true, iOS=false}"
                    Padding="{OnPlatform Android=6,iOS=0}"
                    CornerRadius="{OnPlatform Android=7}">                   
                    
                    <Entry                              
                      
                       Placeholder="Usuario" 
                       ClearButtonVisibility="WhileEditing"
                       MaxLength="25"
                       FontSize="{OnPlatform Android=15,iOS=16}"                       
                       TextColor="Blue" 
                       x:Name="txtUser">
                        
                    </Entry>
                    
                </Frame>
            </StackLayout>
           
            <StackLayout Grid.Row="4" HorizontalOptions="Center"
                         WidthRequest="{OnPlatform iOS=300,Android=300}"
                         Orientation="Vertical">
                <Image Source="PasswordLock.png" Scale="0.7"></Image>
                <Label 
                    Text="Clave"
                    FontSize="{OnPlatform Android=13}"
                    TextColor="Black"
                    />
                
                <Frame 
                    HasShadow="{OnPlatform Android=true, iOS=false}"
                    Padding="{OnPlatform Android=6,iOS=0}"
                    CornerRadius="{OnPlatform Android=7}">
                    <Entry Placeholder="******************"
                       ClearButtonVisibility="WhileEditing"
                       MaxLength="25"
                       IsPassword="True"
                       FontSize="{OnPlatform Android=15,iOS=16}"                       
                       TextColor="Blue" 
                       x:Name="txtClave">

                    </Entry>
                </Frame>
            </StackLayout>

            <StackLayout Grid.Row="5" HorizontalOptions="Center"  Orientation="Vertical">
                <Button 
                    Text="Login"
                    Font="Montserrat-Medium.oft"
                    FontSize="{OnPlatform Android=15}"
                    BackgroundColor="#fcfcfc"
                    BorderColor="#f2f2f2"
                    BorderWidth="1.5"
                    WidthRequest="300"
                    HeightRequest="50"
                    CornerRadius="7"
                    Clicked="Button_Clicked"                   
                />
            </StackLayout>

            <StackLayout Grid.Row="6">
                <Button Text="Hazte Socio" 
                   TextColor="Green"
                   Font="Montserrat-Medium.oft"
                   FontSize="{OnPlatform Android=15}"
                   BackgroundColor="#fcfcfc"
                   BorderColor="Blue"
                   BorderWidth="1.5"
                   WidthRequest="200"
                   HeightRequest="50"
                   CornerRadius="7"
                        
                Clicked="Button_Clicked_1"
                />
            </StackLayout>
        </Grid>
    </ContentPage.Content>

Insert the icon at the begging of the entry

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Insert the icon at the begging of the entry

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0

Existing Members

...or Join us