Wrappanel和scrollviewer問題

Question

我需要顯示Buttons，用戶可以使用它來添加控件。 Buttons按組分類。這是我遇到的XAML -

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

我希望有一個垂直ScrollBar常見的兩種WrapPanel的和個人的水平ScrollBar的。由於這個XAML滾動條未能正確顯示，ScrollViewer會導致包裝被「禁用」，它只會將我的控件保存在一個row（或column）中，並立即使用ScrollBar。

我不能給一個固定的widht到WrapPanel的，因爲這控制將在DockPanel（類似於VS工具箱）被顯示，並且用戶可以cnage它。

任何想法？

Answer 1

此代碼將在需要時顯示一個垂直滾動條和兩個水平滾動條。在您的代碼中，您需要將包裝面板的MinWidth設置爲最寬的孩子的寬度。您可能可以輕鬆地在您的代碼中處理用戶添加或刪除控件的操作。

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