TextBlock TextWrapping không gói

Question

Khi tôi đặt một TextBlock bên trong của một ngang ngang StackPanel nó không bọc. Tôi nhận ra rằng điều này là bởi vì chiều rộng có sẵn của StackPanel là PositiveInfinity nhưng có cách giải quyết nào không?

Bố cục của tôi phức tạp hơn nhiều so với mẫu này vì vậy tôi không thể xóa StackPanel hoặc Hướng ngang. Tôi chỉ cố gắng tái tạo ví dụ đơn giản nhất có thể thể hiện hành vi.

<StackPanel Orientation="Horizontal"> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" /> 
     <Rectangle Width="50" Height="50" Fill="Red" VerticalAlignment="Top" /> 
     <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </StackPanel> 

Cập nhật: Chiều rộng của TextBlock phải động. Tôi cần nó chảy với cửa sổ khi nó được thay đổi kích thước.

Cập nhật 2: Đã thêm một phần tử khác vào StackPanel vì tôi cần các trẻ em đặt ngang.

Cập nhật 3 (Giải pháp): Thay thế StackPanel bằng DockPanel.

<DockPanel> 
    <DockPanel DockPanel.Dock="Top"> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" DockPanel.Dock="Left" /> 
     <Rectangle Width="50" Height="50" Fill="Red" VerticalAlignment="Top" DockPanel.Dock="Left" /> 
     <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </DockPanel> 
</DockPanel> 

Answer 1

Đó là vì bạn đang sử dụng Hướng ngang trên StackPanel. Điều đó có nghĩa là StackPanel đang cung cấp đầy đủ chiều rộng cho mỗi điều khiển con và sau đó đặt chúng theo chiều ngang - ngay cả khi điều đó có nghĩa là vượt quá chiều rộng được giới hạn/hiển thị của nó. Bởi vì không có gì để hạn chế chiều rộng của TextBlock, nó không bọc.

Nếu bạn chuyển sang Hướng dọc thì công việc đóng gói, nhưng tôi đoán có lý do để bạn chỉ định cách khác. Bạn có thể hiển thị bố cục bạn đang cố gắng đạt được không?

Answer 2

Bạn có thể sử dụng lưới thay vì StackPanel (như được giải thích không giới hạn nội dung của nó.). Một lưới điện cho phép kiểm soát nhiều hơn đối với bố cục các mục so với StackPanel và nếu hình ảnh của bạn bị thu gọn thì cột 'tự động' sẽ có chiều rộng 0.

<DockPanel> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="*"/> 
     </Grid.ColumnDefinitions> 
     <Rectangle Width="50" Height="50" Fill="Blue" VerticalAlignment="Top" /> 
     <TextBlock TextWrapping="Wrap" Grid.Column="1" 
      Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
    </Grid> 

</DockPanel> 

Answer 3

Tôi có vài giải pháp cho vấn đề này.

1) ràng buộc chiều rộng của cha mẹ thành chiều rộng của khối chữ. (im trường hợp sau đây tôi coi usercontrol là cha mẹ).

<UserControl x:Class="WpfApplication1.MyWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Name="userctrl"> 
    <DockPanel> 
     <StackPanel Orientation="Horizontal" DockPanel.Dock="Top" HorizontalAlignment="Left" > 
      <TextBlock TextWrapping="Wrap" MaxWidth="{Binding ElementName=userctrl,Path=ActualWidth}" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 

     </StackPanel>  
    </DockPanel> 
</UserControl> 

2) giải pháp khác là sử dụng lưới thay vì stackpanel

<UserControl x:Class="WpfApplication1.MyWindow" 
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" Name="userctrl"> 
    <DockPanel> 
     <Grid DockPanel.Dock="Top" HorizontalAlignment="Left" > 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition></ColumnDefinition> 
       <ColumnDefinition></ColumnDefinition> 
      </Grid.ColumnDefinitions> 
      <TextBlock TextWrapping="Wrap" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 
      <TextBlock TextWrapping="Wrap" Grid.Column="1" Margin="20 0 0 0" 
       Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lectus, viverra ut lobortis vel, mollis eget lectus. Suspendisse laoreet consequat ultrices. Curabitur ultricies, tortor feugiat porttitor faucibus, lorem eros pretium nisl, eu ullamcorper mauris tortor sit amet augue." /> 

     </Grid>  
    </DockPanel> 
</UserControl> 

Answer 4

Nếu bạn giống như tôi và đã tự hỏi tại sao TextBlock vẫn không gói sau khi xác định một Width.

Hãy thử thêm một MaxWidth để TextBlock với giá trị tương tự giống như Width,

này dừng việc kiểm soát phát triển trong Width khi ứng dụng đã bắt đầu.

Hy vọng điều này sẽ hữu ích!