Silverlight ItemsControl垂直滚动条，使用wrappanel作为ControlTemplate

Question

我有一个元素集合，每个元素都有一个名称和一个图像 blob 子集合。 我想显示一个手风琴，其中每个项目代表每个 MainElements。在每个元素内，我显示所述 MainElement 的子集合中的图像。 用户可以调整手风琴的大小，因此我使用包装面板来呈现图像。当手风琴足够宽时，图像会重新排序，以适应每行尽可能多的图像。 当包装面板每行仅显示一个图像（因为没有足够的空间容纳更多图像）时，问题就出现了，图像列表继续，但我看不到所有图像，因为它们不适合控件的高度。 我需要在 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>

但是然后我的包装面板变得非常小，我只能看到一个小的垂直滚动条 有什么想法吗？ 多谢。

编辑：我认为在控制模板中使用时，wrappanel 会失去宽度

它应该按如下方式使用：

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

我使用包装面板作为项目面板，并使用 ControlTemplate 用滚动查看器包围演示者。尽管如此，还是没有运气：/

Answer 1

它工作得很好。我在同一页面上有两个不同的手风琴，并且我正在检查我没有触及的代码的代码更改。
有时你需要停下来走一走，然后看看整个屏幕。
正确的代码是最后一个：

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