Skip to content

Custom IDrawable control does not databind to a model property when used inside a CollectionView ItemTemplate #20991

@neilwarland

Description

@neilwarland

Description

The issue I'm having is with databinding a custom drawn control, where the model property isn't binding to the Drawable control property.

Please see attached github sample project. It is a simple project based off the Xaminals demo.

The project has a List of Theatre classes each of which has one public property Name. The List is bound to a CollectionView in TheatresPage.xaml which has two bound controls to demo the binding issue.

  • A label which binds to the TheatreName property of the Theatre object. This binds and renders correctly.
  • A drawable control which is created and renders correctly but the control's Name property doesn't bind to the model's TheatreName property.
<CollectionView.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="40" />
                <RowDefinition Height="40" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="100" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            
            <Label Grid.Row="0" Grid.Column="0" Text="Label Text: " TextColor="Red" />
            <Label Grid.Row="0" Grid.Column="1" Text="{Binding TheatreName}" TextColor="Red" />
            
            <Label Grid.Row="1" Grid.Column="0" Text="Drawable: " />
            <GraphicsView Grid.Row="1" Grid.Column="1" HorizontalOptions="Fill" HeightRequest="40">
                <GraphicsView.Drawable>
                    <controls:TheatrePanel Name="{Binding TheatreName}" />
                </GraphicsView.Drawable>
            </GraphicsView>
        </Grid>
    </DataTemplate>
</CollectionView.ItemTemplate>

My custom drawn control is as below. It's built off BindableObject with a BindableProperty using the correct naming convention

public partial class TheatrePanel : BindableObject, IDrawable
{
    public static readonly BindableProperty NameProperty = BindableProperty.Create(nameof(Name), typeof(string), typeof(TheatrePanel));

    public string Name
    {
        get => (string)GetValue(NameProperty);
        set => SetValue(NameProperty, value);
    }

    public void Draw(ICanvas canvas, RectF dirtyRect)
    {
        canvas.FontColor = Colors.Black;
        canvas.FontSize = 14;
        canvas.Font = Microsoft.Maui.Graphics.Font.Default;

        canvas.DrawString($"Bound Item Value >> {Name}", 0, 0, 400, 38, HorizontalAlignment.Left, VerticalAlignment.Top);
    }
}

Demo app output. As you can see, the Label in red binds correctly but the Drawable in black renders but hasn't bound.

image

Steps to Reproduce

Please run the demo github project attached

Link to public reproduction project repository

https://github.com/neilwarland/MAUI-IDrawable-DataBinding/tree/main

Version with bug

8.0.6 SR1

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No

Relevant log output

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area-drawingShapes, Borders, Shadows, Graphics, BoxView, custom drawingpartner/syncfusionIssues / PR's with Syncfusion collaborationplatform/androids/triagedIssue has been revieweds/verifiedVerified / Reproducible Issue ready for Engineering Triaget/bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions