2015-04-16 25 views
0

我想在wpf中创建一个列表视图,该列表视图具有一列项目并在视图中水平列出这些项目。我一直无法找到答案,并一直在寻找相当长的一段时间。也许我只是不能为此提出正确的搜索词。换句话说,我想在一个列中创建一个字符串列表(即文件名),当列到达列表视图的高度时,而不是创建垂直滚动条,创建另一个列第一列右侧。然后如果有足够的项目,就会出现水平滚动条。比如Windows Explorer如何在“List”设置中进行操作。需要创建一个列表视图,在列表中水平地列出一列项目

这是我到目前为止。

<ListView x:Name="dirListView" HorizontalAlignment="Left" Height="181" Margin="10,43,0,0" VerticalAlignment="Top" Width="572" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Single" ItemsSource="{Binding Items}" SelectedItem="{Binding Path=selectedItem}"> 
     <ListView.Resources> 
      <DataTemplate x:Key="TwoParts"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="Auto"/> 
         <ColumnDefinition/> 
        </Grid.ColumnDefinitions> 
        <Image Grid.Column="0" Source="{Binding image}"/> 
        <TextBlock Grid.Column="1" Text="{Binding directory}"/> 
       </Grid> 
      </DataTemplate> 
     </ListView.Resources> 
     <ListView.View> 
      <GridView> 
       <GridView.Columns> 
        <GridViewColumn CellTemplate="{StaticResource TwoParts}" /> 
       </GridView.Columns> 
      </GridView> 
     </ListView.View> 
    </ListView> 

任何帮助将不胜感激。

UPDATE

我接过一看下面的答案,以及在后的回答以下建议,并用新的XAML走了过来。我也试图将数据绑定到此列表视图,它似乎不工作。如上所见,我将数据绑定到DataTemplate,并将模板的关键字引用到GridViewColumn。这似乎并没有像这种新建议的方式一样工作。这是我现在拥有的。

的XAML代码:

<ListView x:Name="dirListView" HorizontalAlignment="Left" Height="181" Margin="10,43,0,0" VerticalAlignment="Top" Width="572" ScrollViewer.VerticalScrollBarVisibility="Disabled" SelectionMode="Single" ItemsSource="{Binding Items}" SelectedItem="{Binding Path=selectedItem}"> 
     <ListView.ItemTemplate> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Image Source="{Binding image}"/> 
        <TextBlock Text="{Binding directory}"/> 
       </StackPanel> 
      </DataTemplate> 
     </ListView.ItemTemplate> 
     <ListView.ItemsPanel> 
      <ItemsPanelTemplate> 
       <WrapPanel Orientation="Vertical"      
          MaxHeight="{Binding (FrameworkElement.ActualHeight), RelativeSource={RelativeSource AncestorType=ScrollContentPresenter}}" 
          ItemWidth="{Binding (ListView.View).ItemWidth, RelativeSource={RelativeSource AncestorType=ListView}}" 
          MinHeight="{Binding ItemHeight, RelativeSource={RelativeSource Self}}" 
          ItemHeight="{Binding (ListView.View).ItemHeight, RelativeSource={RelativeSource AncestorType=ListView}}"/> 
      </ItemsPanelTemplate> 
     </ListView.ItemsPanel> 
    </ListView> 

包含数据绑定到ListView的数据类:

public class ControlViewModel : INotifyPropertyChanged 
{ 
    public event PropertyChangedEventHandler PropertyChanged; 

    private ObservableCollection<MyDirItems> _items; 
    public ObservableCollection<MyDirItems> Items 
    { 
     get { return _items; } 
     set { _items = value; NotifyPropertyChanged("Items"); } 
    } 

    private MyDirItems _selectedItem; 
    public MyDirItems selectedItem 
    { 
     get { return _selectedItem; } 
     set { _selectedItem = value; NotifyPropertyChanged("selectedItem"); } 
    } 

    public ControlViewModel() 
    { 
     _selectedItem = new MyDirItems(); 
     Icon icon = FileChooser.GetFolderIcon(IconSize.Small, FolderType.Closed); 
     ImageSource i_source = (ImageSource)CommonUtility.ImageUtil.ImageConvert(icon.ToBitmap()); 
     _items = new ObservableCollection<MyDirItems>(); 
     Items.Add(new MyDirItems { directory = "Directory1.DIR", image = i_source }); 
     Items.Add(new MyDirItems { directory = "Directory2.DIR", image = i_source }); 
    } 

    protected void NotifyPropertyChanged(string propertyName) 
    { 
     PropertyChangedEventHandler handler = this.PropertyChanged; 
     if (handler != null) 
     { 
      var e = new PropertyChangedEventArgs(propertyName); 
      handler(this, e); 
     } 
    } 

} 

最后,数据对象:

public class MyDirItems 
{ 
    public string directory { get; set; } 
    public ImageSource image { get; set; } 
} 

同样。任何帮助将不胜感激。提前致谢。

+0

我看了下面答案中链接的帖子中的建议答案,但数据绑定似乎不起作用。我只是得到一个空白列表视图。 – sorton9999

回答

0

您可以更改ListView的ItemsPanelTemplate以使用WrapPanel。将它的Orientation设置为Vertical,我认为这将完成您要查找的内容。

查看this post了解更多信息。