multitrigger on custom view

Issue

I created a custom view called "InfoButton":

public class InfoButton : ImageButton
{
    public string Glyph { get; set; } = "\U000F02FD";
    public string Title { get; set; }
    public string Text { get; set; }
    public InfoButton()
    {
        Source = new FontImageSource() { Glyph = Glyph, FontFamily = "materialdesign.ttf#materialdesign", Size= (double)new FontSizeConverter().ConvertFromInvariantString("Title"), Color = Color.Black };
        BackgroundColor = Color.Transparent;
        Clicked += InfoButton_Clicked;
    }

    private void InfoButton_Clicked(object sender, EventArgs e)
    {
        AlertPopup.DisplayAlertPopup(Title, Text, 0, "Close");
    }
}

Now I created a Trigger for it:

<models:InfoButton Glyph="&#xF059F;" Title="some title" Text="some text" IsVisible="false" HorizontalOptions="EndAndExpand">
    <models:InfoButton.Triggers>
        <MultiTrigger TargetType="{x:Type models:InfoButton}">
            <MultiTrigger.Conditions>
                <BindingCondition Binding="{Binding isPublic}" Value="true"/>
                <BindingCondition Binding="{Binding isReadonly}" Value="false"/>
            </MultiTrigger.Conditions>
            <MultiTrigger.Setters>
                <Setter Property="IsVisible" Value="true"/>
                <Setter Property="Glyph" Value="&#xF059F;"/>
            </MultiTrigger.Setters>
        </MultiTrigger>
    </models:InfoButton.Triggers>
</models:InfoButton>

But I get this error while compiling:

XFC0001 Cannot resolve property "Glyph" on type "InfoButton (property missing or missing accessors)".

What could be the problem?

Thanks for your help.

Solution

To simply fix your issue go to Solution section. To know the reason why your code is failing see Explanation section.

Solution

You will have to turn your Glyph property into a BindableProperty as follows

public static readonly BindableProperty GlyphProperty = BindableProperty.Create(nameof(Glyph), typeof(string), typeof(InfoButton), "\U000F02FD");

public string Glyph
{
    get { return (string)GetValue(GlyphProperty); }
    set { SetValue(GlyphProperty, value); }
}

Explanation

The explanation why your code is failing with Glyph defined as a simple property can be found in the docu for Setter.Property where it says

Only bindable properties can be set with a Setter.

Answered By - Deczaloth