从 ObservableCollection 更新网格内的标签

Updating Labels within Grid from ObservableCollection

我目前正在使用 Xamarin 中的一个应用程序,为 UWP 构建它。

在这个应用程序中,我有一个 Stack,其中有一张人像 body,上面覆盖了其他图像(彩色圆圈)。我想做的是在 body 上的圆圈顶部放置一个标签,并根据我从另一个文件中提取的 ObservableCollection(称为 TagInfoList)中的数据实时更新它们。为了进行设置,我制作了一个 5x4 网格,Body 图像占据了整个网格,并将圆圈放置在网格的各个单元格中。此外,标签位于它们自己的单元格中。我 运行 遇到的问题是让我的标签显示并从我的 TagInfoList 主动更新。

Here is what I am trying to set up。我希望我的标签位于彩色圆圈之上。

这里是 XAML 代码:

<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 -->

我试过将 Labels 放在 CollectionView 中,因为我可以将它绑定到 TagInfoList,这是 Grid 做不到的。但是,我不确定我需要对 objects 的层次结构进行哪些更改才能使标签主动更新。我调用的 TagInfoList 和 SensorAvgValue 都在其他 StackLayout 实例中正确更新,所以我知道 ObservableCollection 没有问题。

此外,我的下一步是根据标签中的值更改图像,因此我可能还需要将图像 objects 移动到标签所在的任何级别,以便它们可以互相交流。

如果在 .xaml.cs 文件中这样做更容易,我也可以将代码转移到一个文件中。一个存在,但它只存在于我布局中不同 Stack 的一部分。

如有任何建议,我们将不胜感激。谢谢大家!

正如用户 Jason 提到的那样:模型会很好。无论如何...

如果您只想要一个图像和一个批处理图像,请将其包装成“BatchView”。

另一种简单的方法是将所有(图像、标签、批次(?))放入“AbsolutLayout”,然后将其定位,作为AbsolutLayout 就像一个叠加层。

最后将其全部设置为具有 OnPropertyChanged 的绑定,因此它会像在 CollectionView 中一样更新自身 - 在 CollectionView 中它是相同的机制,但自动化。

只需绘制一个简单的模型和 post ;)