bind image in reusable.

Question

I have a custom control

 <inputLayout:SfTextInputLayout Hint="{Binding TexBoxHintText, Source={x:Reference UserCustomTemplate}}">
        <editors:SfComboBox
            DisplayMemberPath="FullName"
            DropDownItemHeight="300"
            IsDropdownButtonVisible="False"
            IsEditable="True"
            ItemsSource="{Binding Data, Source={x:Reference UserCustomTemplate}}"
            MaxDropDownHeight="600"
            Placeholder="{Binding PlaceHolderText, Source={x:Reference UserCustomTemplate}}"
            SelectedDropDownItemBackground="Purple"
            SelectedItem="{Binding SelectedItem, Source={x:Reference UserCustomTemplate}}"
            SelectionMode="Single"
            TextMemberPath="FullName">
            <editors:SfComboBox.ItemTemplate>
                <DataTemplate x:DataType="models:DemyUser">
                    <ViewCell>
                        <HorizontalStackLayout Spacing="10">
                            <Image
                                Aspect="AspectFit"
                                HeightRequest="40"
                                HorizontalOptions="Center"
                                Source="{Binding Path=BindingContext.ImageSource, Source={x:Reference UserCustomTemplate}}"
                                VerticalOptions="Center"
                                WidthRequest="40" />
                            <Label
                                Text="{Binding FullName}"
                                VerticalTextAlignment="Center" />
                        </HorizontalStackLayout>
                    </ViewCell>
                </DataTemplate>
            </editors:SfComboBox.ItemTemplate>
        </editors:SfComboBox>
    </inputLayout:SfTextInputLayout>

public partial class UserTemplate : ContentView {
    public UserTemplate() {
        InitializeComponent();
    }
    public static readonly BindableProperty DataProperty = BindableProperty.Create(
        nameof(Data), typeof(IEnumerable), typeof(UserTemplate));
    public IEnumerable Data {
        get => (IEnumerable)GetValue(DataProperty);
        set => SetValue(DataProperty, value);
    }
    public static readonly BindableProperty SelectedItemProperty = BindableProperty.Create(
        nameof(SelectedItem), typeof(DemyUser),
        typeof(UserTemplate), null, BindingMode.TwoWay);
    public DemyUser SelectedItem {
        get => (DemyUser)GetValue(SelectedItemProperty);
        set => SetValue(SelectedItemProperty, value);
    }
    public static readonly BindableProperty TexBoxHintTextProperty = BindableProperty.Create(
        nameof(TexBoxHintText), typeof(string), typeof(UserTemplate));
    public string TexBoxHintText {
        get => (string)GetValue(TexBoxHintTextProperty);
        set => SetValue(TexBoxHintTextProperty, value);
    }
    public static readonly BindableProperty PlaceHolderTextProperty = BindableProperty.Create(
        nameof(PlaceHolderText), typeof(string), typeof(UserTemplate));
    public string PlaceHolderText {
        get => (string)GetValue(PlaceHolderTextProperty);
        set => SetValue(PlaceHolderTextProperty, value);
    }
    public static readonly BindableProperty ImageSourceProperty = BindableProperty.Create(
    nameof(ImageSource), typeof(ImageSource), typeof(UserTemplate));
    public ImageSource ImageSource {
        get => (ImageSource)GetValue(ImageSourceProperty);
        set => SetValue(ImageSourceProperty, value);
    }

It works but I don't see the image.

  <controls:UserTemplate
      Grid.Row="1"
      Data="{Binding Teachers}"
      PlaceHolderText="Select Teacher"
      ImageSource="teacher.png"
      SelectedItem="{Binding SelectedTeacher}"
      TexBoxHintText="Teachers" />

Answer 1

Hello,

Image in the DataTemplate. Please remove Path=BindingContext.ImageSource in the Image. Binding the ImageSource directly like following code.

Source="{Binding ImageSource,Source={x:Reference UserCustomTemplate}}"

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.