2

要素のコレクションがあり、それぞれに名前と画像ブロブのサブコレクションがあります。各項目が各 MainElements を表すアコーディオンを表示したいと考えています。各要素内で、上記の MainElement のサブコレクションに画像を表示します。アコーディオンはユーザーによってサイズ変更されるため、画像の表示にはラップパネルを使用します。アコーディオンの幅が十分に広い場合、画像は各行にできるだけ多く収まるように並べ替えられます。ラップパネルが行ごとに1つの画像しか表示しない場合に問題が発生します（それ以上のスペースがないため）、画像リストは続きますが、コントロールの高さに収まらないため、すべての画像を表示できません. 画像リストを下にスクロールできるように、AccordionItem 内に垂直スクロールバーを表示する必要があります。だから、ここに私のコードがあります：

<layoutToolkit:Accordion Width="Auto" Height="Auto" ItemsSource="{Binding MainElementCollection}">
    <layoutToolkit:Accordion.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding MainElementName}" />
        </DataTemplate>
    </layoutToolkit:Accordion.ItemTemplate>
    <layoutToolkit:Accordion.ContentTemplate>
        <DataTemplate>
            <ItemsControl ItemsSource="{Binding SubElementCollection}" ScrollViewer.VerticalScrollBarVisibility="Auto" >
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <controlsToolkit:WrapPanel />
                        </ControlTemplate>
                    </ItemsControl.Template>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <Image Margin="2" Width="150" Source="{Binding PreviewImage, Converter={StaticResource ImageConverter}}" />
                            </Grid>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
        </DataTemplate>
    </layoutToolkit:Accordion.ContentTemplate>
</layoutToolkit:Accordion>

http://www.silverlightshow.net/tips/How-to-add-scrollbars-to-ItemsControl.aspxは、このようにラップパネルをスクロールビューアーで囲む必要があることを示唆しています

                <ItemsControl.Template>
                    <ControlTemplate>
                        <scrollviewer>
                        <controlsToolkit:WrapPanel />
                        </scrollviewer>
                    </ControlTemplate>
                </ItemsControl.Template>

しかし、その後、ラップパネルが非常に小さくなり、小さな垂直スクロールバーしか表示されなくなります。何かアイデアはありますか? どうもありがとう。

編集：コントロールテンプレートで使用すると、ラップパネルの幅が失われることがわかりました

次のように使用する必要があります。

                               <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                            <controlsToolkit:WrapPanel ScrollViewer.VerticalScrollBarVisibility="Visible" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>

とにかく、私は ScrollViewer.VerticalScrollBarVisibility="Visible" 行を追加しようとしましたが、また立ち往生しています。

再度編集：

今、私のラップパネルは次のようになります。

                    <ItemsControl ItemsSource="{Binding StageVideos}">
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                    <controlsToolkit:WrapPanel />
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Image Margin="2" Width="150" Cursor="Hand" MouseLeftButtonDown="videoPreview_MouseLeftButtonDown" Tag="{Binding}" Source="{Binding PreviewImage, Converter={StaticResource ImageConverter}}" />
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                        <ItemsControl.Template>
                            <ControlTemplate>
                                <ScrollViewer VerticalScrollBarVisibility="Visible">
                                    <ItemsPresenter />
                                </ScrollViewer>
                                </ControlTemplate>
                        </ItemsControl.Template>
                    </ItemsControl>

アイテム パネルとして wrappanel を使用しており、ControlTemplate を使用してプレゼンターをスクロールビューアーで囲んでいます。それでも、運が悪い:/

4

1 に答える 1

11

それは完全に機能しています。同じページに2つの異なるアコーディオンがあり、コードに触れていないコードの変更をチェックしていました。時々、一時停止し、散歩に出かけ、画面全体を見る必要があります。正しいコードは最後のコードです:

               <ItemsControl ItemsSource="{Binding StageVideos}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                                <controlsToolkit:WrapPanel />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Image Margin="2" Width="150" Cursor="Hand" MouseLeftButtonDown="videoPreview_MouseLeftButtonDown" Tag="{Binding}" Source="{Binding PreviewImage, Converter={StaticResource ImageConverter}}" />
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.Template>
                        <ControlTemplate>
                            <ScrollViewer VerticalScrollBarVisibility="Visible">
                                <ItemsPresenter />
                            </ScrollViewer>
                            </ControlTemplate>
                    </ItemsControl.Template>
                </ItemsControl>
于 2010-03-15T15:38:36.273 に答える