Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

WPF: multi-column listbox / listview?

Tags:

list

listview

wpf

I'd like to create a list in WPF that displays data in several columns, like Explorer display a list of files in 'Small icons' view mode:

Multi-column list box

Each item must be represented by a DataTemplate and the scrolling is supposed to be horizontal. How do I make such a list?

like image 357
Impworks Avatar asked Jun 13 '13 12:06

Impworks


3 Answers

You need to change ItemsPanel of your ListBox to WrapPanel with vertical Orientation and disable vertical scroll bar on your ListBox Something like this:

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ItemsSource="{Binding=MyItems}">
  <ListBox.ItemTemplate>
      <DataTemplate>
          <!--my item template-->
      </DataTemplate>
  </ListBox.ItemTemplate>
  <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
          <WrapPanel Orientation="Vertical"/>
      </ItemsPanelTemplate>
  </ListBox.ItemsPanel>
</ListBox>
like image 105
dkozl Avatar answered Nov 16 '22 22:11

dkozl


try something like below.

<ListBox>
 <ListBox.ItemsPanel>
  <ItemsPanelTemplate>
   <UniformGrid Columns="3"/>
  </ItemsPanelTemplate>
 </ListBox.ItemsPanel>

 <DataTemplate>
      <!--my item template-->
 </DataTemplate>
</ListBox>

can use this link

like image 37
ar.gorgin Avatar answered Nov 16 '22 21:11

ar.gorgin


try something like below.

<ListView ItemsSource="{Binding Files}" >
            <ListView.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Width="{Binding (FrameworkElement.ActualWidth), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}"
                       ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}"
                       MinWidth="{Binding ItemWidth, RelativeSource={RelativeSource Self}}"
                       ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}" />
                </ItemsPanelTemplate>
            </ListView.ItemsPanel>
            <ListView.View>
                <GridView >
                    <GridView.Columns>
                        <GridViewColumn DisplayMemberBinding="{Binding Name}" />
                    </GridView.Columns>
                </GridView>
            </ListView.View>
        </ListView>

code behind sample.

 public partial class Window1 : Window
    {
        public Window1()
        {
            InitializeComponent();
            Files = new ObservableCollection<FileInfo>();
            var files = new System.IO.DirectoryInfo("C:\\Windows\\").GetFiles();
            foreach (var item in files)
            {
                Files.Add(item);
            }
            this.DataContext = this;
        }

        public ObservableCollection<FileInfo> Files { get; set; }
    }
like image 5
JSJ Avatar answered Nov 16 '22 21:11

JSJ