Карта Просмотр дизайна материалов в Windows Universal Apps

Question

Я хочу разработать приложение для блогов аналогичного дизайна, например, Universal MSN News App Microsoft. Мне нужен подобный дизайн, как показано на рисунке ниже.

Я заглянул в это приложение для новостей и обнаружил, что множество интересных функций интегрировано с дизайном Pivot.

Несколько вопросов у меня есть:

• Как сделать динамический макет вид карты, как это в Новости приложения. Это приложение имеет динамический вид сетки. Некоторые GridView больше, некоторые небольшие. Как отрегулировать эти виды сетки рядом друг с другом , даже если они имеют разную высоту. Есть ли образцы для этого?

• Lazy Loading выполняется для загрузки каналов при прокрутке вниз. Любая идея, как получить работу для ленивой загрузки.

Спасибо. Любая помощь приветствуется.

Answer 1

Вы можете использовать некоторые сторонние библиотеки: 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

Answer 2

нестандартного размера сетки

• Создайте свой собственный виджет (расширить базовый класс виджета), чтобы представлять единую сетку. Размер сетки будет определяться количеством текста в нем или любым другим фактором, который вы пожелаете.
• Используйте таблицу или сетку. Для Gtk + см. Здесь: https://developer.gnome.org/gtk3/stable/GtkGrid.html
• Прикрепите свои пользовательские виджеты к макету.

Отложенной загрузки

• прокрутка виджет всех наборов инструментов я знаю излучать сигнал, когда пользователь достигнет дна (или верхний или левый край или правый край).
• Поймайте этот сигнал и добавьте дополнительные виджеты сетки в макет. Возможно, вам придется повторно отобразить содержимое макета, которое немного неэффективно; возможно, использовать многопоточность.
• В Gtk + 3, достигнутый край испускается ScrolledWindow, когда достигнут какой-либо край.

Это общая концепция. Быстрый поиск Google покажет, как делает ваш выбор инструментария GUI выше.