BindableProperty for Image Source in contentview

Question

Im trying to bind DogImage source which in my Contentview. Im trying to build reusable view objects like frame buttons. I just need to give them Image and Text from outside of contentview. Im using Images from resources folder.

this is my contentView

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PawsApp.Views.AboutMyDogViews.DogsBreedPicker"
             BindingContext="{Binding .}">
    <ContentView.Content>
        <StackLayout x:Name="breedStack"  Margin="30,2,30,2">
            <Frame  HeightRequest="64" CornerRadius="8" BorderColor="White" HasShadow="False" BackgroundColor="White" 
               VerticalOptions="FillAndExpand" Padding="18,0,18,0">
                <Frame.Content>
                    <StackLayout Orientation="Vertical" VerticalOptions="CenterAndExpand">
                        <Grid ColumnSpacing="18">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"></ColumnDefinition>
                                <ColumnDefinition Width="9*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image x:Name="DogImage" Source="{Binding ImageSourceOf}"  Grid.Row="0" Grid.Column="0" ></Image>
                            <Label  x:Name="breedSelector" Text="Breed" FontSize="Medium" TextColor="#5f5d70" Grid.Row="0" Grid.Column="1">
                            </Label>
                        </Grid>
                    </StackLayout>
                </Frame.Content>
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

And this is CS file

public partial class DogsBreedPicker : ContentView
{
    public static readonly BindableProperty ImageSourceProperty =
        BindableProperty.Create("ImageSourceOf", typeof(ImageSource), typeof(DogsBreedPicker));

    public ImageSource ImageSourceOf
    {
        get { return GetValue(ImageSourceProperty) as ImageSource; }
        set { SetValue(ImageSourceProperty, value);}           
    }

    public DogsBreedPicker()
    {
        InitializeComponent ();
        BindingContext = ImageSourceOf;
    }
}

And this is how i want to use it.

<views:DogsBreedPicker ImageSourceOf="dog" TextOf="Breed Selector" x:Name="DogBreed" ></views:DogsBreedPicker>

Answer 1

You are setting your BindingContext to ImageSourceOf in your constructor. Anyway, the properties are not set at this moment, hence ImageSourceOf is still null. However, you do not need to use BindingContext in this case anyway, since you can directly bind to the ImageSourceOf property:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PawsApp.Views.AboutMyDogViews.DogsBreedPicker"
             x:Name="View">
      <!-- Elided all the other stuff -->
      <Image x:Name="DogImage" Source="{Binding ImageSourceOf, Source={x:Reference View}}"  Grid.Row="0" Grid.Column="0" />

</ContentView>

remove the assignment of BindingContext from your constructor.

Why does this work?

The default source of all bindings is the BindingContext (of the view, which is propagated to all child views). Anyway, you are by no means restricted to the BindingContext as the source of a binding, but can set the Source of the binding to another object. In this case we are referencing the view (which we have given the name View with x:Name="View") by its name and use it as the source of the binding of the Source of the Image. Since the Path of the binding is ImageSourceOf, the Image.Source will be bound to View.ImageSourceOf.