Wrap overflow items in listview to new row?

Question

Hi.

I have a listview where i add custom items, after changing and trying alot things, no matter how many items i have added
the items will not put overflow items to the next row when it runs out of space in the window width. Also, all items seems to be the same height as the control.
What am i doing wrong, or missing?

I add items like this:

        private void PopulateAvatars()
        {
            this.Avatars.ItemsSource = new AvatarClass[]
        {
            new AvatarClass { AvatarName = "Animals_1", ImageData = LoadImage("images/Avatars/Animals/Animals_1.png") },
            new AvatarClass { AvatarName = "Animals_2", ImageData = LoadImage("images/Avatars/Animals/Animals_2.png") },
            new AvatarClass { AvatarName = "Animals_3", ImageData = LoadImage("images/Avatars/Animals/Animals_3.png") },
            new AvatarClass { AvatarName = "Animals_4", ImageData = LoadImage("images/Avatars/Animals/Animals_4.png") },
            new AvatarClass { AvatarName = "Animals_5", ImageData = LoadImage("images/Avatars/Animals/Animals_5.png") }
        };
        }

To this listview

    <UniformGrid ScrollViewer.CanContentScroll="True">
        <ListView x:Name="Avatars" 
        SelectionMode="Single"
        SelectedItem="{Binding SelectedItem}"
        ScrollViewer.HorizontalScrollBarVisibility="Disabled"
        >
            
            
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <UniformGrid Columns="5" Grid.IsSharedSizeScope="True" ScrollViewer.CanContentScroll="True" UseLayoutRounding="True" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid MaxHeight="128px" MinHeight="128px" Height="128px" Width="128px" Grid.IsSharedSizeScope="True">
                            <Grid.RowDefinitions>
                            <RowDefinition Height="96px" SharedSizeGroup="FirstRow"/>
                            <RowDefinition Height="auto" SharedSizeGroup="SecondRow" />
                            </Grid.RowDefinitions>
                            <Image Grid.Row="0" MaxHeight="96px" MaxWidth="128px" MinWidth="128px" MinHeight="96px" Width="128px" Height="96px" Source="{Binding ImageData}" VerticalAlignment="Top" />
                            <TextBlock Grid.Row="1" Text="{Binding AvatarName}" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                        </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </UniformGrid>

Answer 1

Hi,@Stefan Grönberg . Welcome Microsoft Q&A.

I test your code results as follows. Could you point out where the problem is, and what is your expected result?

using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using System.Windows.Media;
using System.Windows.Media.Imaging;

namespace ListViewDemo
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;

            this.Avatars.ItemsSource = new AvatarClass[]
      {
            new AvatarClass { AvatarName = "Animals_1", ImageData = LoadImage("C:
            new AvatarClass { AvatarName = "Animals_2", ImageData = LoadImage("C:
            new AvatarClass { AvatarName = "Animals_3", ImageData = LoadImage("C:
            new AvatarClass { AvatarName = "Animals_4", ImageData = LoadImage("C:
            new AvatarClass { AvatarName = "Animals_5", ImageData = LoadImage("C:
            new AvatarClass { AvatarName = "Animals_6", ImageData = LoadImage("C:
      };
        }
        private ImageSource LoadImage(string v)
        {
             ImageSource _imageLocation = new BitmapImage(new Uri(v));
        
            return _imageLocation;
        }

        private AvatarClass selecedItme;
        public AvatarClass SelectedItem
        {
            get { return selecedItme; }
            set
            {
                if (selecedItme != value)
                {
                    selecedItme = value;
                    OnPropertyChanged("SelectedItem");
                }
            }
        }
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string name = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
        }
    }
    public class AvatarClass
    {

        public string AvatarName { get; set; }
        public ImageSource ImageData { get; set; }
    }
}

Update:

 <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Orientation="Horizontal"  Grid.IsSharedSizeScope="True" ScrollViewer.CanContentScroll="True"/>
                    <!--<UniformGrid Columns="5" Grid.IsSharedSizeScope="True" ScrollViewer.CanContentScroll="True"
                                 UseLayoutRounding="True" />-->
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

The result:

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Answer 2

Ah, i finally found where i was missing/doing it wrong. I used UniformGrid instead of WrapPanel in the <ItemsPanelTemplate>

                   <!-- <UniformGrid Columns="5" Grid.IsSharedSizeScope="True" ScrollViewer.CanContentScroll="True" UseLayoutRounding="True" />-->
                    <WrapPanel Orientation="Horizontal" Grid.IsSharedSizeScope="True" ScrollViewer.CanContentScroll="True" />