Silverlight ItemsControl barre de défilement verticale, en utilisant un WrapPanel comme ControlTemplate

Question

j'ai une collection d'éléments, chacun ayant un nom et une sous-collection des taches d'image. Je souhaite afficher un accordéon, chaque élément représentant chacun des MainElements. à l'intérieur de chaque élément, j'affiche les images dans la sous-collection de MainElement. L'accordéon est redimensionné par l'utilisateur, donc j'utilise un wrappanel pour présenter les images. Quand l'accordéon est assez large, les images se réordonnent en ajustant autant que posible dans chaque rangée. le problème survient lorsque le wrappanel n'affiche qu'une image par ligne (car il n'y a pas assez d'espace pour plus), la liste d'images continue, mais je ne vois pas toutes les images, car elles ne rentrent pas dans la hauteur du contrôle. J'ai besoin d'une barre de défilement verticale à afficher à l'intérieur de l'AccordionItem pour pouvoir faire défiler la liste des images. Donc, voici mon code:

<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 suggère que j'entourer mon WrapPanel avec un ScrollViewer, comme celui-ci

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

Mais mon WrapPanel devient vraiment petit et je ne peux voir un petit vertical barre de défilement Des idées? Merci beaucoup.

Edit: je me suis dit quela WrapPanel perd sa largeur lorsqu'elle est utilisée dans le ControlTemplate

Il doit être utilisé comme suit:

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

Quoi qu'il en soit, j'ai essayé d'ajouter la ligne ScrollViewer.VerticalScrollBarVisibility = "Visible" mais je suis coincé à nouveau.

Edité à nouveau:

Maintenant, mon WrapPanel ressemble à ceci:

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

J'utilise un WrapPanel que le panneau des éléments, et je suis en utilisant ControlTemplate pour entourer le présentateur avec un ScrollViewer . Pourtant, pas de chance:/

Answer 1

Cela fonctionne parfaitement. J'avais deux accordéons différents sur la même page, et je vérifiais mes changements de code dans celui dont je ne touchais pas le code. Parfois, vous devez faire une pause, faire une promenade et ensuite regarder l'écran entier. Le bon code est le dernier:

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