Bindable property value pass from Child view's bindable property inside parent Page using Xamarin Forms?

Question

I created a View(BlankScreen) which has Image and in the code behind of the view I created a BindableProperty Icon.

View's Xaml Code:

<ContentView
    x:Class="Demo.CustomViews.BlankScreen"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentView.Content>
        <StackLayout>
            <Label Text="Hello Xamarin.Forms!" />
            <Image x:Name="image"/>
        </StackLayout>
    </ContentView.Content>
</ContentView>

View's Code Behind:

public partial class BlankScreen : ContentView
    {
        public BlankScreen ()
        {
            InitializeComponent ();
        }

        public static readonly BindableProperty IconProperty =
            BindableProperty.Create(nameof(Icon), typeof(ImageSource), typeof(BlankScreen), null);

        public ImageSource Icon
        {
            get => (ImageSource)GetValue(IconProperty);
            set => SetValue(IconProperty, value);
        }
    }

Then I used this view to Page so I included this view with BindableProperty Icon.

<customviews:BlankScreen Icon="chat" />

But Problem is chat icon not able to set on my view which was passed from the parent page's view.

So how can i solve this issue, please help?

duplicate of https://stackoverflow.com/questions/57870127/how-to-bind-stacklayout-with-mvvm — Roubachof, Sep 16 '19 at 07:43

score 0 · Answer 1 · answered Sep 13 '19 at 12:06

0

The reason I think it is not working is that you don't seem to be setting it up

Your bindable property should look something like below:

 public static readonly BindableProperty IconProperty =
        BindableProperty.Create(nameof(Icon), typeof(ImageSource), typeof(BlankScreen), null, propertyChanged: IconChanged);

    public ImageSource Icon
    {
        get => (ImageSource)GetValue(IconProperty);
        set => SetValue(IconProperty, value);
    }

Once you do that add the below method and update the image:

  private static void IconChanged(BindableObject bindable, object oldValue, object newValue)
    {
        BlankScreen screen= bindable as BlankScreen ;
        screen.image.Source= newValue.ToString();
    }

Let me know in case of queries

answered Sep 13 '19 at 12:06

FreakyAli

13,349
3
23
63

Thanks @FreakyAli for your reply, I did it but image not visible. – Manish Tiwari Sep 13 '19 at 12:50
Are you sure you have something called chat in your app's native resources? – FreakyAli Sep 13 '19 at 12:51
yes i have and when i put another image with same chat icon but directly without bindable property it's visible. Not able to take icon using BindableProperty. – Manish Tiwari Sep 13 '19 at 13:09

score 0 · Answer 2 · answered Sep 16 '19 at 08:28

I find there is image in BlankScreen, but you don't set source for it. I bind Icon for this image.

 <ContentView.Content>
    <StackLayout>
        <Label Text="Hello Xamarin.Forms!" />
        <Image x:Name="image" Source="{Binding Icon}" />
    </StackLayout>
</ContentView.Content>

Then create propertyChanged event:

public partial class BlankScreen : ContentView
{
    public static readonly BindableProperty IconProperty =
        BindableProperty.Create(nameof(Icon), typeof(ImageSource), typeof(BlankScreen), defaultBindingMode: BindingMode.TwoWay,
                                                                   propertyChanged: (bindable, oldVal, newVal) =>
                                                                   {
                                                                       var page = (BlankScreen)bindable;
                                                                       page.image.Source = (ImageSource)newVal;
                                                                   });

    public ImageSource Icon
    {
        get => (ImageSource)GetValue(IconProperty);
        set => SetValue(IconProperty, value);
    }
    public BlankScreen ()
    {
        InitializeComponent ();

    }
}

Finally, I use this custom view in Contentpage.

 <ContentPage.Content>
    <StackLayout>
        <customview:BlankScreen Icon="a1.jpg" />
    </StackLayout>
</ContentPage.Content>

it works fine.

Bindable property value pass from Child view's bindable property inside parent Page using Xamarin Forms?

2 Answers2