ItemsControl.ItemContainerStyle プロパティ

定義

項目ごとに生成されたコンテナー要素に適用される 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>

は、 ListBoxコントロールのコンテナー要素です。ListBoxItemThe 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"/>

上記の2つのシナリオでは、同じ結果が生成されます。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.

完全な例については、「スタイルとテンプレートの概要」のサンプルを参照してください。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

ここでは示されていないItemsControlの2つのスタイル関連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コンテナーはコントロールであり、 ComboBoxItemComboBox場合はコントロールです。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. コントロールで grouping を使用している場合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 NoneNone

適用対象

こちらもご覧ください