Efficient listview in uwp

Question

I want to create a grid like this: I decided to use instead of a grid 6 listview, my problem is that the loading of pages is very slow. Here is the code (obscene):

I created a user control:

namespace ProjectVea.Support
{
    public sealed partial class Control1: UserControl
    {
        public ObservableCollection<Support.Ora> coll { get; private set; } = new ObservableCollection<Support.Ora>();

        public Control1()
        {
            this.initializeCollection(); 
            this.InitializeComponent();    
        }

        private void initializeCollection()
        {
            Ora ite;
           for(int i = 0; i < 19; i++)
            {
                ite = new Ora(i.ToString());
                coll.Add(ite);
            }
        }
    }
}

in xaml I simply duplicated the listview:

<UserControl>
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="0">
            <ListView Name="list0" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="1">
            <ListView Name="list1" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="2">
            <ListView Name="list2" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="3">
            <ListView Name="list3" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="4">
            <ListView Name="list4" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
        <StackPanel Grid.Column="5">
            <ListView Name="list5" ItemsSource="{x:Bind coll}" SelectionMode="None" ScrollViewer.VerticalScrollBarVisibility="Hidden">
                <ListView.ItemContainerStyle>
                    <Style TargetType="ListViewItem">
                        <Setter Property="HorizontalContentAlignment" Value="Center"/>
                    </Style>
                </ListView.ItemContainerStyle>
                <ListView.ItemTemplate>
                    <DataTemplate x:DataType="local:Ora">
                        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{x:Bind descrizione}"/>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackPanel>
    </Grid>

</UserControl>

ora class:

namespace ProjectVea.Support
{
    public class Ora
    {
        public string descrizione { get; set; }
        public Ora(string descrizione)
        {
            this.descrizione = descrizione;
        }
    }
}

There are techniques to use xaml in the most efficient?

I have a ObservableCollection, each listview refers to the collection so I thought using the listview it easier and more effective than using a simple grid. — Andrea485, Oct 07 '15 at 08:23
The question is unclear. But notifiying the UI only once may help: [See this question on stackoverflow](http://stackoverflow.com/questions/13302933/how-to-avoid-firing-observablecollection-collectionchanged-multiple-times-when-r). — ventiseis, Oct 08 '15 at 06:09
Would like to have 6 columns of 20 elements each, and I want to handle each column independently of the other, with the gridview how can I do this? I used 6 listview just because I can handle them one by one, but the page load is too slow, my question is how can I create this? — Andrea485, Oct 09 '15 at 08:36
Check the performance compiled with .Net Native before you follow either path. It may well be that you encounter performance problems then. — Amenti, May 14 '16 at 07:34

score 2 · Answer 1 · edited Feb 23 '17 at 18:57

why not try something like this

<ListView ItemsSource="{Binding Items}">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid MaximumRowsOrColumns="6" Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="Name" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Efficient listview in uwp

1 Answers1