How to bind an entire element of an Observable Collection to a ContentView in Xamarin Forms

Question

In my View code I create an object of the type of my Model. I add that object to an ObservableCollection and bind to that collection in my XAML code for a StackLayout. I have place a custom control, a ContentView, inside the StackLayout. I want to be able to set a property on the control using the entire object in the ObservableCollection. The control will then set its own content from the parts of the object set. If this is a little confusing, let me demonstrate what I want to do.

UPDATE I have modified my code, both XAML and C#, to try several ways to access the current element in the source collection based on the info provided by Jason(below in the comments) and using info I found in the Binding Declarations Overview.

Here is the revised XAML:

<StackLayout BindableLayout.ItemsSource="{Binding IdCardCollection}"
                             Margin="0, 0, 0, 0" >
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <!-- Content -->
                <Frame HeightRequest="360" Margin="17, 0, 16, 0" 
                                       BorderColor="{StaticResource NGIC_GrayishWhite}" 
                                       HasShadow="True">
                    <Grid Margin="-10, -13, -10, 5">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="80*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="260*" />
                            <ColumnDefinition Width="73*" />
                        </Grid.ColumnDefinitions>

                        <cardViews:ThreeLineCardView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
                                                                     Margin="0, 0, 10, 0"
                                                                     ConfigName="IdCard"
                                                                     HeightRequest="59"
                                                                     WidthRequest="335"
                                                                     CardInfo="{Binding Path=/}"
                                                                     CardTitle="{Binding StateTerritoryCardTitle}"/>
                    </Grid>
                </Frame>
            </StackLayout>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

On the CardInfo property I have also tried the following without any success {Binding .} and {Binding}

The code for the control:

public static readonly BindableProperty CardInfoProperty = BindableProperty.Create(nameof(CardInfo), typeof(IdCard), typeof(ThreeLineCardView), null);

private IdCard _idCard;

public IdCard CardInfo 
{
    get => (IdCard)GetValue(CardInfoProperty);
    set
    {
       SetValue(CardInfoProperty, value);
        _idCard = (IdCard) value;
    }
}

And the collection that the page is bound to is defined as in the ViewModel:

public ObservableCollection<IdCard> IdCardCollection { get; private set; }

I know that the element exists because the second property I set in the control, CardTitle, does work.

UPDATE 2 Tried using an object as the property type and that did not work either (I set a breakpoint on the SetValue method call in the property setter). See below:

public static readonly BindableProperty CardInfoObjectProperty = BindableProperty.Create(nameof(CardInfoObject), typeof(object), typeof(ThreeLineCardView), null);

        public object CardInfoObject
        {
            get => GetValue(CardInfoObjectProperty);
            set
            {
                SetValue(CardInfoObjectProperty, value);
                _idCard = (IdCard)value;
                SetIdCardValues(_idCard);
            }
        }

<cardViews:ThreeLineCardView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" 
                                                                     Margin="0, 0, 10, 0"
                                                                     ConfigName="IdCard"
                                                                     HeightRequest="59"
                                                                     WidthRequest="335"
                                                                     CardInfoObject="{Binding .}"
                                                                     CardTitle="{Binding StateTerritoryCardTitle}"/>

If you have solved this issue, please accept answer, it will help others who have similar issue. — Leon Lu - MSFT

Jason Jason · Accepted Answer · 2020-06-24T19:43:27

1

votes

to bind the entire object, using "{Binding .}"

How to bind an entire element of an Observable Collection to a ContentView in Xamarin Forms

1 Answers