Question

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

但是后来我的报道非常小，我只能看到一个小的垂直滚动条有任何想法吗？非常感谢。

编辑：我认为当在controltemplate中使用时，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>

我正在使用一个wrappanel作为项目面板，我正在使用ControlTemplate用一个scrollviewer包围演示者。不过，没有运气：/

Answer 1

它工作得很好。我在同一页面上有两个不同的Accordions，我正在检查我的代码中没有触及的代码更改。有时你需要暂停，散步然后看整个屏幕。正确的代码是最后一个：

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

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

1 个答案: