Reputation: 10286
I have a Grid
as a root container with two columns defined (There's only one row).
The first column has flexible width and second column has 300px fixed width.
Next, I have placed a ListBox
inside the second column to stretch both horizontally and vertically, i.e. to fill the entire second column.
Lastly, I have defined an Items Template for the ListBox
to be a vertically oriented StackPanel
, with one DockPanel
and a couple of TextBlock
s inside.
<!-- Data template for ListBox -->
<DataTemplate DataType="{x:Type entities:Track}">
<StackPanel Orientation="Vertical">
<DockPanel>
<TextBlock DockPanel.Dock="Left" Text="Now playing" />
<TextBlock DockPanel.Dock="Right" Text="Time remaining" />
</DockPanel>
<TextBlock Text="{Binding Artist}" />
<TextBlock Text="{Binding Title}" />
</StackPanel>
</DataTemplate>
...
<ListBox
Grid.Column="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" />
I have two questions:
StackPanel
fill the entire width of the ListBox
? Right now, it only takes enough space to accomodate the DockPanel
and the TextBlock
s inside. It won't fit the width of the ListBox
or ListBoxItem
.DockPanel
fill the entire width of the StackPanel
, i.e. its parent? What happens right now is that even if the width of the TextBlock
s in the StackPanel
exceed the width of the DockPanel
, it won't stretch to match their width. Thanks for the help.
Upvotes: 15
Views: 23800
Reputation: 84674
You can make the Content of every ListBoxItem
stretch by setting HorizontalContentAlignment
in the ItemContainerStyle
<ListBox ...>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
Upvotes: 24