Windows 通用应用程序中的卡片视图 material 设计

Question

我想开发一个类似微软Universal MSN News App设计的博客应用程序。我想要类似下图所示的设计。

我查看了这个新闻应用程序，发现许多很酷的功能都与 Pivot 设计相结合。

我有几个问题：

如何在新闻应用程序中制作这样的动态卡片视图布局。这个应用程式有动态网格视图。有些 GridView 较大，有些较小。我们如何调整彼此相邻的这些网格视图即使他们有不同的高度。有这方面的样本吗？
执行延迟加载以在我们向下滚动时加载提要。知道如何完成延迟加载的工作。

谢谢。感谢任何帮助。

Answer 1

Custom-sized 网格

创建您自己的小部件（扩展基本小部件 class）以表示单个网格。网格的大小将由其中的文本量或您希望的任何其他因素决定。
使用 table 或网格布局。对于 Gtk+，请参见此处：https://developer.gnome.org/gtk3/stable/GtkGrid.html
将您的自定义小部件附加到布局。

延迟加载

我知道的所有工具包的滚动小部件都会在用户到达底部（或顶部或左侧边缘或右侧边缘）时发出信号。
抓住这个信号并向布局添加更多自定义网格小部件。您可能需要重新显示布局的内容，这有点低效；或许使用多线程。
在 Gtk+ 3 中，edge-reached 在到达任何边缘时由 ScrolledWindow 发出。

这是一般概念。快速 Google 搜索将显示您选择的 GUI 工具包如何执行上述操作。

Answer 2

您可以使用一些 third-party 库：The-UWP-Tools-List

通过以下命令很容易集成Marduk.Controls：

PM> Install-Package Marduk.Controls

您可以看到我的代码示例：

<Page
x:Class="App1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App1"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Marduk.Controls"
mc:Ignorable="d">

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <ScrollViewer>
        <controls:WaterfallFlowView x:Name="Panel" ItemSource="{Binding cc}" StackCount="3" DelayMeasure="True">
            <controls:WaterfallFlowView.Resizer>
                <local:MyItemResizer/>
            </controls:WaterfallFlowView.Resizer>
            <controls:WaterfallFlowView.ItemContainerStyle>
                <Style TargetType="ContentControl">
                    <Setter Property="HorizontalAlignment" Value="Stretch"></Setter>
                    <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                </Style>
            </controls:WaterfallFlowView.ItemContainerStyle>
            <controls:WaterfallFlowView.ItemTemplate>
                <DataTemplate>
                    <Border Height="{Binding Length}" Background="{Binding Brush}" HorizontalAlignment="Stretch">
                        <TextBlock FontSize="50" Text="{Binding Num}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </Border>
                </DataTemplate>
            </controls:WaterfallFlowView.ItemTemplate>
        </controls:WaterfallFlowView>
    </ScrollViewer>
</Grid>

public sealed partial class MainPage : Page
{
    public ObservableCollection<Test> cc { get; set; }
    public MainPage()
    {
        this.InitializeComponent();
        cc = new ObservableCollection<Test>();
        cc.Add(new Test() {Length=200,Brush= new SolidColorBrush(Colors.Red),Num=1 });
        cc.Add(new Test() { Length = 150, Brush = new SolidColorBrush(Colors.Blue), Num = 2 });
        cc.Add(new Test() { Length = 100, Brush = new SolidColorBrush(Colors.LightCyan), Num = 3 });
        cc.Add(new Test() { Length = 50, Brush = new SolidColorBrush(Colors.SandyBrown), Num = 4 });
        this.DataContext = this;
    }
}

public class Test
{
    public double Length { get; set; }

    public SolidColorBrush Brush { get; set; }

    public int Num { get; set; }
}

public class MyItemResizer : IItemResizer
{
    public Size Resize(object item, Size oldSize, Size availableSize)
    {
        return new Size(availableSize.Width, oldSize.Height);
    }
}

UWPCommunityToolkit

Windows 通用应用程序中的卡片视图 material 设计

Card View material design in Windows Universal Apps

c#

xaml

windows-10

uwp

windows-10-universal

Custom-sized 网格

延迟加载