将一个可观察集合组合起来进行语义缩放

本文关键字:起来 组合 缩放 语义 集合 观察 一个 | 更新日期: 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)示例。