¿Aplicar estilo al primer niño?

Question

¿Hay alguna manera de aplicar estilos al primer hijo (o último o enésimo) de un contenedor (cualquier cosa que contenga hijos)? Intento personalizar el aspecto de los elementos de pestaña para que el primero tenga un radio de borde diferente al de los demás.

Esto es lo que tengo ahora:

<ControlTemplate TargetType="{x:Type TabItem}"> 
    <Grid> 
     <Border Name="Border" BorderBrush="#666" BorderThickness="1,1,1,0" CornerRadius="8,8,0,0" Margin="0,0,0,-1"> 
      <TextBlock x:Name="TabItemText" Foreground="#444" Padding="6 2" TextOptions.TextFormattingMode="Display"> 
       <ContentPresenter x:Name="ContentSite" VerticalAlignment="Center" HorizontalAlignment="Center" ContentSource="Header" Margin="12,2,12,2"/> 
      </TextBlock> 
     </Border> 
    </Grid> 
</ControlTemplate> 

Answer 1

Para las clases de ItemsControl derivados (tales como TabControl), puede utilizar la propiedad de dependencia ItemContainerStyleSelector. Cuando se establece esta propiedad de dependencia, ItemsControl llamará a StyleSelector.SelectStyle() para cada elemento en el control. Esto le permitirá usar diferentes estilos para diferentes artículos.

El siguiente ejemplo cambia el último elemento de tabulación en un TabControl por lo que su texto es en negrita y un poco más grande que las otras pestañas.

En primer lugar, la nueva clase StyleSelector:

selector de

class LastItemStyleSelector : StyleSelector 
{ 
    public override Style SelectStyle(object item, DependencyObject container) 
    { 
     var itemsControl = ItemsControl.ItemsControlFromItemContainer(container); 
     var index = itemsControl.ItemContainerGenerator.IndexFromContainer(container); 

     if (index == itemsControl.Items.Count - 1) 
     { 
      return (Style)itemsControl.FindResource("LastItemStyle"); 
     } 

     return base.SelectStyle(item, container); 
    } 
} 

Este estilo devolverá el estilo con la tecla "LastItemStyle", pero sólo para el último elemento del control. Los otros elementos usarán el estilo predeterminado. (Tenga en cuenta que esta función solo usa miembros de ItemsControl. También podría usarse para otras clases derivadas de ItemsControl.) Luego, en su XAML, primero necesita crear dos recursos. El primer recurso será este LastItemStyleSelector y el segundo recurso es el estilo.

<Window.Resources> 
    <local:LastItemStyleSelector x:Key="LastItemStyleSelector" /> 

    <Style x:Key="LastItemStyle" TargetType="TabItem"> 
     <Setter Property="FontWeight" Value="Bold" /> 
     <Setter Property="FontSize" Value="16" /> 
    </Style> 
</Window.Resources> 

Entonces, finalmente, su TabControl:

<TabControl ItemContainerStyleSelector="{StaticResource LastItemStyleSelector}"> 
     <TabItem Header="First" /> 
     <TabItem Header="Second" /> 
     <TabItem Header="Third" /> 
    </TabControl> 

Para más información, véase la documentación de MSDN:

• ItemsControl.ItemContainerStyleSelector Property
• StyleSelector Class

Answer 2

A diferencia de HTML y CSS, no hay una forma sencilla de determinar y desencadenar ese tipo de cambio.

Podría escribir un desencadenador y usar un convertidor de valor para hacer algo así usando this forum post como fuente de inspiración.

Mucho más simple sería aplicar un estilo personalizado al tabitem que desea que se vea diferente. ¿Has probado eso?

<TabItem Header="TabItem" Style="{DynamicResource FirstTabStyle}"> 
    <Grid Background="#FFE5E5E5"/> 
</TabItem>