Cách làm cho WrapPanel hiển thị thanh cuộn dọc khi trẻ có đầy hoặc không có ScrollViewer

Question

Tôi có một WrapPanel và các nút được lập trình và thêm vào làm con của WrapPanel. Vì vậy, tôi muốn hiển thị thanh cuộn dọc khi WrapPanel có đầy đủ các nút (trẻ em) để có thể thêm nhiều nút liên tục hơn.

Nếu chúng ta cần một thanh cuộn hiển thị, chúng ta có phải mang theo ScrollViewer không? Không có cách nào mà không có ScrollViewer? Những gì tôi muốn có được, bởi vì WrapPanel có kích thước nhỏ, tôi muốn một thanh cuộn chỉ được hiển thị khi cần thiết (như đầy đủ của trẻ em).

Mã của tôi là đơn giản như dưới đây (WrapPanel bên lưới và lưới là bên trong TabControl)

Rất cám ơn luôn cho sự xuất sắc của mình.

Cập nhật: Tôi đã gặp khó khăn trong việc tìm giải pháp trên internet trong vài ngày. Và tôi đã thử đặt WrapPanel bên trong ScrollViewer. Tuy nhiên, mặc dù tôi đặt VerticalScroll để tự động, thanh cuộn dọc luôn được hiển thị ngay cả khi WrapPanel không có bất kỳ con nào.

Hơn nữa, khi tôi cố ý làm cho WrapPanel đầy trẻ em (nút), thanh cuộn dọc của ScrollViewer không cung cấp tính khả dụng của cuộn xuống. Và các nút ở dòng dưới cùng của WrapPanel hiển thị cắt và nhiều hơn nữa, tôi không thể cuộn xuống để xem ngoài nút ở dòng dưới cùng. Tôi đã thực hiện các nút được đặt ngoài dòng dưới cùng của WrapPanel cố ý.

Có hoặc không có, tôi muốn thanh cuộn dọc được hiển thị khi chỉ cần (đầy đủ trẻ em). Có vẻ như rất dễ thực hiện. Nhưng rất khó để làm cho nó hoạt động đúng.

Giải pháp: được cung cấp bởi ông Henk Holterman

    <DropShadowEffect/> 
       </Button.Effect> 
      </Button> 
      <WrapPanel x:Name="WrapPanelGreen" HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="232" UseLayoutRounding="True" ScrollViewer.CanContentScroll="True" ScrollViewer.VerticalScrollBarVisibility="Auto"/> 
     </Grid> 
    </TabItem> 
</TabControl> 

Và dưới đây là mã đơn giản của tôi mà làm cho nút lập trình và thêm như một đứa trẻ của WrapPanel.

for (int k = 0; k < Overviews.Length; k++) 
{ 
    Button btnoverviewcontent = new Button(); 

    ToolTip tt = new ToolTip(); 
    tt.Content = "Press this button if you want to modify or delete."; 
    btnoverviewcontent.ToolTip = tt; 

    btnoverviewcontent.Cursor = Cursors.Hand; 

    SolidColorBrush mySolidColorBrush = new SolidColorBrush(); 
    mySolidColorBrush.Color = Color.FromArgb(255, 101, 173, 241); 
    btnoverviewcontent.Background = mySolidColorBrush; 

    btnoverviewcontent.Effect = new DropShadowEffect 
    { 
     Color = new Color { A = 255, R = 0, G = 0, B = 0 }, 
     Direction = 315, 
     ShadowDepth = 5, 
     Opacity = 1 
    }; 

    btnoverviewcontent.Padding = new Thickness(3, 3, 3, 3); 
    btnoverviewcontent.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch; 
    TextBlock textBlock = new TextBlock() 
    { 
     Text = Overviews[k], 
     TextAlignment = TextAlignment.Left, 
     TextWrapping = TextWrapping.Wrap, 

    }; 

    btnoverviewcontent.Content = textBlock; 
    btnoverviewcontent.BorderThickness = new Thickness(0, 0, 0, 0); 
    btnoverviewcontent.FontStretch = FontStretches.UltraExpanded; 
    btnoverviewcontent.Margin = new Thickness(5, 5, 5, 5); 

    WrapPanelGreen.Children.Add(btnoverviewcontent); 
    btnoverviewcontent.Click += new RoutedEventHandler(OnOverviewClick); 

Answer 1

Ý tưởng trong WPF là mọi thành phần chỉ có công việc riêng và nếu bạn muốn hành vi nhất định, bạn kết hợp nhiều thành phần để tạo chế độ xem bạn đang tìm kiếm.

Điều này có nghĩa là để có thanh cuộn cho bảng điều khiển, bạn sẽ phải quấn nó trong thành phần ScrollViewer. Đó là mục đích của ScrollViewer và đó là giải pháp duy nhất (sane) để giải quyết vấn đề này.

---

Tuy nhiên, mặc dù tôi đặt verticalscroll để ô tô, các verticalscrollbar luôn được biểu hiện ngay cả khi Wrappanel không có bất kỳ đứa trẻ [...]

Sau đó, bạn dường như được sử dụng ScrollViewer không chính xác hoặc gói phần tử sai. Nó sẽ giống như thế này:

<ScrollViewer VerticalScrollBarVisibility="Auto"> 
    <WrapPanel> 
     <!-- Any number of components here --> 
    </WrapPanel> 
</ScrollViewer> 

Nếu tôi đặt nhiều nhãn mẫu bên trong, thì tôi sẽ có thanh cuộn ngay khi cửa sổ không đủ lớn để hiển thị tất cả. Nhưng nếu có đủ chỗ, thanh cuộn sẽ không được hiển thị.

Lưu ý rằng chính ScrollViewer cần phải có kích thước phù hợp trong phần tử gốc, vì vậy hãy đảm bảo rằng nó không lớn hơn vùng hiển thị. Nó cũng cần thiết cho WrapPanel (hoặc bất kỳ phần tử nào khác mà bạn quấn với ScrollViewer) để có chiều rộng và chiều cao tự động. Nếu không, với kích thước cố định, kích thước của bảng điều khiển sẽ không thay đổi khi bạn sửa đổi nội dung của bảng và do đó trạng thái cuộn sẽ không thay đổi.

---

Xem ví dụ hoàn chỉnh này với một số năng động của các yếu tố:

<Window x:Class="WpfExampleApplication.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Height="300" Width="200"> 
    <ScrollViewer VerticalScrollBarVisibility="Auto"> 
     <WrapPanel Name="panel"> 
      <Button Click="Button_Click">Add child</Button> 
     </WrapPanel> 
    </ScrollViewer> 
</Window> 

Mã-đằng sau:

public partial class MainWindow : Window 
{ 
    public MainWindow() 
    { 
     InitializeComponent(); 
    } 

    private void Button_Click(object sender, RoutedEventArgs e) 
    { 
     Label element = new Label() { Content = "This is some example content" }; 
     panel.Children.Add(element); 
    } 
}