ItemsControl.ItemContainerStyle Propriedade

Definição

Obtém ou define o Style que é aplicado ao elemento contentor gerado para cada 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; }
[<System.ComponentModel.Bindable(true)>]
member this.ItemContainerStyle : System.Windows.Style with get, set
Public Property ItemContainerStyle As Style

Valor de Propriedade

O Style que é aplicado ao elemento contentor gerado para cada item. A predefinição é null.

Atributos

Exemplos

O exemplo seguinte demonstra como usar esta propriedade. Considere o seguinte dado vinculado ListBox:

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

Para criar um estilo para os elementos que contêm os itens de dados, crie um ListBoxItem estilo, como mostrado no exemplo seguinte. O estilo é aplicado a todos ListBoxItem os elementos dentro do âmbito em que o estilo é definido.

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

O ListBoxItem é o elemento contentor para o ListBox controlo. Portanto, uma alternativa ao anterior é definir a ItemContainerStyle propriedade do ListBox para o estilo definido. Para isso, dê ao ListBoxItem estilo e x:Key fique disponível como recurso:

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

De seguida, defina a ItemContainerStyle propriedade para o recurso, como no seguinte exemplo:

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

Ambos os cenários anteriores produzem o mesmo resultado. No entanto, uma das vantagens de disponibilizar o estilo como recurso é que pode reutilizá-lo. Definir explicitamente a ItemContainerStyle propriedade também pode proporcionar maior legibilidade.

O exemplo seguinte foi concebido para ilustrar a função das diferentes propriedades relacionadas de estilo e modelação fornecidas pelo ItemsControl. Neste exemplo, ItemsControl o está ligado a uma coleção de Task objetos. Para fins de demonstração, os estilos e modelos neste exemplo são todos declarados em linha.

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

A seguir está uma captura de tela do exemplo quando ele é renderizado:

Exemplo de captura de ecrã de ItemsControl

Duas outras propriedades relacionadas ao estilo do ItemsControl que não são mostradas aqui são GroupStyle e GroupStyleSelector.

Observações

Usas esta propriedade ou a ItemContainerStyleSelector propriedade para definir um estilo que afete a aparência dos elementos que contêm os itens de dados. Por exemplo, para ListBox, os contentores gerados são ListBoxItem controlos; para ComboBox, são ComboBoxItem controlos.

Oferece ItemsControl grande flexibilidade para personalização visual e oferece muitas propriedades de estilo e modelagem. Para influenciar a disposição dos itens, use a ItemsPanel propriedade. Se estiveres a usar agrupamento no teu controlo, podes usar a GroupStyle propriedade ou.GroupStyleSelector Para especificar a visualização de objetos de dados, use a ItemTemplate propriedade ou.ItemTemplateSelector Para mais informações sobre quando especificar um ItemTemplate, veja Visão Geral do Templamento de Dados.

Uso de atributos XAML

<object ItemContainerStyle="ResourceExtension StyleResourceKey"/>

Valores XAML

ResourceExtension Um dos seguintes: StaticResource, ou DynamicResource. A menos que os próprios estilos contenham referências a potenciais referências em tempo de execução, como recursos do sistema ou preferências do utilizador, StaticResource a referência a um estilo é geralmente recomendada para desempenho.

StyleResourceKeyx:Key valor de string referindo-se ao estilo solicitado como recurso.

Informação de Propriedade de Dependência

Iteme Value
Campo identificador ItemContainerStyleProperty
Propriedades dos metadados definidas como true None

Aplica-se a

Ver também