从 ObservableCollection 更新网格内的标签

Question

我目前正在使用 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 的一部分。

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

Answer 1

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

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

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

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

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

从 ObservableCollection 更新网格内的标签

Updating Labels within Grid from ObservableCollection

xaml

xamarin

uwp

uwp-xaml

xamarin.uwp