Bindings not working using custom control

Question

I'm trying to make a custom control with Binding and my Binding of an ImageSource isn't working. That's my code:

Customcontrol.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="Custom.CustomEntry"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <ContentView.Content>
        <StackLayout Orientation="Vertical">

            <ImageButton
                BackgroundColor="Transparent"
                Clicked="Open"
                Source="{Binding Icon}" />



            <Frame
                x:Name="frameemojis"
                BackgroundColor="red"
                IsVisible="False">
                <Label Text="Hello" />
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

CustomControl.xaml.cs:

public partial class CustomControl: ContentView { public static readonly BindableProperty IconProperty = BindableProperty.Create("Icon", typeof(ImageSource), typeof(CustomControl));

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



    bool state = true;
    void Open(object o, System.EventArgs e)
    {

        if (state)
        {
            state = false;
            frameemojis.IsVisible = true;
        }
        else
        {
            state = true;
            frameemojis.IsVisible = false;
        }

    }



    public CustomControl()
    {
        InitializeComponent();
    }
}

}

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    x:Class="App23.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:fav="clr-namespace:Custom;assembly=Custom">

    <StackLayout>
        <fav:CustomControl Icon="icon.png" WidthRequest="200" />
    </StackLayout>

</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        BindingContext = new ViewModel();
        InitializeComponent();
    }
}

The ViewModel now is empty but in the future I will use it to control other things. My idea is to set the icon in the MainPage with Icon="icon.png". Any idea why isn't working?

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-11-05T11:40:21

You could modify the code of Custom View like following .

in xaml

<?xml version="1.0" encoding="UTF-8" ?>
<ContentView
    x:Class="Custom.CustomEntry"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
     x:Name="CustomView"   //set name of custom view
    >
    <ContentView.Content>
        <StackLayout Orientation="Vertical">

            <ImageButton
                BackgroundColor="Transparent"
                Clicked="Open"
                Source="{Binding Source={x:Reference CustomView},Path=Icon}" />



            <Frame
                x:Name="frameemojis"
                BackgroundColor="red"
                IsVisible="False">
                <Label Text="Hello" />
            </Frame>
        </StackLayout>
    </ContentView.Content>
</ContentView>

Bindings not working using custom control

2 Answers

in xaml