1

我试图让 ListView 看起来像 MS Outlook 附件控件。我已经进行了水平滚动，但它仍然只显示一行中的一项。

我怎样才能让它看起来像这样？ 在此处输入图像描述

到目前为止我所取得的成就：

<Grid x:Name="grdAttachments"
      Grid.Row="4"
      Grid.Column="1"
      Grid.ColumnSpan="3">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MaxHeight="45" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="65" />
        <ColumnDefinition Width="15" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <TextBlock Grid.Column="0"
               Margin="3,0,0,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Cursor="Hand"
               Text="Angefügt:" />

    <ScrollViewer Grid.Row="0" Grid.Column="2">
        <ListBox x:Name="libAttachments"
                 Background="Transparent"
                 ItemsSource="{Binding Attachments}"
                 MouseDoubleClick="lvAttachments_MouseDoubleClick">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,10,0" Orientation="Horizontal">
                        <Image Source="{Binding MimeTypeIcon}" Stretch="None" />
                        <TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
                        <StackPanel.ContextMenu>
                            <ContextMenu>
                                <ContextMenu.Items>
                                    <MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
                                        <MenuItem.Icon>
                                            <Image Source="/Images/magnifier.png" Stretch="None" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                    <MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
                                        <MenuItem.Icon>
                                            <Image Source="/Images/disk-black.png" Stretch="None" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                </ContextMenu.Items>
                            </ContextMenu>
                        </StackPanel.ContextMenu>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Grid>
4

2 回答 2

1

听起来您想要的是一个带有自定义 ItemsPanel的ListBox 。

    <ListBox>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ListBox>

上面的代码片段将 ListBox 配置为使用WrapPanel作为布局提供程序或将“ItemsPanel”用于要呈现的项目。从那里实现自定义项目容器样式和/或自定义数据模板可能是有意义的。如果您使用 MVVM 模式和数据绑定到集合（最好是可观察的），您可以像上面那样轻松应用 DataTemplate

    <DataTemplate>
        <StackPanel Margin="0,0,10,0" Orientation="Horizontal">
            <Image Source="{Binding MimeTypeIcon}" Stretch="None" />
            <TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
        </StackPanel>
    </DataTemplate>

为了完成这张图片，可以使用滚动查看器，只要它的高度受父布局控件（Grid.Row = 1，其中 RowDefinition Height="constant"）或我在 ScrollViewer 上设置的显式高度限制。

我基于您的最终解决方案如下所示：

     <ScrollViewer HorizontalScrollBarVisibility="Disabled">
        <ListBox
        ItemsSource="{Binding Attachments}"
        MouseDoubleClick="lvAttachments_MouseDoubleClick"
        SelectionMode="Single">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>

            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Margin="0,0,10,0" Orientation="Horizontal">
                        <Image Source="{Binding MimeTypeIcon}" Stretch="None" />
                        <TextBlock Margin="5,0,0,0" Text="{Binding File.Name}" />
                        <StackPanel.ContextMenu>
                            <ContextMenu>
                                <ContextMenu.Items>
                                    <MenuItem Click="btnOpenAttachment_Click" Header="Öffnen">
                                        <MenuItem.Icon>
                                            <Image Source="/Images/magnifier.png" Stretch="None" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                    <MenuItem Click="btnSaveAttachment_Click" Header="Speichern unter">
                                        <MenuItem.Icon>
                                            <Image Source="/Images/disk-black.png" Stretch="None" />
                                        </MenuItem.Icon>
                                    </MenuItem>
                                </ContextMenu.Items>
                            </ContextMenu>
                        </StackPanel.ContextMenu>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>

需要注意的几点：如果可能，请考虑使用命令而不是事件，它们会导致更松散的耦合。如果行为本身是您在项目中可能有其他地方的行为，或者可重用性是理想的，那么引入行为甚至可能是有意义的。

于 2012-10-05T16:22:47.270 回答
0

好的，所以看起来你被卡住的地方是你的 ListBox 仍然以单列方式推送东西，并且缺乏给你一些东西来触发比如点击事件的能力。所以我想到的是更像这样的东西；

<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="300" HorizontalContentAlignment="Stretch">

   <ItemsControl ItemsSource="{Binding Collection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
           <StackPanel Margin="5,0" Orientation="Horizontal">
                       <Image Source="{Binding MimeTypeIcon}" Stretch="None" />
                       <HyperlinkButton Margin="5,0,0,0" Text="{Binding File.Name}" />
                   </StackPanel>          
        </DataTemplate>
    </ItemsControl.ItemTemplate>
   </ItemsControl>
</ScrollViewer>

尽管我看到了您的点击次数，但我不确定您试图用放大镜和磁盘做什么，但是您可以根据需要将它们添加到此布局中，不过​​只是一个注释，我只是在会议之间随意处理所以从来没有建造它，但应该可以正常工作。如果没有，我们将再次插入它。主要区别在于更改为超链接按钮，以便您单击以及与 Firoso 的其他一些细微差别，但他在技术上仍然是合理的，或者无论如何应该是:)

于 2012-10-05T19:44:28.130 回答