Silverlight ItemsControl 垂直滚动条，使用包裹面板作为 ControlTemplate答案

【问题标题】：Silverlight ItemsControl vertical scrollbar, using a wrappanel as ControlTemplateSilverlight ItemsControl 垂直滚动条，使用包裹面板作为 ControlTemplate
【发布时间】：2010-03-15 12:00:13
【问题描述】：

我有一个元素集合，每个元素都有一个名称和一个图像块的子集合。我想显示一个 Accordion，每个项目代表每个 MainElement。在每个元素内部，我在所述 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>

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

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

应该这样使用：

                               <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 用滚动查看器围绕演示者。尽管如此，还是没有运气：/

【问题讨论】：

标签： silverlight itemscontrol scrollviewer itemtemplate wrappanel

【解决方案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>

【讨论】：