Can't use ObservableCollection in a Grid?-CodePudding

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!

CodePudding user response：

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.