Silverlight ItemsControl вертикальная полоса прокрутки с использованием обертки в качестве ControlTemplate - PullRequest
Новая
       38

Silverlight ItemsControl вертикальная полоса прокрутки с использованием обертки в качестве ControlTemplate

2 голосов
/ 15 марта 2010

У меня есть коллекция элементов, каждый из которых имеет имя и вложенную коллекцию изображений. Я хочу отобразить Аккордеон, где каждый элемент представляет каждый из 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>

Но тогда моя оболочка становится очень маленькой, и я вижу только маленькую вертикальную полосу прокрутки. Есть идеи? Большое спасибо.

Редактировать: Я полагал, что оболочка теряет свою ширину при использовании в шаблоне элемента управления

Следует использовать следующим образом: 

                               <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, чтобы окружить докладчика средством просмотра прокрутки. Тем не менее, не повезло: /

1 Ответ

11 голосов
/ 15 марта 2010

Работает отлично. У меня было два разных Аккордеона на одной странице, и я проверял изменения своего кода в том, чей код я не трогал. Иногда нужно сделать паузу, пойти погулять, а затем посмотреть на весь экран. Правильный код - последний: 

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