Xamarin.Forms Xaml to add icon image next to user name and password field

faceoffers28faceoffers28 USUniversity ✭✭✭

Does anyone know how to add an image next to a Text field used for data entry? I can't figure this out. I even tried to create an ImageCell.

Here is my code. This code centers the icon image just above the Text entry field.

<StackLayout Padding="20" Spacing="10" VerticalOptions="Center" Grid.Row="1" Grid.Column="0">
        <StackLayout Spacing="5">
          <Image Source="User_Profile_48.png" />
            <local:LineEntry Placeholder="email address" HorizontalOptions="FillAndExpand"
                             Text="{Binding UserName, Mode=TwoWay}"
                             Style="{StaticResource LineEntryStyle}" />  

          <Image Source="Briefcase_02_48.png" />
          <local:LineEntry Placeholder="password" IsPassword="True"
                           Text="{Binding UserPassword, Mode=TwoWay}"
                           Style="{StaticResource LineEntryStyle}" />
 </StackLayout>

Any help is much appreciated.

Thanks!

Posts

  • MCvelMCvel USMember ✭✭✭

    Hi, you can add a StackLayout with Orientation="Horizontal" to contain each image and entry, something like this:
    <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand"> <Image Source="img_name.png" WidthRequest="18" /> <Entry x:Name="txtName" Placeholder="Name" Font="Large" HasBorder="False" TextColor="Black" HorizontalOptions="FillAndExpand" VerticalOptions="Center" /> </StackLayout>

    cheers!

  • faceoffers28faceoffers28 USUniversity ✭✭✭

    That worked.

    Here is the final code.

    <StackLayout Padding="20" Spacing="10" VerticalOptions="Center" Grid.Row="1" Grid.Column="0">
            <StackLayout Spacing="5">
              <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
                <Image Source="User_Profile_48.png" />
                <local:LineEntry Placeholder="email address" HorizontalOptions="FillAndExpand"
                                 Text="{Binding UserName, Mode=TwoWay}"
                                 Style="{StaticResource LineEntryStyle}" />
              </StackLayout>
    
              <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
              <Image Source="Briefcase_02_48.png" />
              <local:LineEntry Placeholder="password" IsPassword="True" HorizontalOptions="FillAndExpand"
                               Text="{Binding UserPassword, Mode=TwoWay}"
                               Style="{StaticResource LineEntryStyle}" />
              </StackLayout>
    </StackLayout>
    

    Thanks!

  • DanielEstebanTabordaDanielEstebanTaborda COMember ✭✭

    @faceoffers28 said:
    That worked.

    Here is the final code.

    <StackLayout Padding="20" Spacing="10" VerticalOptions="Center" Grid.Row="1" Grid.Column="0">
            <StackLayout Spacing="5">
              <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
                <Image Source="User_Profile_48.png" />
                <local:LineEntry Placeholder="email address" HorizontalOptions="FillAndExpand"
                                 Text="{Binding UserName, Mode=TwoWay}"
                                 Style="{StaticResource LineEntryStyle}" />
              </StackLayout>
    
              <StackLayout Orientation="Horizontal" Padding="0" Spacing="5" HorizontalOptions="FillAndExpand">
              <Image Source="Briefcase_02_48.png" />
              <local:LineEntry Placeholder="password" IsPassword="True" HorizontalOptions="FillAndExpand"
                               Text="{Binding UserPassword, Mode=TwoWay}"
                               Style="{StaticResource LineEntryStyle}" />
              </StackLayout>
    </StackLayout>
    

    Thanks!

    It works, thanks.

Sign In or Register to comment.