UWP Bind to ObservableCollection declaratively

Question

I have a simple UWP page; there is a public ObservableCollection in the page code-behind:

public ObservableCollection<Book> MyObservableColl{ get; } = new ObservableCollection<Book>();

(note the collection consists of a single item) I would like to bind to the collection; here is what I tried:

            <StackPanel x:Name="stackPanel"
                        Grid.Row="2"
                        Margin="50"
                        DataContext="{x:Bind MyObservableColl, Mode=OneWay}">
                <TextBox x:Name="txtTitle"
                         TextWrapping="Wrap"
                         Text="{x:Bind Title, Mode=OneWay}" />
            </StackPanel>

The visual studio designer complains "the property Title was not found". I appreciate any help to bind my text boxes to the Observable Collection.

Answer 1

the property Title was not found

txtTitle TextBox can't access Book item where in the MyObservableColl collection directly, you need place txtTitle under items control's ItemTemplate.

For example

<ListView ItemsSource="{x:Bind MyObservableColl, Mode=OneWay}">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="local:Book">
            <StackPanel>
                <TextBox Text="{x:Bind Title}" />
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

For more info please refer to listview document.

Update

For single item please refer to this xaml

<StackPanel
        x:Name="stackPanel"
        Grid.Row="2"
        Margin="50"
        DataContext="{x:Bind MyObservableColl[0], Mode=OneWay}">
        <TextBox Text="{Binding Title}"/>
    </StackPanel>