Can't use ObservableCollection in a Grid?

Question

I am currently working with a Xamarin app for reading RFID temperature tags and updating their values in real time. The current setup uses two Horizontal StackLayouts, one with a ListView showing a list of tags and their values, and the other with a Grid of Images of the human body that I wish to display the values on as well (in specific places).

In the ListView side, I can successfully call an object called TagInfoList, which is an ObservableCollection in the Class I call from the BasePage initialization. However, on the Grid side, I've tried multiple methods of using the TagInfoList, but it does not work. I've tried BindableLayouts, DataTemplates + ViewCells, and none allow me to get TagInfoList usable within my second StackLayout.

Here is the XAML code for the two horizontal StackLayouts:

<StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
          <ListView x:Name="liewViewTagData" ItemsSource="{Binding TagInfoList}" SelectedItem="{Binding objItemSelected, Mode=TwoWay}">
            <ListView.Header>
              <StackLayout BackgroundColor="#cccccc">
                <Grid>
                  <!-- Grid + Label code irrelevant to my issue-->
                </Grid>
              </StackLayout>
            </ListView.Header>

            <ListView.ItemTemplate>
              <DataTemplate>
                <ViewCell>
                  <StackLayout Orientation="Vertical">
                    <Grid>
                      <!-- Grid + Label code irrelevant to my issue-->
                    </Grid>
                  </StackLayout>
                </ViewCell>
              </DataTemplate>
            </ListView.ItemTemplate>
          </ListView>
        </StackLayout> <!-- RFID Tag Section -->

        <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand"> <!-- Body Model Section -->
          <!-- HERE: WHAT TO PUT FOR TagInfoList TO BE USABLE? -->
          <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" WidthRequest="400" ColumnSpacing="0">
             <!-- Grid + Label + Images I want to use TagInfoList information in -->
          </Grid>
          <!-- HERE: WHAT TO PUT FOR TagInfoList TO BE USABLE? -->
        </StackLayout> <!-- Body Model Section -->
      </StackLayout>```

I've deleted the bulk of inside Grids since it's not relevant. TagInfoList is an ObservableCollection of a class which contains all the data I need (strings and ints). How do I utilize TagInfoList within the second StackLayout? If I do it the same method as the first StackLayout, I get an error that I've called TagInfoList twice (through the 'liewViewTagData' item). Here is that code in the .xaml.cs file:

liewViewTagData.ItemSelected += (sender, e) => {
                if (e.SelectedItem == null) return;     // Don't do anything if we just de-selected the row
                ((ListView)sender).SelectedItem = null; // De-select the row
            };

My sole goal is to use the TagInfoList ObservableCollection within both StackLayouts, but I'm not sure how to do that.

Thanks!

Answer 1

If I do it the same method as the first StackLayout, I get an error that I've called TagInfoList twice (through the 'liewViewTagData' item).

You can do it in the same way as the first StackLayout.And you can change property x:Name of the two listviews to different Name.

You can refer to the following code:

     <ScrollView Orientation="Horizontal">
    <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">

            <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                <ListView  x:Name="liewViewTagData" RowHeight="60" ItemsSource="{ Binding TagInfoList}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>

                                <!--other code-->

                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>

            <StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand">
                <ListView  x:Name="liewView2" RowHeight="60" ItemsSource="{ Binding TagInfoList}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>

                                <!--other code-->
                                
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
        </StackLayout>
    </ScrollView>

Note:

If you run out of horizontal space, I suggest you add a ScrollView to the outer layer.