Compartir a través de

Ejemplo de ControlTemplate de ListView

Actualización: noviembre 2007

Los controles de Windows Presentation Foundation (WPF) tienen un objeto ControlTemplate que contiene el árbol visual de ese control. Puede modificar el aspecto de la estructura y la apariencia de un control modificando el objeto ControlTemplate de ese control. No existe ningún modo de reemplazar únicamente una parte del árbol visual de un control; para modificar el árbol visual de un control, debe establecer la propiedad Template del control en su nuevo y completo objeto ControlTemplate.

En este tema se muestra el objeto ControlTemplate del control ListView de WPF.

Este tema contiene las secciones siguientes.

  • Requisitos previos
  • Ejemplo de ControlTemplate de ListView
  • Temas relacionados

Requisitos previos

Para ejecutar los ejemplos de este tema, debe saber cómo escribir aplicaciones de WPF. Para obtener más información, vea Información general sobre Windows Presentation Foundation. También debe saber cómo se utilizan los estilos en WPF. Para obtener más información, vea Aplicar estilos y plantillas.

Ejemplo de ControlTemplate de ListView

Aunque este ejemplo contiene todos los elementos definidos en el objeto ControlTemplate de un objeto ListView de manera predeterminada, los valores específicos deben tomarse como ejemplos.

<Style x:Key="{x:Static GridView.GridViewScrollViewerStyleKey}"
       TargetType="ScrollViewer">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ScrollViewer">
        <Grid Background="{TemplateBinding Background}">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="Auto"/>
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <DockPanel Margin="{TemplateBinding Padding}">
            <ScrollViewer DockPanel.Dock="Top"
              HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Hidden"
              Focusable="false">
              <GridViewHeaderRowPresenter Margin="2,0,2,0"
                Columns="{Binding Path=TemplatedParent.View.Columns,
                          RelativeSource={RelativeSource TemplatedParent}}"
                ColumnHeaderContainerStyle="{Binding
                             Path=TemplatedParent.View.ColumnHeaderContainerStyle,
                             RelativeSource={RelativeSource TemplatedParent}}"
                ColumnHeaderTemplate="{Binding
                             Path=TemplatedParent.View.ColumnHeaderTemplate,
                             RelativeSource={RelativeSource TemplatedParent}}"
                ColumnHeaderTemplateSelector="{Binding 
                             Path=TemplatedParent.View.ColumnHeaderTemplateSelector,
                             RelativeSource={RelativeSource TemplatedParent}}"
                AllowsColumnReorder="{Binding
                             Path=TemplatedParent.View.AllowsColumnReorder,
                             RelativeSource={RelativeSource TemplatedParent}}"
                ColumnHeaderContextMenu="{Binding
                             Path=TemplatedParent.View.ColumnHeaderContextMenu,
                             RelativeSource={RelativeSource TemplatedParent}}"
                ColumnHeaderToolTip="{Binding
                             Path=TemplatedParent.View.ColumnHeaderToolTip,
                             RelativeSource={RelativeSource TemplatedParent}}"
                SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </ScrollViewer>

            <ScrollContentPresenter Name="PART_ScrollContentPresenter"
              KeyboardNavigation.DirectionalNavigation="Local"
              CanContentScroll="True" CanHorizontallyScroll="False" 
              CanVerticallyScroll="False"/>
          </DockPanel>

          <ScrollBar Name="PART_HorizontalScrollBar"
            Orientation="Horizontal"
            Grid.Row="1"
            Maximum="{TemplateBinding ScrollableWidth}"
            ViewportSize="{TemplateBinding ViewportWidth}"
            Value="{TemplateBinding HorizontalOffset}"
            Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

          <ScrollBar Name="PART_VerticalScrollBar"
            Grid.Column="1"
            Maximum="{TemplateBinding ScrollableHeight}"
            ViewportSize="{TemplateBinding ViewportHeight}"
            Value="{TemplateBinding VerticalOffset}"
            Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>

        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="GridViewColumnHeaderGripper" TargetType="Thumb">
  <Setter Property="Width" Value="18"/>
  <Setter Property="Background" Value="{StaticResource NormalBorderBrush}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Border Padding="{TemplateBinding Padding}"
          Background="Transparent">
          <Rectangle HorizontalAlignment="Center"
            Width="1"
            Fill="{TemplateBinding Background}"/>
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type GridViewColumnHeader}"
       TargetType="GridViewColumnHeader">
  <Setter Property="HorizontalContentAlignment" Value="Center"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Foreground"
          Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="GridViewColumnHeader">
        <Grid>
          <Border Name="HeaderBorder"
            BorderThickness="0,1,0,1"
            BorderBrush="{StaticResource NormalBorderBrush}"
            Background="{StaticResource LightBrush}"
            Padding="2,0,2,0">
            <ContentPresenter Name="HeaderContent"
              Margin="0,0,0,1"
              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
              RecognizesAccessKey="True"
              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
          </Border>
          <Thumb x:Name="PART_HeaderGripper"
            HorizontalAlignment="Right"
            Margin="0,0,-9,0"
            Style="{StaticResource GridViewColumnHeaderGripper}"/>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="true">
            <Setter TargetName="HeaderBorder"
                    Property="Background" Value="{StaticResource NormalBrush}"/>
          </Trigger>
          <Trigger Property="IsPressed" Value="true">
            <Setter TargetName="HeaderBorder"
                    Property="Background" Value="{StaticResource PressedBrush}"/>
            <Setter TargetName="HeaderContent"
                    Property="Margin" Value="1,1,0,0"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
    <Trigger Property="Role" Value="Floating">
      <Setter Property="Opacity" Value="0.7"/>
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="GridViewColumnHeader">
            <Canvas Name="PART_FloatingHeaderCanvas">
              <Rectangle Fill="#60000000"
                Width="{TemplateBinding ActualWidth}"
                Height="{TemplateBinding ActualHeight}"/>
            </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Trigger>
    <Trigger Property="Role" Value="Padding">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="GridViewColumnHeader">
            <Border Name="HeaderBorder"
              BorderThickness="0,1,0,1"
              BorderBrush="{StaticResource NormalBorderBrush}"
              Background="{StaticResource LightBrush}"/>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Trigger>
  </Style.Triggers>
</Style>

<Style x:Key="{x:Type ListView}" TargetType="ListView">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
  <Setter Property="ScrollViewer.CanContentScroll" Value="true"/>
  <Setter Property="VerticalContentAlignment" Value="Center"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListView">
        <Border Name="Border"
          BorderThickness="1"
          BorderBrush="{StaticResource SolidBorderBrush}"
          Background="{StaticResource WindowBackgroundBrush}">
          <ScrollViewer Style="{DynamicResource
                        {x:Static GridView.GridViewScrollViewerStyleKey}}">
            <ItemsPresenter />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsGrouping"
                   Value="true">
            <Setter Property="ScrollViewer.CanContentScroll"
                    Value="false"/>
          </Trigger>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Border"
                    Property="Background"
                    Value="{StaticResource DisabledBorderBrush}"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

El ejemplo anterior utiliza uno o más de los siguientes recursos.

<!-- Fill Brushes -->

<LinearGradientBrush x:Key="NormalBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#CCC" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="LightBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalLightBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DarkBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#FFF" Offset="0.0"/>
      <GradientStop Color="#AAA" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#BBB" Offset="0.0"/>
      <GradientStop Color="#EEE" Offset="0.1"/>
      <GradientStop Color="#EEE" Offset="0.9"/>
      <GradientStop Color="#FFF" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledForegroundBrush" Color="#888" />

<SolidColorBrush x:Key="DisabledBackgroundBrush" Color="#EEE" />

<SolidColorBrush x:Key="WindowBackgroundBrush" Color="#FFF" />

<SolidColorBrush x:Key="SelectedBackgroundBrush" Color="#DDD" />

<!-- Border Brushes -->

<LinearGradientBrush x:Key="NormalBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="HorizontalNormalBorderBrush" StartPoint="0,0" EndPoint="1,0">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#CCC" Offset="0.0"/>
      <GradientStop Color="#444" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="DefaultedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#777" Offset="0.0"/>
      <GradientStop Color="#000" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<LinearGradientBrush x:Key="PressedBorderBrush" StartPoint="0,0" EndPoint="0,1">
  <GradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#444" Offset="0.0"/>
      <GradientStop Color="#888" Offset="1.0"/>
    </GradientStopCollection>
  </GradientBrush.GradientStops>
</LinearGradientBrush>

<SolidColorBrush x:Key="DisabledBorderBrush" Color="#AAA" />

<SolidColorBrush x:Key="SolidBorderBrush" Color="#888" />

<SolidColorBrush x:Key="LightBorderBrush" Color="#AAA" />

<!-- Miscellaneous Brushes -->
<SolidColorBrush x:Key="GlyphBrush" Color="#444" />

<SolidColorBrush x:Key="LightColorBrush" Color="#DDD" />

Para obtener el ejemplo completo, vea Ejemplo Styling with ControlTemplates.

Vea también

Conceptos

Ejemplo de ControlTemplate de ListViewItem

Instrucciones para el diseño de controles con estilos

Otros recursos

Ejemplos de ControlTemplate

  • Last updated on