listbox with items width following control width

Question

I'm building a WPF user control that contains a list whose items are displayed as an icon and a text. However, the texts have various lengths and I want them to scroll horizontally. Instead, I want the items have the same width as the user control, and the text be displayed wrapped (therefore with a vertical scroll).

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. Notice that the control width varies with the window width.

enter image description here

What I want is than when the items width would exceed the list width, the text is wrapped (and I get a vertical scroll for the list).

I have tried adding ScrollViewer.HorizontalScrollBarVisibility="Disabled" for the listbox, but the only result is that the scroll is hidden. The list items still have the same width (which is longer than the control's width).

If I wasn't clear enough, just take a look at how twitter shows the tweets in a list, and that's 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's important the the list and it's items resize automatically when the window resizes.

score 3 · Answer 1 · edited May 23 '17 at 11:45

3

On the TextBlock try:

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

If you need to take some off then see my answer to this question

GridViewColumn Width Adjustment

edited May 23 '17 at 11:45

Community

1
1

answered Nov 22 '12 at 14:48

paparazzo

44,497
23
105
176

score 2 · Accepted Answer · answered Nov 23 '12 at 07:45

I was able 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>

listbox with items width following control width

2 Answers2