How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox

Question

I want to have the ListItems to extend with their orange background the full width of the Listbox   Currently they are only as wide as the FirstName   LastName   I ve set every element I can to  HorizontalAlignment  Stretch    I want the background of the ListboxItems to expand as the user stretches the Listbox so I don t want to put in absolute values    What do I have to do so that the background color of the ListBoxItems fill the width of the ListBox    lt Window x Class  TestListBoxSelectedItemStyle Window1      xmlns  http   schemas microsoft com winfx 2006 xaml presentation      xmlns x  http   schemas microsoft com winfx 2006 xaml      xmlns local  clr-namespace TestListBoxSelectedItemStyle      Title  Window1  Height  300  Width  300  gt        lt Window Resources gt           lt local CustomerViewModel x Key  TheDataProvider   gt            lt DataTemplate x Key  CustomerItemTemplate  gt               lt Border CornerRadius  5  Background  Orange  HorizontalAlignment  Stretch  Padding  5  Margin  3  gt                   lt StackPanel Orientation  Horizontal  HorizontalAlignment  Stretch  Width  Auto  gt                       lt TextBlock HorizontalAlignment  Stretch  gt                       lt TextBlock Text gt                           lt MultiBinding StringFormat     0   1   gt                               lt Binding Path  FirstName   gt                               lt Binding Path  LastName   gt                           lt  MultiBinding gt                       lt  TextBlock Text gt                       lt  TextBlock gt                   lt  StackPanel gt               lt  Border gt           lt  DataTemplate gt        lt  Window Resources gt        lt Grid gt           lt ListBox ItemsSource   Binding Path GetAllCustomers  Source  StaticResource TheDataProvider                     ItemTemplate   StaticResource CustomerItemTemplate    gt       lt  Grid gt   lt  Window gt

User · Accepted Answer

I m sure this is a duplicate  but I can t find a question with the same answer   Add HorizontalContentAlignment  Stretch  to your ListBox  That should do the trick  Just be careful with auto-complete because it is so easy to get HorizontalAlignment by mistake

User · Answer

I also had the same problem  as a quick workaround  I used blend to determine how much padding was being added  In my case it was 12  so I used a negative margin to get rid of it  Now everything can now be centered properly

User · Answer

The fix for me was to set property HorizontalAlignment  Stretch  on ItemsPresenter inside ScrollViewer    Hope this helps someone      lt Setter Property  Template  gt               lt Setter Value gt                   lt ControlTemplate TargetType  ListBox  gt                       lt ScrollViewer x Name  ScrollViewer  BorderBrush   TemplateBinding BorderBrush   BorderThickness   TemplateBinding BorderThickness   Background   TemplateBinding Background   Foreground   TemplateBinding Foreground   Padding   TemplateBinding Padding   HorizontalAlignment  Stretch  gt                           lt ItemsPresenter  Height  252  HorizontalAlignment  Stretch   gt                       lt  ScrollViewer gt                   lt  ControlTemplate gt               lt  Setter Value gt           lt  Setter gt

User · Answer

Since the border is used just for visual appearance  you could put it into the ListBoxItem s ControlTemplate and modify the properties there  In the ItemTemplate  you could place only the StackPanel and the TextBlock  In this way  the code also remains clean  as in the appearance of the control will be controlled via the ControlTemplate and the data to be shown will be controlled via the DataTemplate

User · Answer

If your items are wider than the ListBox  the other answers here won t help  the items in the ItemTemplate remain wider than the ListBox   The fix that worked for me was to disable the horizontal scrollbar  which  apparently  also tells the container of all those items to remain only as wide as the list box   Hence the combined fix to get ListBox items that are as wide as the list box  whether they are smaller and need stretching  or wider and need wrapping  is as follows    lt ListBox HorizontalContentAlignment  Stretch            ScrollViewer HorizontalScrollBarVisibility  Disabled  gt     credits for the scroll bar idea

User · Answer

I found another solution here  since I ran into both post     This is from the Myles answer    lt ListBox ItemContainerStyle gt        lt Style TargetType  ListBoxItem  gt            lt Setter Property  HorizontalContentAlignment  Value  Stretch  gt  lt  Setter gt        lt  Style gt    lt  ListBox ItemContainerStyle gt     This worked for me

[xaml] How to get a ListBox ItemTemplate to stretch horizontally the full width of the ListBox?

Examples related to xaml

Examples related to listboxitem