Question

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

我怎样才能让它看起来像这样？ enter image description here

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

<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>

Answer 1

听起来你想要的是带有自定义ItemsPanel的ListBox。

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

上面的代码段将ListBox配置为使用WrapPanel作为布局提供程序或＆＃34; ItemsPanel＆＃34;对于它要呈现的物品。从那里实现自定义项容器样式和/或自定义数据模板可能是有意义的。如果您使用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 =＆＃34; constant＆＃34;）或者我在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>

需要注意的一些事项：如果可能，请考虑使用Commands而不是事件，它们会导致更松散的耦合。引入Behavior甚至可能是有意义的，如果它自己的行为是你可能在项目中有其他地方或重新使用是理想的。

Answer 2

好的，所以看起来你遇到困难的是你的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的其他一些细微差别，但他的技术仍然合理，或者应该是：）

WPF控件以模拟Outlook附件 - 视图

2 个答案: