从 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 ;)
我目前正在使用 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 ;)