There are now two issues remaining with my transparent list box: Multi-line list items (to remove that horizontal scrollbar) and a transparent or otherwise pretty-looking row selection indicator. The first task will probably be the easier one, so I’ll tackle that one first. While spinning through the available properties of a text block, I had noticed a property for ‘TextWrapping’… surely, that won’t work in a list box but what the heck, I’ll give it a go and define my list box like this (I made the text white as well, so it is more visible against the background):
<ListBox Margin="79,68,79,94" Name="listBox1" Background="Transparent" FontSize="16" Foreground="White">
<ListBoxItem>
<TextBlock Text="Me" TextWrapping="Wrap"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="You" TextWrapping="Wrap"/>
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="Somebody else entirely" TextWrapping="Wrap" />
</ListBoxItem>
</ListBox>
Running the app now does… nothing. Absolutely nothing. I knew that was too easy, but maybe it isn’t that much further from this. Thinking about it, setting text to wrap would wrap it when it sees that it is at the end of a line… there is no width specified for these text blocks, so how would it ever know where the end of the line is? I want to specify the width of the text block to match the width of its container, the list box. Now I can do this manually, but then if the width of my list box changes I’d have to go and update the width of each list item. That is definitely not something I want to worry about, so I looked up how to bind the width of my text block to its parent width, so that they will always match. This is what I came up with:
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}"
Now there is a little bit of magic going on in here that I don’t yet entirely understand. Sure, it makes sense in that I am binding the value of width to the first ancestor of type ScollViewer’s ViewportWidth value, but I would assume that I would be binding to the first ancestor of type ListBox’s Width property, but this line:
Width="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBox}}, Path=Width}"
Doesn’t work. I’ll just have to accept it for now, because it seems to do what I want… almost:
Why is that darn horizontal scrollbar unnecessarily there? I want to turn it off entirely, which thankfully is a built-in property of the listbox:
<ListBox Margin="79,68,79,94" Name="listBox1" Background="Transparent" FontSize="16" Foreground="White" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
Success! Even the selection highlight, though ultimately not what I want, knows to select the multiple lines of text:
