Question

我有一个可从SQLite数据库填充的可观察集合，然后数据显示在列表视图中。我想将其更改为带有标题的语义视图，如何对集合中的对象进行分组？

XAML Page

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

Observable Collection

    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);
        }

    }

Answer 1

为了对可观察的集合进行语义缩放，我们可以使用 CollectionViewSource 作为数据源。然后使用分组LINQ查询来设置CollectionViewSource.Source属性，就像my previous answer中的内容一样。

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后，我们就可以将其用作ItemsSource或GridView的ListView来支持分组。有关SemanticZoom的详细信息，请参阅Semantic zoom，Quickstart: adding SemanticZoom controls (XAML)以及GitHub上的UI basics (XAML) sample。

gouping一个可观察的语义缩放集合

1 个答案: