カードWindowsでの素材デザインの表示ユニバーサルアプリケーション

Question

私は、MicrosoftのUniversal MSN News Appのようなブログアプリケーションを開発したいと思っています。下図のようなデザインが欲しいです。

このニュースアプリを調べると、多くのクールな機能がピボットデザインと統合されていることがわかりました。私が持っている

いくつかの質問：

• どのように私はニュースアプリでは、このようなダイナミックなカードビューのレイアウトを作るのですか。このアプリは 動的グリッドビューを持っています。 GridViewの中には、大きめのものもあれば小さいものもあります。異なる高さを持っていても、これらのグリッドビューを互いに隣り合わせに調整するにはどうすればいいですか？ これについてのサンプルがありますか？

• レイジーローディングは、スクロールダウン時にフィードを読み込むために実装されています。 遅延ロードのための作業をどのように行うか考えてください。

ありがとうございます。どんな助けもありがとうございます。

Answer 1

あなたはいくつかのサードパーティのライブラリを使用することができます。The-UWP-Tools-List

これは、次のコマンドによって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> 

：あなたは私のコードサンプルを見ることができました

PM> Install-Package Marduk.Controls

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

Answer 2

カスタムサイズのグリッド

• 単一のグリッドを表すために（基本ウィジェットクラスを拡張）、独自のウィジェットを作成します。グリッドのサイズは、その中のテキストの量または望むその他の要素によって決まります。
• テーブルまたはグリッドレイアウトを使用します。 Gtk +については、こちらをご覧ください：https://developer.gnome.org/gtk3/stable/GtkGrid.html
• カスタムウィジェットをレイアウトに添付してください。

レイジーローディング

• Iは、ユーザが底部（または頂部又は左端または右端）に達したときに信号を発する知っているすべてのツールキットのスクロールウィジェット。
• その信号をキャッチして、カスタムグリッドウィジェットをレイアウトに追加します。少し効率の悪いレイアウトの内容を再表示する必要があるかもしれません。おそらくマルチスレッドを使用します。
• Gtk + 3では、エッジに達したときにScrolledWindowによってedge-reachedが送出されます。

これは一般的な概念です。すばらしいGoogle検索では、GUIツールキットの選択がどのように上記のようになるかが明らかになります。