ItemsControl.ItemContainerStyle ItemsControl.ItemContainerStyle ItemsControl.ItemContainerStyle ItemsControl.ItemContainerStyle Property

定義

項目ごとに生成されたコンテナー要素に適用される Style を取得または設定します。Gets or sets the Style that is applied to the container element generated for each item.

public:
 property System::Windows::Style ^ ItemContainerStyle { System::Windows::Style ^ get(); void set(System::Windows::Style ^ value); };
[System.ComponentModel.Bindable(true)]
public System.Windows.Style ItemContainerStyle { get; set; }
member this.ItemContainerStyle : System.Windows.Style with get, set
Public Property ItemContainerStyle As Style

プロパティ値

項目ごとに生成されたコンテナー要素に適用される StyleThe Style that is applied to the container element generated for each item. 既定値は、null です。The default is null.

次の例では、このプロパティを使用する方法を示します。The following example demonstrates how to use this property. 次のデータ バインドを検討してくださいListBox:。Consider the following data-bound ListBox:

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

データ項目を格納している要素のスタイルを作成するには、作成、ListBoxItemスタイル、次の例に示すようにします。To create a style for the elements that contain the data items, create a ListBoxItem style, as shown in the following example. すべてにスタイルが適用されるListBoxItemでスタイルが定義されているスコープ内の要素。The style is applied to all ListBoxItem elements within the scope the style is defined in.

<Style TargetType="ListBoxItem">
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="MaxHeight" Value="75" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
      <Trigger.Setters>
        <Setter Property="Opacity" Value="1.0" />
      </Trigger.Setters>
    </Trigger>
    <EventTrigger RoutedEvent="Mouse.MouseEnter">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Duration="0:0:0.2"
              Storyboard.TargetProperty="MaxHeight"
              To="90"  />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
    <EventTrigger RoutedEvent="Mouse.MouseLeave">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Duration="0:0:1"
              Storyboard.TargetProperty="MaxHeight"  />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Style.Triggers>
</Style>

ListBoxItemのコンテナー要素には、ListBoxコントロール。The ListBoxItem is the container element for the ListBox control. 設定する代わりに、前に、そのため、ItemContainerStyleのプロパティ、ListBox定義済みのスタイル。Therefore, an alternative to the preceding is to set the ItemContainerStyle property of the ListBox to the defined style. 付与、ListBoxItemスタイル、x:Keyリソースとして使用できるように。To do that, give the ListBoxItem style an x:Key so it is available as a resource:

<Style TargetType="ListBoxItem" x:Key="ContainerStyle">
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="Opacity" Value="0.5" />
  <Setter Property="MaxHeight" Value="75" />
  <Style.Triggers>
    <Trigger Property="IsSelected" Value="True">
      <Setter Property="Opacity" Value="1.0" />
    </Trigger>

次に、設定、ItemContainerStyleプロパティを次の例のように、リソース。Next, set the ItemContainerStyle property to the resource, as in the following example:

<ListBox ItemsSource="{Binding Source={StaticResource MyPhotos}}"
         ItemContainerStyle="{StaticResource ContainerStyle}" 
         Background="Silver" Width="600" Margin="10" SelectedIndex="0"/>

前述のシナリオの両方は、同じ結果を生成します。Both of the preceding scenarios produce the same result. ただし、スタイルを再利用できることをスタイルをリソースとして使用できるようにする利点の 1 つです。However, one of the advantages of making the style available as a resource is that you can reuse the style. 設定、ItemContainerStyleプロパティに明示的にも提供できます読みやすくします。Setting the ItemContainerStyle property explicitly can also provide greater readability.

完全な例では、次を参照してください。 Styling and Templating Sample 概要します。For the complete example, see Introduction to Styling and Templating Sample.

次の例は、別の関数を説明するために設計されています。 スタイルとテンプレートに関連するプロパティによって提供される、ItemsControlします。The following example is designed to illustrate the function of the different styling and templating related properties provided by the ItemsControl. ItemsControlこの例では、コレクションにバインドされているTaskオブジェクト。The ItemsControl in this example is bound to a collection of Task objects. わかりやすいように、この例のスタイルとテンプレートはすべてインラインで宣言されています。For demonstration purposes, the styles and templates in this example are all declared inline.

<ItemsControl Margin="10"
              ItemsSource="{Binding Source={StaticResource myTodoList}}">
  <!--The ItemsControl has no default visual appearance.
      Use the Template property to specify a ControlTemplate to define
      the appearance of an ItemsControl. The ItemsPresenter uses the specified
      ItemsPanelTemplate (see below) to layout the items. If an
      ItemsPanelTemplate is not specified, the default is used. (For ItemsControl,
      the default is an ItemsPanelTemplate that specifies a StackPanel.-->
  <ItemsControl.Template>
    <ControlTemplate TargetType="ItemsControl">
      <Border BorderBrush="Aqua" BorderThickness="1" CornerRadius="15">
        <ItemsPresenter/>
      </Border>
    </ControlTemplate>
  </ItemsControl.Template>
  <!--Use the ItemsPanel property to specify an ItemsPanelTemplate
      that defines the panel that is used to hold the generated items.
      In other words, use this property if you want to affect
      how the items are laid out.-->
  <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
      <WrapPanel />
    </ItemsPanelTemplate>
  </ItemsControl.ItemsPanel>
  <!--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>
</ItemsControl>

次に示すのは、この例がレンダリングされたときのスクリーンショットです。The following is a screenshot of the example when it is rendered:

ItemsControl の例のスクリーン ショットItemsControl example screenshot

2 つの他のスタイル関連プロパティ、ItemsControlここでは表示されていないGroupStyleGroupStyleSelectorします。Two other style-related properties of the ItemsControl that are not shown here are GroupStyle and GroupStyleSelector.

注釈

このプロパティを使用して、またはItemContainerStyleSelectorデータ項目を格納している要素の外観に影響するスタイルを設定するプロパティ。You use this property or the ItemContainerStyleSelector property to set a style to affect the appearance of the elements that contain the data items. たとえば、 ListBox、生成されたコンテナーはListBoxItem制御のComboBoxComboBoxItemコントロール。For example, for ListBox, the generated containers are ListBoxItem controls; for ComboBox, they are ComboBoxItem controls.

ItemsControl視覚的なカスタマイズの柔軟性を提供し、多くのスタイルとテンプレートのプロパティを提供します。The ItemsControl provides great flexibility for visual customization and provides many styling and templating properties. アイテムのレイアウトに影響を与えるを使用して、ItemsPanelプロパティ。To affect the layout of the items, use the ItemsPanel property. 使用することができます、コントロールをグループ化を使用している場合、GroupStyleまたはGroupStyleSelectorプロパティ。If you are using grouping on your control, you can use the GroupStyle or GroupStyleSelector property. データ オブジェクトの視覚化を指定するには、使用、ItemTemplateまたはItemTemplateSelectorプロパティ。To specify the visualization of data objects, use the ItemTemplate or ItemTemplateSelector property. 指定する場合の詳細については、ItemTemplateを参照してくださいデータ テンプレートの概要します。For more information about when to specify an ItemTemplate, see Data Templating Overview.

XAML 属性の使用方法XAML Attribute Usage

<object ItemContainerStyle="ResourceExtension StyleResourceKey"/>  

XAML 値XAML Values

ResourceExtensionResourceExtension
次のいずれか: StaticResource、またはDynamicResourceします。One of the following: StaticResource, or DynamicResource. スタイル自体は、システム リソースまたはユーザーの設定などの潜在的な実行時参照への参照を含めることがない限りStaticResourceスタイルへの参照は、通常、パフォーマンスの推奨します。Unless the styles themselves contain references to potential run-time references such as system resources or user preferences, StaticResource reference to a style is usually recommended for performance.

StyleResourceKeyStyleResourceKey
x:Key リソースとして要求されているスタイルを参照する文字列値です。x:Key string value referring to the style being requested as a resource.

依存プロパティ情報Dependency Property Information

識別子フィールドです。Identifier field ItemContainerStyleProperty
メタデータのプロパティを設定するには trueMetadata properties set to true なしNone

適用対象

こちらもご覧ください