Paksa TextBlock untuk membungkus di WPF ListBox

94

Saya memiliki kotak daftar WPF yang menampilkan pesan. Ini berisi avatar di sisi kiri dan nama pengguna serta pesan ditumpuk secara vertikal di sebelah kanan avatar. Tata letaknya baik-baik saja sampai teks pesan harus membungkus kata, tetapi saya mendapatkan bilah gulir horizontal di kotak daftar.

Saya telah mencari di Google dan menemukan solusi untuk masalah serupa, tetapi tidak ada yang berhasil.

<ListBox HorizontalContentAlignment="Stretch"  ItemsSource="{Binding Path=FriendsTimeline}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Border BorderBrush="DarkBlue" BorderThickness="3" CornerRadius="2" Margin="3" >
                    <Image Height="32" Width="32"  Source="{Binding Path=User.ProfileImageUrl}"/>
                </Border>
                <StackPanel Orientation="Vertical">
                    <TextBlock Text="{Binding Path=User.UserName}"/>
                    <TextBlock Text="{Binding Path=Text}" TextWrapping="WrapWithOverflow"/> <!-- This is the textblock I'm having issues with. -->
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
Eric Haskins
sumber

Jawaban:

132

Isi dari TextBlockdapat dibungkus menggunakan properti TextWrapping. Alih-alih StackPanel, gunakan DockPanel/ Grid. Satu hal lagi - set ScrollViewer.HorizontalScrollBarVisibilityproperti ke Disablednilai untuk ListBox.

Diperbarui Hiddenmenjadi Disabledberdasarkan komentar dari Matt. Terima kasih Matt.

Nash
sumber
38
Saya pikir Anda perlu mengatur ScrollViewer.HorizontalScrollBarVisibility ke "Disabled" daripada "Hidden" - jika tidak, ListBox akan tetap mencoba menggulir secara horizontal, Anda tidak akan melihat scrollbar.
Matt Hamilton
9

Masalahnya mungkin tidak terletak di ListBox. TextBlock tidak akan membungkus, jika salah satu kontrol induk menyediakan cukup ruang, sehingga tidak perlu dibungkus. Ini mungkin disebabkan oleh kontrol ScrollViewer.

Martin Moser
sumber
1
Terima kasih! dalam kasus saya menonaktifkan pengguliran horizontal dalam tampilan daftar memperbaiki masalah ScrollViewer.HorizontalScrollBarVisibility = "Nonaktif"
Ateik
2

Jika Anda ingin mencegah TextBlock berkembang, dan Anda ingin agar ukurannya pas dengan kotak daftar, Anda harus menyetel lebarnya secara eksplisit.

Untuk mengubahnya secara dinamis, ini berarti bukan nilai tetap, tetapi Anda perlu mengikatnya ke elemen induk yang tepat di pohon visual. Anda bisa mendapatkan sesuatu seperti ini:

<ListBox ItemsSource="{Binding MyItems}" Name="MyListBox">

  <ListBox.Resources>
    <Style TargetType="ListBoxItem">
      <Setter Property="Width" 
              Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ScrollContentPresenter}, Path=ActualWidth}" />
    </Style>
  </ListBox.Resources>

  <ListBox.ItemTemplate>
    <DataTemplate>
      <TextBlock Text="{Binding Title}" TextWrapping="Wrap" />
    </DataTemplate>
  </ListBox.ItemTemplate>

</ListBox>

Jika tidak berhasil, coba temukan elemen yang tepat (yang harus diikat ke apa) dengan Live Visual Tree di Visual Studio.

eldor
sumber