All geek questions in one place

Listbox with item width after control width

I am creating a WPF user control containing a list whose elements are displayed as an icon and text. However, the texts have different lengths, and I want them to scroll horizontally. Instead, I want the elements to have the same width as the user control, and the text should be displayed wrapped (therefore, with vertical scrolling).

Here is my xaml

<UserControl x:Class="Demo.NotificationsWidget" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Border CornerRadius="2" BorderThickness="1" BorderBrush="LightGray" Background="White"> <DockPanel LastChildFill="True"> <TextBlock Text="Alerts" DockPanel.Dock="Top" Margin="5" FontSize="15"/> <ListBox Name="alertsList" DockPanel.Dock="Bottom" Margin="5" Grid.IsSharedSizeScope="True" HorizontalContentAlignment="Stretch" BorderThickness="0" ItemsSource="{Binding}"> <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="0,1,0,0" BorderBrush="Gray" Margin="5,0,5,5"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="col1" Width="40" /> <ColumnDefinition SharedSizeGroup="col2" Width="*" /> </Grid.ColumnDefinitions> <Image Grid.Column="0" Source="{Binding Image}" Width="24" Height="24" Margin="5" /> <StackPanel Grid.Column="1" Orientation="Vertical" Margin="5"> <TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontWeight="Bold" /> <TextBlock Text="{Binding Text}" TextWrapping="Wrap" /> </StackPanel> </Grid> </Border> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </DockPanel> </Border> </UserControl>

Here is an image with a window containing this user control. Note that the control width depends on the width of the window.

enter image description here

What I want is that when the width of the elements exceeds the width of the list, the text will be wrapped (and I will get a vertical scroll for the list).

I tried adding ScrollViewer.HorizontalScrollBarVisibility="Disabled" for the list, but the only result is hiding the scroll. List items are still the same width (the length of which is greater than the width of the control).

If I weren’t clear enough, just take a look at how Twitter shows tweets on the list and what I want to do. Thanks.

UPDATE . This is basically what I want to achieve:

enter image description here

I was able to do this by explicitly setting the width of each column in the data template grid.

 <Grid.ColumnDefinitions> <ColumnDefinition SharedSizeGroup="col1" Width="40" /> <ColumnDefinition SharedSizeGroup="col2" Width="200" /> </Grid.ColumnDefinitions>

However, it is important that the list and its elements automatically change when the window is resized.

+4
source share
2 answers

I managed to achieve the desired result by replacing the Grid with a DockPanel .

  <ListBox.ItemTemplate> <DataTemplate> <Border BorderThickness="0,1,0,0" BorderBrush="Black" Margin="0,0,0,5"> <DockPanel LastChildFill="True"> <Image DockPanel.Dock="Left" Source="{Binding Image}" Width="24" Height="24" Margin="0,5,0,5" VerticalAlignment="Top"/> <StackPanel DockPanel.Dock="Right" Orientation="Vertical" Margin="5,2,0,0" VerticalAlignment="Top"> <TextBlock Text="{Binding Title}" TextWrapping="Wrap" FontWeight="Bold" /> <TextBlock Text="{Binding Text}" TextWrapping="Wrap" FontSize="12" Margin="0,2,0,0" /> </StackPanel> </DockPanel> </Border> </DataTemplate> </ListBox.ItemTemplate>
+2
source

In the text block try:

 Width="{Binding ElementName=alertsList, Path=ActualWidth}">

If you need to get distracted, see my answer to this question

GridViewColumn Width Adjustment

+2
source

Source: https://habr.com/ru/post/1447746/

More articles:


All Articles