Updating Labels within Grid from ObservableCollection-CodePudding

I am currently working with an app in Xamarin, building it for UWP.

In this app, I have a Stack that has an image of the human body with other images overlayed (colored circles). What I am trying to do is place a Label on top of the circles on the body and update them in real time based on data within an ObservableCollection (called TagInfoList) I am pulling from another file. To set this up, I have made a 5x4 Grid that the Body image takes up the entirety of, and have placed the circles within individual cells of the Grid. Additionally, the Labels go in their own cells. The issue I am running into is getting my Labels to show up and actively update from my TagInfoList.

Here is what I am trying to set up. I want my Labels to go on top of the colored circles.

Here is the XAML code:

<StackLayout Orientation="Horizontal" HorizontalOptions="EndAndExpand"> <!-- Body Model Section -->

      <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" WidthRequest="400" ColumnSpacing="0">
        <Grid.ColumnDefinitions> <!-- 4 equal size Columns-->
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
          <ColumnDefinition/>
        </Grid.ColumnDefinitions> <!-- 5 equal size Rows -->
        <Grid.RowDefinitions>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
          <RowDefinition/>
        </Grid.RowDefinitions>

        <Image Source="{pages:ImageResource BLE.Client.Pages.body.png}" Aspect="AspectFit" Grid.Row="0" Grid.Column="0" Grid.RowSpan="5" Grid.ColumnSpan="4"/>
        <Image Source="{pages:ImageResource BLE.Client.Pages.green.png}" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" Aspect="AspectFit" Opacity="0.6"/>
        <Image Source="{pages:ImageResource BLE.Client.Pages.red.png}"   Grid.Row="2" Grid.Column="0" Aspect="AspectFit" Opacity="0.6"/>
        <Image Source="{pages:ImageResource BLE.Client.Pages.green.png}" Grid.Row="2" Grid.Column="3" Aspect="AspectFit" Opacity="0.6"/>
        <Image Source="{pages:ImageResource BLE.Client.Pages.green.png}" Grid.Row="4" Grid.Column="1" Aspect="AspectFit" Opacity="0.6"/>
        <Image Source="{pages:ImageResource BLE.Client.Pages.red.png}"   Grid.Row="4" Grid.Column="2" Aspect="AspectFit" Opacity="0.6"/>

        <CollectionView ItemsSource="{Binding TagInfoList}">
          <CollectionView.ItemTemplate>
            <DataTemplate>
              <ViewCell>
                <Label Grid.Row="0" Grid.Column="1" Text="{Binding SensorAvgValue}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center" Grid.ColumnSpan="2"/>
                <Label Grid.Row="2" Grid.Column="0" Text="{Binding SensorAvgValue}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center"/>
                <Label Grid.Row="2" Grid.Column="3" Text="{Binding SensorAvgValue}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center"/>
                <Label Grid.Row="4" Grid.Column="1" Text="{Binding SensorAvgValue}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center"/>
                <Label Grid.Row="4" Grid.Column="2" Text="{Binding SensorAvgValue}" FontSize="Large" HorizontalOptions="Center" VerticalOptions="Center"/>
              </ViewCell>
            </DataTemplate>
          </CollectionView.ItemTemplate>
        </CollectionView>
      </Grid>
    </StackLayout> <!-- Body Model Section -->

I've tried putting the Labels within a CollectionView since I can bind it to the TagInfoList, something a Grid cannot do. However, I am unsure what changes I need to make with the hierarchy of my objects to get the Labels to actively update. The TagInfoList and SensorAvgValue that I am calling are both updating correctly in other StackLayout instances, so I know there is no issue with the ObservableCollection.

In addition, my next step will be to make the Images change based on the value in the Label, so I may need to also move the Image objects to whatever level the Labels are at so they can interact with each other.

If this would be easier to do in a .xaml.cs file, I could also transfer the code to one. One exists but it's only there for one part of a different Stack in my layout.

Any and all advice would be appreciated. Thank you all!

CodePudding user response：

So as the user Jason mentioned: a mockup would be nice. anyway...

If you just want an Image and a batch over it, wrap it into a "BatchView".

Another easy way would be if you place all (Image, Label, Batch(?)) into an "AbsolutLayout" and then Position it, as the AbsolutLayout is like an overlay.

Finally set it all to a Binding with OnPropertyChanged, so it will update itself like in a CollectionView - in a CollectionView it's the same mechanism but automated.

Just draw an simple mockup and post ;)