I have a WPF ListBox with a defined DataTemplate. In that template, I have a grid, where the first column width should take up all remaining room in the grid.
This seems to work outside the ListBox, but not inside. Why is that, and how can I get it to behave the same?
Here is my code. See line 36, and line 70
<UserControl x:Class='Russound.Windows.UI.UserControls.MAX.Reports.UniversalReportsWpf' xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation' xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml' Height='250' Width='900' > <Grid> <Grid.RowDefinitions> <RowDefinition Height='Auto'/> <RowDefinition Height='*'/> </Grid.RowDefinitions> <Grid> <Grid.RowDefinitions> <RowDefinition Height='Auto'/> <RowDefinition Height='Auto'/> </Grid.RowDefinitions> <TextBlock Grid.Row='0' Height='35' Padding='0,3,5,0' Text='Standard Reports' HorizontalAlignment='Right' FontWeight='Bold' FontSize='20' Foreground='DarkBlue'/> <Border Grid.Row='1'> <Grid> <Grid.Resources> <Style TargetType='{x:Type TextBlock}'> <Setter Property='HorizontalAlignment' Value='Left'/> <Setter Property='VerticalAlignment' Value='Top'/> <Setter Property='Height' Value='20'/> <Setter Property='Padding' Value='0,3,5,0'/> <Setter Property='Cursor' Value='Hand'/> <Setter Property='Foreground' Value='WhiteSmoke' /> </Style> </Grid.Resources> <Grid.Background> <LinearGradientBrush EndPoint='0.5,1' StartPoint='0.5,0'> <GradientStop Color='#FF808080' Offset='0'/> <GradientStop Color='#FF000000' Offset='1'/> </LinearGradientBrush> </Grid.Background> <Grid.ColumnDefinitions> <ColumnDefinition Width='300*' /> <ColumnDefinition Width='150' /> <ColumnDefinition Width='100' /> <ColumnDefinition Width='50' /> </Grid.ColumnDefinitions> <TextBlock Grid.Column='0' Text='Report Name' FontWeight='Bold'/> <TextBlock Grid.Column='1' Text='Last Run Date' FontWeight='Bold'/> <TextBlock Grid.Column='2' Text='Last Ran By' FontWeight='Bold'/> <TextBlock Grid.Column='3' Text='Secure' FontWeight='Bold'/> </Grid> </Border> </Grid> <ListBox Grid.Row='1' ItemsSource='{Binding}' ItemTemplate='{DynamicResource reportLayout}' VirtualizingStackPanel.VirtualizationMode='Recycling' MouseDoubleClick='DisplaySelectedReport' Grid.RowSpan='2'> <ListBox.SelectedItem> <MouseBinding MouseAction='LeftDoubleClick' Command='ApplicationCommands.Open' /> </ListBox.SelectedItem> <ListBox.Resources> <DataTemplate x:Key='reportLayout' DataType='AdHockReport'> <Grid> <Grid.Resources> <Style TargetType='{x:Type TextBlock}'> <Setter Property='HorizontalAlignment' Value='Left'/> <Setter Property='VerticalAlignment' Value='Top'/> <Setter Property='Height' Value='25'/> <Setter Property='Padding' Value='0,3,5,0'/> <Setter Property='Cursor' Value='Hand'/> </Style> </Grid.Resources> <Grid.ColumnDefinitions> <ColumnDefinition Width='*' /> <ColumnDefinition Width='150' /> <ColumnDefinition Width='100' /> <ColumnDefinition Width='50' /> </Grid.ColumnDefinitions> <TextBlock Grid.Column='0' ToolTip='Report Name' Text='{Binding Path=DisplayName}' FontWeight='Bold'/> <TextBlock Grid.Column='1' ToolTip='Last Run Date' Text='{Binding Path=LastRunDate, StringFormat=MMM dd\, yyyy h:mm tt}' /> <TextBlock Grid.Column='2' ToolTip='Last Run By' Text='{Binding Path=LastRunBy}' /> <TextBlock Grid.Column='3' ToolTip='Secure' Text='{Binding Path=IsSecure}' /> </Grid> </DataTemplate> </ListBox.Resources> <ListBox.Background> <LinearGradientBrush EndPoint='0.5,1' StartPoint='0.5,0'> <GradientStop Color='#FFE5E5E5' Offset='0'/> <GradientStop Color='#FF888888' Offset='1'/> </LinearGradientBrush> </ListBox.Background> </ListBox> </Grid> </UserControl>
This is because the ListBoxItem containing the grid is sizing to content. Therefore the ‘remaining space’ for the star-sized column to fill is only as much as the column needs.
To fix this, use the ListBox.ItemContainerStyle to set ListBoxItem.HorizontalContentAlignment to Stretch.