What's the difference between ItemTemplate and ItemContainerStyle in a WPF ListBox?

Question

In WPF Listbox, I'm confused with these 2 notions: ItemTemplate and ItemContainerStyle Can someone explain me more?

Answer 1

The ItemTemplate is for styling how the content of your data item appears. You use it to bind data fields, format display strings, and so forth. It determines how the data is presented.

The ItemContainerStyle is for styling the container of the data item. In a list box, this would be a ListBoxItem. Styling here affects things like selection behavior or background color. It determines style and UX of the display.

The MSDN page for ItemContainerStyle, linked above, has a pretty good example showing some differences:

 <!--Use the ItemTemplate to set a DataTemplate to define       the visualization of the data objects. This DataTemplate       specifies that each data object appears with the Proriity       and TaskName on top of a silver ellipse.-->   <ItemsControl.ItemTemplate>     <DataTemplate>       <DataTemplate.Resources>         <Style TargetType="TextBlock">           <Setter Property="FontSize" Value="18"/>           <Setter Property="HorizontalAlignment" Value="Center"/>         </Style>       </DataTemplate.Resources>       <Grid>         <Ellipse Fill="Silver"/>         <StackPanel>           <TextBlock Margin="3,3,3,0"                      Text="{Binding Path=Priority}"/>           <TextBlock Margin="3,0,3,7"                      Text="{Binding Path=TaskName}"/>         </StackPanel>       </Grid>     </DataTemplate>   </ItemsControl.ItemTemplate>   <!--Use the ItemContainerStyle property to specify the appearance       of the element that contains the data. This ItemContainerStyle       gives each item container a margin and a width. There is also       a trigger that sets a tooltip that shows the description of       the data object when the mouse hovers over the item container.-->   <ItemsControl.ItemContainerStyle>     <Style>       <Setter Property="Control.Width" Value="100"/>       <Setter Property="Control.Margin" Value="5"/>       <Style.Triggers>         <Trigger Property="Control.IsMouseOver" Value="True">           <Setter Property="Control.ToolTip"                   Value="{Binding RelativeSource={x:Static RelativeSource.Self},                           Path=Content.Description}"/>         </Trigger>       </Style.Triggers>     </Style>   </ItemsControl.ItemContainerStyle> 

Answer 2

The ItemContainerStyle just a wrapper for the DataTemplate so that a common item style can be applied to different data layouts.

Also, from this answer to "DataTemplate vs ItemContainerStyle":

You can do all your styling in the ItemTemplate but the ItemContentStyle has VisualStates which control the Opacity on mouse over/disabled/selected etc.

If you want to change those opacity state changes, or if you want any Container shape other than a rectangle, like a triangle for example, then you'll have to override the default ItemContainerStyle.