задержка с переходом на страницу содержит 3 списка - PullRequest
0 голосов
/ 11 июня 2019

Я новичок в Xamarin. Формы, поэтому, пожалуйста, извините.Я разрабатываю приложение, используя страницы навигации. Главная страница приложения содержит 3 горизонтальных списка просмотра. Каждый раз, когда я перехожу на другую страницу, затем возвращаюсь на главную страницу, приложение зависает около минуты, заново создавая все списки.

Я попытался включить функцию создания списков в функцию «Появляется», но загрузка страницы все еще очень медленная

Вот код для главной страницы

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:border="clr-namespace:Syncfusion.XForms.Border;assembly=Syncfusion.Core.XForms"
             xmlns:listview="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:button="clr-namespace:Syncfusion.XForms.Buttons;assembly=Syncfusion.Buttons.XForms"
             xmlns:rotator="clr-namespace:Syncfusion.SfRotator.XForms;assembly=Syncfusion.SfRotator.XForms"          
             xmlns:ListCollection="clr-namespace:System.Collections.Generic;assembly=mscorlib"
             xmlns:rating="clr-namespace:Syncfusion.SfRating.XForms;assembly=Syncfusion.SfRating.XForms"
             x:Class="GDG6OCT.Views.HomePage"
             NavigationPage.HasNavigationBar="False"
             FlowDirection="RightToLeft">

    <StackLayout>

        <ScrollView>
            <StackLayout Padding="0">
                <rotator:SfRotator x:Name="rotator" HorizontalOptions="FillAndExpand" NavigationDelay="2000" EnableLooping="True"
                                   DotPlacement="None" EnableAutoPlay="true" HeightRequest="160">
                    <rotator:SfRotator.DataSource>
                        <ListCollection:List x:TypeArguments="rotator:SfRotatorItem">

                            <rotator:SfRotatorItem>
                                <rotator:SfRotatorItem.ItemContent>
                                    <Image Source="slider.png" Margin="0"/>
                                </rotator:SfRotatorItem.ItemContent>
                            </rotator:SfRotatorItem>

                            <rotator:SfRotatorItem>
                                <rotator:SfRotatorItem.ItemContent>
                                    <Image Source="slider.png" Margin="0"/>
                                </rotator:SfRotatorItem.ItemContent>
                            </rotator:SfRotatorItem>

                            <rotator:SfRotatorItem>
                                <rotator:SfRotatorItem.ItemContent>
                                    <Image Source="slider.png" Margin="0"/>
                                </rotator:SfRotatorItem.ItemContent>
                            </rotator:SfRotatorItem>

                        </ListCollection:List>
                    </rotator:SfRotator.DataSource>
                </rotator:SfRotator>

                <Label Text="جميع الاقسام" HorizontalOptions="StartAndExpand" Margin="20,30,20,0"
                            Style="{StaticResource MainLabel}"/>

                <listview:SfListView  x:Name="CatList" Margin="10,0" ItemSize="100"
                                ItemSpacing="5" Orientation="Horizontal" HeightRequest="100">

                    <listview:SfListView.ItemTemplate>
                        <DataTemplate>
                            <button:SfButton HasShadow="True" BackgroundColor="{Binding BackgroudColor}"
                                    Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"
                                    FontAttributes="Bold" FontFamily="{StaticResource Second}" Clicked="SfButton_Clicked"
                                    FontSize="11"/>
                        </DataTemplate>
                    </listview:SfListView.ItemTemplate>
                </listview:SfListView>

                <Label Text="أحدث المقررات الدراسية" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
                            Style="{StaticResource MainLabel}"/>

                <Grid>
                    <!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
                                                   AnimationType="Gear " 
                                                   IsBusy="True"
                                                   TextColor="#343694"
                                                   ViewBoxWidth="50"
                                                   ViewBoxHeight="50" />-->
                    <listview:SfListView  x:Name="CourseList"  Margin="10,0" ItemSize="100"
                                  ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">
                        <listview:SfListView.ItemTemplate>
                            <!--<DataTemplate>
                                <Image Source="{Binding CourseImage}">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
                                    </Image.GestureRecognizers>
                                </Image>
                            </DataTemplate>-->
                            <DataTemplate>
                                <Frame CornerRadius="2"
                                       BorderColor="Transparent"
                                       BackgroundColor="Transparent"
                                       Padding="0">
                                    <StackLayout>
                                        <Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
                                            <Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
                                        </Frame>
                                        <Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
                                               FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
                                        <StackLayout Orientation="Horizontal" HorizontalOptions="Start">
                                            <rating:SfRating  x:Name="rating" Value="5" ItemCount="5" ItemSize="10" 
                                                         ItemSpacing="1"  HorizontalOptions="Center"
                                                        VerticalOptions="Center">
                                                <rating:SfRating.RatingSettings>
                                                    <rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
                                                </rating:SfRating.RatingSettings>
                                            </rating:SfRating>

                                            <Label Text="{Binding  Rating, StringFormat='({0})'}"  FontFamily="{StaticResource Second}"
                                               VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
                                        </StackLayout>
                                        <StackLayout Orientation="Horizontal">
                                            <Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray" 
                                           HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
                                                   FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
                                            <Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red" 
                                                   FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
                                        </StackLayout>
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                                        </StackLayout.GestureRecognizers>
                                    </StackLayout>
                                </Frame>
                            </DataTemplate>
                        </listview:SfListView.ItemTemplate>
                    </listview:SfListView>
                </Grid>

                <Label Text="المقررات الدراسية الاشهر" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
                            Style="{StaticResource MainLabel}"/>

                <Grid>
                    <!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
                                                   AnimationType="Gear " 
                                                   IsBusy="True"
                                                   TextColor="#343694"
                                                   ViewBoxWidth="50"
                                                   ViewBoxHeight="50" />-->
                    <listview:SfListView  x:Name="CourseList1"  Margin="10,0" ItemSize="100"
                                  ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">

                        <listview:SfListView.ItemTemplate>
                            <DataTemplate>
                                <Frame CornerRadius="2"
                                       BorderColor="Transparent"
                                       BackgroundColor="Transparent"
                                       Padding="0">
                                    <StackLayout>
                                        <Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
                                            <Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
                                        </Frame>
                                        <Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
                                               FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
                                        <StackLayout Orientation="Horizontal" HorizontalOptions="Start">
                                            <rating:SfRating  x:Name="rating" Value="5" ItemCount="5" ItemSize="10" 
                                                         ItemSpacing="1"  HorizontalOptions="Center"
                                                        VerticalOptions="Center">
                                                <rating:SfRating.RatingSettings>
                                                    <rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
                                                </rating:SfRating.RatingSettings>
                                            </rating:SfRating>

                                            <Label Text="{Binding  Rating, StringFormat='({0})'}"  FontFamily="{StaticResource Second}"
                                               VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
                                        </StackLayout>
                                        <StackLayout Orientation="Horizontal">
                                            <Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray" 
                                           HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
                                                   FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
                                            <Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red" 
                                                   FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
                                        </StackLayout>
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                                        </StackLayout.GestureRecognizers>
                                    </StackLayout>
                                </Frame>
                            </DataTemplate>
                        </listview:SfListView.ItemTemplate>
                    </listview:SfListView>

                </Grid>

                <Label Text="المقررات الدراسية المقترحة" HorizontalOptions="StartAndExpand" Margin="20,20,20,0"
                            Style="{StaticResource MainLabel}"/>

                <Grid>
                    <!--<busyindicator:SfBusyIndicator x:Name="busyIndicator1" InputTransparent="True" Grid.Row="0"
                                                   AnimationType="Gear " 
                                                   IsBusy="True"
                                                   TextColor="#343694"
                                                   ViewBoxWidth="50"
                                                   ViewBoxHeight="50" />-->
                    <listview:SfListView  x:Name="CourseList2"  Margin="10,0" ItemSize="100"
                                  ItemSpacing="4" Orientation="Horizontal" HeightRequest="180">

                        <listview:SfListView.ItemTemplate>
                            <DataTemplate>
                                <Frame CornerRadius="2"
                                       BorderColor="Transparent"
                                       BackgroundColor="Transparent"
                                       Padding="0">
                                    <StackLayout>
                                        <Frame HasShadow="True" Padding="0" CornerRadius="0" BackgroundColor="Transparent">
                                            <Image Source="{Binding Pro_IMG}" WidthRequest="30" HeightRequest="80" Aspect="AspectFill"/>
                                        </Frame>
                                        <Label Text="{Binding Pro_Name}" FontAttributes="Bold" HorizontalOptions="Start"
                                               FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
                                        <StackLayout Orientation="Horizontal" HorizontalOptions="Start">
                                            <rating:SfRating  x:Name="rating" Value="5" ItemCount="5" ItemSize="10" 
                                                         ItemSpacing="1"  HorizontalOptions="Center"
                                                        VerticalOptions="Center">
                                                <rating:SfRating.RatingSettings>
                                                    <rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
                                                </rating:SfRating.RatingSettings>
                                            </rating:SfRating>

                                            <Label Text="{Binding  Rating, StringFormat='({0})'}"  FontFamily="{StaticResource Second}"
                                               VerticalOptions="Center" FontSize="8" HorizontalOptions="Center"/>
                                        </StackLayout>
                                        <StackLayout Orientation="Horizontal">
                                            <Label Grid.Row="3" Grid.ColumnSpan="2" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray" 
                                           HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
                                                   FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
                                            <Label Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End" Margin="8,0,0,0" FontFamily="{StaticResource Second}" TextColor="Red" 
                                                   FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
                                        </StackLayout>
                                        <StackLayout.GestureRecognizers>
                                            <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
                                        </StackLayout.GestureRecognizers>
                                    </StackLayout>
                                </Frame>
                            </DataTemplate>
                        </listview:SfListView.ItemTemplate>
                    </listview:SfListView>

                </Grid>

            </StackLayout>
        </ScrollView>

        <Grid Padding="0" ColumnSpacing="-15" BackgroundColor="{StaticResource DGrey}" 
               VerticalOptions="EndAndExpand" HorizontalOptions="Fill" 
               HeightRequest="65" Margin="0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="65"/>
            </Grid.RowDefinitions>
            <Button Grid.Column="0" BackgroundColor="#ef3e42" Image="home1.png"  TextColor="White"                                                 
                        Text="الرئيسية" ContentLayout="Top,1" FontSize="11" FontFamily="{StaticResource Second}"/>

            <Button Grid.Column="1" Clicked="GotoSearchPage" TextColor="White" BackgroundColor="Transparent" 
                        Image="search1.png" FontFamily="{StaticResource Second}"
                        Text="البحث" ContentLayout="Top, 5" FontSize="10"/>

            <Button Grid.Column="2"  TextColor="White" BackgroundColor="Transparent" 
                        Image="play.png"  FontFamily="{StaticResource Second}" Clicked="GotoMCoursesPage"
                        Text="كورساتى" ContentLayout="Top, 5" FontSize="10"/>

            <Button Grid.Column="3" TextColor="White" BackgroundColor="Transparent" Image="fav2.png" Text="المفضلة" Clicked="GotoFavPage"                            
                    FontFamily="{StaticResource Second}" ContentLayout="Top, 5" FontSize="10"/>

            <Button Grid.Column="4" TextColor="White" BackgroundColor="Transparent"  FontFamily="{StaticResource Second}" Clicked="GotoAccPage"
                        Image="pers1.png" Text="الحساب" ContentLayout="Top, 5" FontSize="10"/>
        </Grid>

    </StackLayout>
</ContentPage>

ивот код для бэкэнда

using GDG6OCT.Models;
using Syncfusion.XForms.Buttons;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace GDG6OCT.Views
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class HomePage : ContentPage
    {
        public ObservableCollection<Category> Categories = new ObservableCollection<Category>();
        public ObservableCollection<Course> Courses = new ObservableCollection<Course>();

        public HomePage ()
        {
            InitializeComponent ();    
        }

        protected override void OnAppearing()
        {
            creatList();
            base.OnAppearing();
        }

         void creatList()
        {
            Categories.Add(new Category { Name = "إذاعة", BackgroudColor = Color.Purple });
            Categories.Add(new Category { Name = "صحافة إعلام", BackgroudColor = Color.Orange });
            Categories.Add(new Category { Name = "نظم معلومات", BackgroudColor = Color.Green });
            Categories.Add(new Category { Name = "سياحة وفنادق", BackgroudColor = Color.Pink });
            Categories.Add(new Category { Name = "إذاعة ", BackgroudColor = Color.Yellow });
            Categories.Add(new Category { Name = "الصحافة والاعلام", BackgroudColor = Color.Red });
            Categories.Add(new Category { Name = "نظم معلومات ", BackgroudColor = Color.Purple });
            Categories.Add(new Category { Name = "الصحافة", BackgroudColor = Color.Orange });
            Categories.Add(new Category { Name = "سياحة وفنادق ", BackgroudColor = Color.Green });
            CatList.ItemsSource = Categories;

            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "تقنيات إعلامية", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "علم النفس العام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            Courses.Add(new Course { Pro_IMG = "Featured.jpg", Pro_Name = "مدخل الى فن الإعلام", numberInStock = 2000, Pro_Price = "2500", Rating = 13.5f });
            CourseList.ItemsSource = Courses;
            CourseList1.ItemsSource = Courses;
            CourseList2.ItemsSource = Courses;
        }
        private void GotoSearchPage(object sender, EventArgs e)
        {
            Navigation.PushAsync(new SearchPage());
        }

        private void GotoMCoursesPage(object sender, EventArgs e)
        {
            Navigation.PushAsync(new MyCrsPage());

        }

        private void GotoFavPage(object sender, EventArgs e)
        {
            Navigation.PushAsync(new FavPage());

        }

        private void GotoAccPage(object sender, EventArgs e)
        {
            Navigation.PushAsync(new AccPage());

        }

        private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
        {
            var itemT = (Course)((StackLayout)sender).BindingContext;

            CatList.SelectedItem = null;

            await Navigation.PushAsync(new CoursePage(itemT));
        }

        private async void SfButton_Clicked(object sender, EventArgs e)
        {
            var itemT = (Category)((SfButton)sender).BindingContext;

            CatList.SelectedItem = null;

            await Navigation.PushAsync(new CategPage(itemT));
        }
    }
}

UPDATE

Я переписал dataTemplate списка, используя Grid вместо вложенного stackLayout, и очистил код от маленького бита

<DataTemplate>
    <Grid ColumnSpacing="0" RowSpacing="0" Padding="0">
        <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="*"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
           <RowDefinition Height="2.5*"/>
           <RowDefinition Height="1.2*"/>
           <RowDefinition Height="0.4*"/>
           <RowDefinition Height="0.4*"/>
         </Grid.RowDefinitions>
           <Frame Grid.Row="0" Grid.ColumnSpan="2" HasShadow="True" Padding="0" BackgroundColor="Transparent">
             <Image Source="{Binding Pro_IMG}" Aspect="AspectFill"/>
           </Frame>
           <Label Grid.Row="1" Grid.ColumnSpan="2" Text="{Binding Pro_Name}" FontAttributes="Bold" 
                                               FontSize="14" TextColor="Black" FontFamily="{StaticResource Second}"/>
           <rating:SfRating Grid.Row="2" Grid.Column="0" x:Name="rating" Value="5" ItemCount="5" ItemSize="9" 
                                                        ItemSpacing="1" VerticalOptions="Center">
           <rating:SfRating.RatingSettings>
               <rating:SfRatingSettings RatedFill="#f4bd01" RatedStrokeWidth="0" UnRatedStrokeWidth="1" />
           </rating:SfRating.RatingSettings>
           </rating:SfRating>
           <Label Grid.Row="2" Grid.Column="1" Text="{Binding  Rating, StringFormat='({0})'}"  FontFamily="{StaticResource Second}"
                                               FontSize="8" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
           <Label Grid.Row="3" Grid.Column="0" Text="{Binding Pro_Price, StringFormat='{0}EGP'}" TextColor="Gray" 
                                          HorizontalOptions="StartAndExpand" FontSize="6" VerticalTextAlignment="Center"
                                                   FontFamily="{StaticResource Second}" TextDecorations="Strikethrough"/>
           <Label Grid.Row="3" Grid.Column="1" Text="{Binding numberInStock, StringFormat='{0}EGP'}" HorizontalOptions="End"
                                           FontFamily="{StaticResource Second}" TextColor="Red" Margin="8,0,0,0"
                                                   FontAttributes="Bold" VerticalTextAlignment="Center" FontSize="8"/>
           <Grid.GestureRecognizers>
              <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />
           </Grid.GestureRecognizers>
           </Grid>
           </DataTemplate>

Ответы [ 2 ]

3 голосов
/ 11 июня 2019

Вам действительно нужно заново создавать списки?

Если вы вставляете новую страницу в стек, то при всплывающем сообщении у вас все еще остается активная главная страница, поэтому нет необходимости заново создавать представление.

Если вы хотите, вы можете иметь bool, указывающий, были ли загружены элементы, тогда OnAppearing будет загружать элементы только один раз.

Пример:

private bool _loadedItems=false;
public HomePage ()
{
    InitializeComponent ();    
}

protected override void OnAppearing()
{

    base.OnAppearing();
    if(!_loadedItems)
    {
        creatList();
        _loadedItems = true;
    }

}
0 голосов
/ 12 июня 2019

Я бы настоятельно рекомендовал пересмотреть ваш макет.Во-первых, три представления списка на одном экране - не самая желательная вещь с точки зрения пользовательского опыта, особенно на устройствах с небольшими экранами.

Если это возможно в соответствии с требованиями вашего приложения, я бы предложил использоватьTabbedPage с каждым ListView, доступным на его собственной вкладке.

Следующая вещь, извините, если выразить это так, но компоновка, которую вы используете в своих ячейках ListView, является ужасным выбором с точки зрения производительности.StackLayout нужно гораздо больше циклов компоновки, чтобы определить его окончательные размеры, насколько я видел, вы складываете четыре из них в одну ячейку и, что еще хуже, один StackLayout содержит другие.

Это занимает довольно много циклов компоновки, пока механизм компоновки xamarin окончательно не вычислит окончательный размер этой ОДНОЙ (!) Ячейки представления, и это время умножится на количество элементов в свойстве ItemsSource вашего ListView.

Так что вы можете с этим поделать?Вы можете довольно легко заменить свое дерево стековых макетов одной сеткой (совет Pro: не используйте «Авто» в определениях высоты и ширины столбца и столбца, так как для этого также потребуется больше циклов компоновки, «*» или «2 *»).и т. д. должен делать красиво).

Выберите правильное количество столбцов и строк для отображения ваших данных и поместите все свои элементы управления, изображения, метки и т. Д. В качестве дочерних элементов этой сетки, затем используйте Grid.Row, Grid.Column, Grid.RowSpan и Grid.ColumnSpan для этих элементов по порядку помещает их в нужное положение.

Этот способ сэкономит вам несколько циклов компоновки, поэтому ваше представление должно быть готово к отображению намного быстрее, чем сейчас, особенно потому, что циклы компоновки уменьшены наэти оптимизации также умножаются на количество ваших данных, но на этот раз в вашу пользу!

...