WPF ListBoxItem Not Filling

Answer 1

I think it's a bug in the ListBox. Here's how I made my item template stretch out to fill the width of the ListBox. Make the container of each list item a one-cell grid, and use the grid loaded event to call a method that will stretch out the grid to the width of the ListBox.

<ListBox x:Name="lvHolePatterns"  ItemsSource="{Binding HolePatterns}"
                              SelectedItem="{Binding ActivePattern, Mode=TwoWay}"
                              HorizontalContentAlignment="Stretch"
                              ScrollViewer.VerticalScrollBarVisibility="Visible"
                              Background="Gray">

<ListBox.ItemTemplate>
    <DataTemplate>
        <Grid Loaded="StretchFrameworkElement">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
            </Grid.RowDefinitions>
            <Border Margin="0,3,5,3" BorderThickness="1" BorderBrush="SlateGray" CornerRadius="4"
                RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch" >
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF000000" Offset=" 1"/>
                        <GradientStop Color="#FF396DBE" Offset="0"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel Orientation="Vertical" >
                    <TextBlock FontWeight="Bold" Text="{Binding Path=PatternName}" Foreground="WHITE" VerticalAlignment="Center"  Margin="5,5,0,5"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0,0,5">
                        <TextBlock Text="{Binding Path=HoleCount}" Margin="10,0,0,0" Foreground="WHITE" VerticalAlignment="Center"/>
                        <TextBlock Text=" Holes" Margin="3,0,0,0" Foreground="WHITE" VerticalAlignment="Center"/>
                        <CheckBox Content="Visible" IsChecked="{Binding Visible, Mode=TwoWay}" Foreground="WHITE" Margin="10,0,0,0" />
                    </StackPanel>
                </StackPanel>
            </Border>
        </Grid>
    </DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Then, add this method to handle the grid loaded event:

private void StretchFrameworkElement(object sender, RoutedEventArgs e)
{
    // found this method at: http://silverlight.net/forums/p/18918/70469.aspx#70469
    FrameworkElement t = sender as FrameworkElement;
    ContentPresenter p = VisualTreeHelper.GetParent(t) as ContentPresenter;
    p.HorizontalAlignment = HorizontalAlignment.Stretch;       
}

Answer 2

Matt's right, in that it's sort of a bug. The padding is hard coded in the ListBox template, rather than being tied to a property you can change.

Best way to fix this is to redefine the template, like so:

<ListBox>
    <ListBox.Template>
        <ControlTemplate TargetType="{x:Type ListBox}">
            <Border 
                SnapsToDevicePixels="true" 
                x:Name="Bd" 
                Background="{TemplateBinding Background}" 
                BorderBrush="{TemplateBinding BorderBrush}" 
                BorderThickness="{TemplateBinding BorderThickness}" 
                Padding="0"> <!-- This was originally 1 -->
                <ScrollViewer 
                    Focusable="false" 
                    Padding="{TemplateBinding Padding}">
                    <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                </ScrollViewer>
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter 
                        Property="Background" 
                        TargetName="Bd" 
                        Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
                </Trigger>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter 
                        Property="ScrollViewer.CanContentScroll" 
                        Value="false"/>
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </ListBox.Template>

    <ListBoxItem>Item1</ListBoxItem>
    <ListBoxItem>Item2</ListBoxItem>
    <ListBoxItem>Item3</ListBoxItem>
</ListBox>

Answer 3

Here is my ListView from the WPF version of my app. The ListView DataTemplate uses a Border, which automatically stretches out to the width of the ListView. No extra method required as in the Silverlight answer above.

<ListView x:Name="lvHolePatterns" ItemsSource="{Binding Path=HolePatterns}"
                              SelectedItem="{Binding Path=ActivePattern}"
                              IsSynchronizedWithCurrentItem="True"
                              HorizontalContentAlignment="Stretch"
                              ScrollViewer.VerticalScrollBarVisibility="Visible"
                              Background="Gray">
    <ListView.ItemContainerStyle>
        <Style BasedOn="{StaticResource lvRowHighlighter}" TargetType="{x:Type ListViewItem}">
            <!--<Setter Property="Height" Value="50" />-->
        </Style>
    </ListView.ItemContainerStyle>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Border Margin="0,3,5,3" BorderThickness="1" BorderBrush="SlateGray" CornerRadius="4" RenderTransformOrigin="0.5,0.5">
                <Border.Background>
                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                        <GradientStop Color="#FF000000" Offset=" 1"/>
                        <GradientStop Color="#FF396DBE" Offset="0"/>
                    </LinearGradientBrush>
                </Border.Background>
                <StackPanel Orientation="Vertical">
                    <TextBlock FontWeight="Bold" Text="{Binding Path=PatternName}" Foreground="WHITE" VerticalAlignment="Center"  Margin="5,5,0,5"/>
                    <StackPanel Orientation="Horizontal" Margin="5,0,0,5">
                        <TextBlock Text="{Binding Path=HoleCount}" Margin="15,0,0,0" Foreground="WHITE" VerticalAlignment="Center"/>
                        <TextBlock Text=" Holes" Margin="3,0,0,0" Foreground="WHITE" VerticalAlignment="Center"/>
                        <CheckBox Content="Visible" IsChecked="{Binding Path=Visible}" Foreground="WHITE" Margin="10,0,0,0" />
                </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Answer 4

Simply add this to the text box instance attributes:

HorizontalContentAlignment="Stretch"

Is would do the job without having any code behind.

Gili

Answer 5

hi, I found a very simple workaround to the hard coded padding problem in listbox items: set the margin of the outermost element in the datatemplate to -1

-- henon