WPF ListBox 中的 ItemTemplate 和 ItemContainerStyle 有什么区别？

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

提问by RHaguiuda

In WPF Listbox, I'm confused with these 2 notions: ItemTemplateand ItemContainerStyleCan someone explain me more?

在WPF中Listbox，我很困惑与这些概念2： ItemTemplate和ItemContainerStyle能有人多给我解释一下？

回答by Esoteric Screen Name

The ItemTemplateis 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.

该ItemTemplate中是怎样的造型出现在您的数据项的内容。您可以使用它来绑定数据字段、格式化显示字符串等。它决定了数据的呈现方式。

The ItemContainerStyleis 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.

该ItemContainerStyle是造型的数据项的容器。在列表框中，这将是一个 ListBoxItem。此处的样式会影响选择行为或背景颜色等内容。它决定了显示器的风格和用户体验。

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

上面链接的 ItemContainerStyle 的 MSDN 页面有一个很好的示例，显示了一些差异：

 <!--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>

 <!--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>

回答by Jeff

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

ItemContainerStyle 只是 DataTemplate 的包装器，因此可以将通用项样式应用于不同的数据布局。

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

另外，从这个对“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.

您可以在 ItemTemplate 中完成所有样式，但 ItemContentStyle 具有 VisualStates，可控制鼠标悬停/禁用/选择等时的不透明度。

如果您想更改这些不透明度状态的更改，或者您想要矩形以外的任何容器形状，例如三角形，那么您必须覆盖默认的 ItemContainerStyle。