Question

I have a listBox and add data to it like so:

for (int x = 0; x < Orchestrator.Instance.getTopicCount(); x++)
{
   listTopics.Items.Add(Orchestrator.Instance.getTopic(x));
}

But I need to be able to do things like have text wrapping and divider lines, so I would like to do it the XAML.

Microsoft shows this:

<TextBlock Width="248" Height="24" 
Text="{Binding ElementName=lbColor, Path=SelectedItem.Content, 
Mode=OneWay}" 
x:Name="tbSelectedColor" 
Background="{Binding ElementName=lbColor, Path=SelectedItem.Content, 
Mode=OneWay}"/>

But I don’t really understand it. Here is my XAML:

<ListBox Height="261" HorizontalAlignment="Left" Margin="352,38,0,0" Name="listContent"     VerticalAlignment="Top" Width="391" Grid.Column="1" HorizontalContentAlignment="Left" VerticalContentAlignment="Center" MaxWidth="391" ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>

How am I able to achieve what I want? (Divider lines, text wrapping so I don’t have to scroll horizontally, and data binding)

Answer 1

To specify the layout of each item, there are two different things you can change: the ItemContainerStyle, which provides the ControlTemplate used for each ListBoxItem, or the ItemTemplate, which provides the DataTemplate that is used to render each data item. The ItemTemplate is simpler to use if you’re just getting started and haven’t gotten the hang of ControlTemplates yet.

To get your text to wrap, there are two key things to do. Turn off the default horizontal scrolling of ListBox (which you got already), and set the TextWrapping property of your TextBlock to Wrap. To get to the TextBlock you need to define it in your ItemTemplate. Here’s a simple example of the template declared inline, though you could also pull it out as a Resource. For the dividing line I used the simplest approach of a Border with only a bottom black line.

<ListBox x:Name="listContent" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <Border BorderThickness="0,0,0,1" BorderBrush="Black">
                <TextBlock Text="{Binding}" TextWrapping="Wrap"/>
            </Border>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>