Problème de Wrappanel et de scrollviewer

Question

Je dois afficher Buttons, que l'utilisateur peut utiliser pour ajouter des contrôles. Buttons sont catégorisés en groupes. Voici le XAML j'ai -

<ScrollViewer 
    VerticalScrollBarVisibility="Auto"> 
    <GroupBox 
     Name="maingroup" 
     Header="Click To Add Controls" 
     BorderBrush="Transparent"> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition 
        Height="*" /> 
       <RowDefinition 
        Height="90" /> 
      </Grid.RowDefinitions> 

      <GroupBox 
       Grid.Row="0" 
       Name="groupVarControls" 
       Header="{Binding Path=GroupBoxHeaderText, Mode=OneWay}"> 
       <ScrollViewer 
        HorizontalScrollBarVisibility="Auto" 
        VerticalScrollBarVisibility="Hidden"> 
        <WrapPanel 
         Margin="7,7,0,0" 
         AllowDrop="False"> 
         <syncfusion:RibbonButton 
          SizeForm="Large" 
          Name="BarControl" 
          LargeIcon="Images\Bar.png" 
          Label="Bar" 
          AllowDrop="True"> 
         </syncfusion:RibbonButton> 

        <!-- 10 More buttons --> 

        </WrapPanel> 
       </ScrollViewer> 
      </GroupBox> 

      <GroupBox 
       Grid.Row="1" 
       Name="groupVarControls2" 
       Visibility="{Binding Path=GroupBoxVisibility, Mode=OneWay}" 
       Header="Click to Add control"> 
       <ScrollViewer 
        VerticalScrollBarVisibility="Hidden" 
        HorizontalScrollBarVisibility="Auto"> 
        <WrapPanel 
         Margin="7,7,0,0" 
         AllowDrop="False"> 
         <syncfusion:RibbonButton 
          SizeForm="Large" 
          Name="ClockControl" 
          AllowDrop="False" 
          LargeIcon="Images\Clock.png" 
          Label="Clock" 
          Click="ClockControl_Click" /> 

         <!-- More buttons --> 

        </WrapPanel> 
       </ScrollViewer> 
      </GroupBox> 
     </Grid> 
    </GroupBox> 
</ScrollViewer> 

Je veux un ScrollBar commun pour les deux WrapPanel verticale « s et individuel ScrollBar horizontaux » s. Avec ces barres de défilement XAML ne viennent pas correctement, ScrollViewer provoque l'emballage être "désactivé", il laisse juste mes contrôles dans un seul row (ou column), et utilise un ScrollBar tout de suite.

Je ne peux pas donner un fixe widht à WrapPanel « s que ce contrôle sera affiché dans une DockPanel (semblable à la boîte à outils VS) et l'utilisateur peut cnage il.

Des idées?

Answer 1

Ce code affichera une barre de défilement verticale et deux barres de défilement horizontales si nécessaire. Dans votre code, vous devez définir la largeur minimale pour les panneaux de retour à la largeur de l'enfant le plus large. Vous pouvez probablement le faire facilement dans votre code qui gère lorsqu'un utilisateur ajoute ou supprime un contrôle.

<ScrollViewer 
    VerticalScrollBarVisibility="Auto"> 
    <StackPanel> 
     <GroupBox Header="Box 1"> 
      <ScrollViewer 
       VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto"> 
       <WrapPanel 
        MinWidth="200" 
        Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}"> 
        <Button Width="200" Height="50" /> 
        <Button Width="150" Height="50" /> 
        <Button Width="160" Height="50" /> 
        <Button Width="170" Height="50" /> 
        <Button Width="180" Height="50" /> 
       </WrapPanel> 
      </ScrollViewer> 
     </GroupBox> 
     <GroupBox Header="Box 2"> 
      <ScrollViewer 
       VerticalScrollBarVisibility="Hidden" HorizontalScrollBarVisibility="Auto"> 
       <WrapPanel 
        MinWidth="200" 
        Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ActualWidth}"> 
        <Button Width="200" Height="50" /> 
        <Button Width="150" Height="50" /> 
        <Button Width="160" Height="50" /> 
        <Button Width="170" Height="50" /> 
        <Button Width="180" Height="50" /> 
       </WrapPanel> 
      </ScrollViewer> 
     </GroupBox> 
    </StackPanel> 
</ScrollViewer>