1

ListView を MS Outlook の Attachment-Control のように見せようとしています。私はすでに水平スクロールを取得していますが、まだ 1 つのアイテムしか表示されません。

どうすればこのように見えるようになりますか? ここに画像の説明を入力

これまでに達成したこと:

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

上記のスニペットは、WrapPanelをレイアウト プロバイダーとして使用するか、表示するアイテムの「ItemsPanel」を使用するように ListBox を構成します。そこから、カスタム アイテム コンテナ スタイルやカスタム データ テンプレートを実装することが理にかなっている場合があります。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>

この図を完成させるために、高さが親レイアウト コントロール (RowDefinition Height="constant" の Grid.Row = 1) または 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 に答える