将一个可观察集合组合起来进行语义缩放
本文关键字:起来 组合 缩放 语义 集合 观察 一个 | 更新日期: 2023-09-27 18:07:17
我有一个从SQLite数据库填充的可观察集合,然后数据显示在列表视图中。我想将其更改为带有标题的语义视图,我如何将集合内的对象分组?
XAML页<Page.Resources>
<vm:IngredientsCollection x:Key="Ingredient"/>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<uwp:SwipeListView x:Name="IngredientList" ItemClick="ItemClicked" LayoutUpdated="ListUpdated" ItemsSource="{StaticResource Ingredient}" IsItemClickEnabled="True" SelectionMode="Single" ItemSwipe="ItemSwipe" ItemLeftBackground="#FF007575" KeyDown="DeleteKeyPressed" IsTabStop="True" Margin="0,0,0,-1">
<uwp:SwipeListView.ItemTemplate>
<DataTemplate>
<Grid>
<StackPanel Orientation="Vertical" HorizontalAlignment="Left">
<TextBlock Text="{Binding IngredientName}" FontSize="18" Margin="12,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center"/>
<TextBlock Text="{Binding IngredientCategory.CategoryName}" FontSize="16" Margin="12,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Center" />
</StackPanel>
</Grid>
</DataTemplate>
</uwp:SwipeListView.ItemTemplate>
<uwp:SwipeListView.ItemContainerStyle>
<Style TargetType="uwp:SwipeListViewItem">
<Setter Property="Height" Value="80"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0,0,0,1"/>
<Setter Property="BorderBrush" Value="#FF007575"/>
</Style>
</uwp:SwipeListView.ItemContainerStyle>
</uwp:SwipeListView>
</Grid>
可观测的集合
public class IngredientsCollection : ObservableCollection<Ingredient>
{
public IngredientsCollection()
: base()
{
var db = new SQLiteConnection(new SQLitePlatformWinRT(), App.path);
var Ingredients = new List<Ingredient>();
Ingredients = db.GetAllWithChildren<Ingredient>().ToList();
foreach (var Ingredient in Ingredients)
{
Add(Ingredient);
}
}
为了对一个可观察集合进行语义缩放,我们可以使用CollectionViewSource作为数据源。然后使用分组LINQ查询来设置CollectionViewSource。源属性就像我之前的回答。
List<TestDemo> list = new List<TestDemo>();
for (int i = 0; i < 6; i++)
{
list.Add(new TestDemo { Key = "A", Text = $"Test A {i}" });
list.Add(new TestDemo { Key = "B", Text = $"Test B {i}" });
}
var result = from t in list group t by t.Key;
groupInfoCVS.Source = result;
一旦我们设置了CollectionViewSource
,我们就可以使用它作为GridView或ListView的ItemsSource来支持分组。有关SemanticZoom的更多信息,请参阅Semantic zoom,快速入门:添加SemanticZoom控件(XAML)以及GitHub上的UI基础(XAML)示例。