Partager via


ListView ControlTemplate, exemple

Mise à jour : novembre 2007

Les contrôles de Windows Presentation Foundation (WPF) disposent d'un ControlTemplate qui contient l'arborescence visuelle de ce contrôle. Vous pouvez modifier la structure et l'apparence d'un contrôle en modifiant le ControlTemplate de ce contrôle. Il est impossible de ne remplacer qu'une partie de l'arborescence visuelle d'un contrôle ; pour modifier l'arborescence visuelle d'un contrôle, vous devez affecter le nouveau ControlTemplate complet à la propriété Template de ce contrôle.

Cette rubrique montre le ControlTemplate du contrôle WPFListView.

Cette rubrique comprend les sections suivantes.

  • Composants requis
  • ListView ControlTemplate, exemple
  • Rubriques connexes

Composants requis

Pour exécuter les exemples de cette rubrique, vous devez savoir comment écrire des applications WPF. Pour plus d'informations, consultez Mise en route de Windows Presentation Foundation. Vous devez également savoir comment les styles sont utilisés dans WPF. Pour plus d'informations, consultez Application d'un style et création de modèles.

ListView ControlTemplate, exemple

Bien que cet exemple contienne tous les éléments définis dans le ControlTemplate d'un ListView par défaut, les valeurs spécifiques doivent être considérées comme des exemples.

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

L'exemple précédent utilise une ou plusieurs des ressources suivantes.

<!-- 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" />

Pour l'exemple complet, consultez Style avec ControlTemplates, exemple.

Voir aussi

Concepts

ListViewItem ControlTemplate, exemple

Recommandations pour la conception de contrôles auxquels un style peut être appliqué

Autres ressources

Exemples de ControlTemplate