ListView-Stile und -VorlagenListView Styles and Templates

In diesem Thema werden die Stile und Vorlagen für das ListView-Steuerelement beschrieben.This topic describes the styles and templates for the ListView control. Sie können die Standard ControlTemplate ändern, um dem Steuerelement eine eindeutige Darstellung zu verschaffen.You can modify the default ControlTemplate to give the control a unique appearance. Weitere Informationen finden Sie unter Anpassen der Darstellung eines vorhandenen Steuerelements durch Erstellen einer ControlTemplate.For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

ListView-TeileListView Parts

Das ListView-Steuerelement verfügt über keine benannten Teile.The ListView control does not have any named parts.

Wenn Sie einen ControlTemplate für eine ListViewerstellen, enthält die Vorlage möglicherweise eine ItemsPresenter innerhalb eines ScrollViewer.When you create a ControlTemplate for a ListView, your template might contain an ItemsPresenter within a ScrollViewer. (Die ItemsPresenter zeigt jedes Element in der ListViewan; das ScrollViewer ermöglicht das Scrollen im Steuerelement).(The ItemsPresenter displays each item in the ListView; the ScrollViewer enables scrolling within the control). Wenn das ItemsPresenter nicht das direkt untergeordnete Element des ScrollViewerist, müssen Sie dem ItemsPresenter den Namen ItemsPresenter.If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

ListView-ZuständeListView States

In der folgenden Tabelle werden die visuellen Zustände für das ListView-Steuerelement aufgelistet.The following table lists the visual states for the ListView control.

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
GültigValid ValidationStatesValidationStates Das-Steuerelement verwendet die Validation-Klasse, und die HasError angefügte-Eigenschaft ist false.The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true hat, dass das Steuerelement den Fokus besitzt.The HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true, wenn das Steuerelement keinen Fokus hat.The HasError attached property is true has the control does not have focus.

ListViewItem-TeileListViewItem Parts

Das ListViewItem-Steuerelement verfügt über keine benannten Teile.The ListViewItem control does not have any named parts.

ListViewItem-ZuständeListViewItem States

In der folgenden Tabelle sind die Zustände für das ListViewItem-Steuerelement aufgeführt.The following table lists the states for the ListViewItem control.

VisualState-NameVisualState Name VisualStateGroup-NameVisualStateGroup Name BeschreibungDescription
NormalNormal CommonStatesCommonStates Der StandardzustandThe default state.
DeaktiviertDisabled CommonStatesCommonStates Das Steuerelement ist deaktiviert.The control is disabled.
MouseOverMouseOver CommonStatesCommonStates Der Mauszeiger befindet sich über dem ComboBox-Steuerelement.The mouse pointer is over the ComboBox control.
Mit FokusFocused FocusStatesFocusStates Der Fokus liegt auf dem Steuerelement.The control has focus.
Ohne FokusUnfocused FocusStatesFocusStates Der Fokus liegt nicht auf dem Steuerelement.The control does not have focus.
AusgewähltSelected SelectionStatesSelectionStates Das Element ist zurzeit ausgewählt.The item is currently selected.
Nicht markiertUnselected SelectionStatesSelectionStates Das Element ist nicht ausgewählt.The item is not selected.
SelectedUnfocusedSelectedUnfocused SelectionStatesSelectionStates Das Element ist ausgewählt, besitzt jedoch keinen Fokus.The item is selected, but does not have focus.
GültigValid ValidationStatesValidationStates Das-Steuerelement verwendet die Validation-Klasse, und die HasError angefügte-Eigenschaft ist false.The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true hat, dass das Steuerelement den Fokus besitzt.The HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates Die HasError angefügte Eigenschaft ist true, wenn das Steuerelement keinen Fokus hat.The HasError attached property is true has the control does not have focus.

ListView ControlTemplate-BeispieleListView ControlTemplate Examples

Im folgenden Beispiel wird gezeigt, wie ein ControlTemplate für das ListView-Steuerelement und die zugehörigen Typen definiert werden.The following example shows how to define a ControlTemplate for the ListView control and its associated types.

<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">
    <Setter.Value>
      <LinearGradientBrush StartPoint="0,0"
                           EndPoint="0,1">
        <LinearGradientBrush.GradientStops>
          <GradientStopCollection>
            <GradientStop Color="{DynamicResource BorderLightColor}"
                          Offset="0.0" />
            <GradientStop Color="{DynamicResource BorderDarkColor}"
                          Offset="1.0" />
          </GradientStopCollection>
        </LinearGradientBrush.GradientStops>
      </LinearGradientBrush>
    </Setter.Value>
  </Setter>
  <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>
  <Setter Property="BorderBrush">
    <Setter.Value>
      <LinearGradientBrush EndPoint="0.5,1"
                           StartPoint="0.5,0">
        <GradientStop Color="Black"
                      Offset="0" />
        <GradientStop Color="White"
                      Offset="1" />
      </LinearGradientBrush>
    </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>
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).
                    (GradientBrush.GradientStops)[1].(GradientStop.Color)"
                                                Storyboard.TargetName="HeaderBorder">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource ControlMouseOverColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="Pressed" />
              <VisualState x:Name="Disabled" />
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <Border x:Name="HeaderBorder"
                  BorderThickness="0,1,0,1"
                  Padding="2,0,2,0">
            <Border.BorderBrush>
              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource BorderLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource BorderDarkColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>

            </Border.BorderBrush>
            <Border.Background>

              <LinearGradientBrush StartPoint="0,0"
                                   EndPoint="0,1">
                <LinearGradientBrush.GradientStops>
                  <GradientStopCollection>
                    <GradientStop Color="{DynamicResource ControlLightColor}"
                                  Offset="0.0" />
                    <GradientStop Color="{DynamicResource ControlMediumColor}"
                                  Offset="1.0" />
                  </GradientStopCollection>
                </LinearGradientBrush.GradientStops>
              </LinearGradientBrush>

            </Border.Background>
            <ContentPresenter x:Name="HeaderContent"
                              Margin="0,0,0,1"
                              RecognizesAccessKey="True"
                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                              SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
          </Border>
          <Thumb x:Name="PART_HeaderGripper"
                 HorizontalAlignment="Right"
                 Margin="0,0,-9,0"
                 Style="{StaticResource GridViewColumnHeaderGripper}" />
        </Grid>
      </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">
              <Border.Background>
                <SolidColorBrush Color="{DynamicResource ControlLightColor}" />
              </Border.Background>
              <Border.BorderBrush>
                <LinearGradientBrush StartPoint="0,0"
                                     EndPoint="0,1">
                  <LinearGradientBrush.GradientStops>
                    <GradientStopCollection>
                      <GradientStop Color="{DynamicResource BorderLightColor}"
                                    Offset="0.0" />
                      <GradientStop Color="{DynamicResource BorderDarkColor}"
                                    Offset="1.0" />
                    </GradientStopCollection>
                  </LinearGradientBrush.GradientStops>
                </LinearGradientBrush>
              </Border.BorderBrush>
            </Border>
          </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">
          <Border.Background>
            <SolidColorBrush Color="{StaticResource ControlLightColor}" />
          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
          </Border.BorderBrush>
          <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">
              <Setter.Value>
                <SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
              </Setter.Value>
            </Setter>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ListViewItem}"
       TargetType="ListViewItem">
  <Setter Property="SnapsToDevicePixels"
          Value="true" />
  <Setter Property="OverridesDefaultStyle"
          Value="true" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBoxItem">
        <Border x:Name="Border"
                Padding="2"
                SnapsToDevicePixels="true"
                Background="Transparent">
          <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="CommonStates">
              <VisualState x:Name="Normal" />
              <VisualState x:Name="MouseOver" />
              <VisualState x:Name="Disabled" />
            </VisualStateGroup>
            <VisualStateGroup x:Name="SelectionStates">
              <VisualState x:Name="Unselected" />
              <VisualState x:Name="Selected">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedBackgroundColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
              <VisualState x:Name="SelectedUnfocused">
                <Storyboard>
                  <ColorAnimationUsingKeyFrames Storyboard.TargetName="Border"
                                                Storyboard.TargetProperty="(Panel.Background).
                    (SolidColorBrush.Color)">
                    <EasingColorKeyFrame KeyTime="0"
                                         Value="{StaticResource SelectedUnfocusedColor}" />
                  </ColorAnimationUsingKeyFrames>
                </Storyboard>
              </VisualState>
            </VisualStateGroup>
          </VisualStateManager.VisualStateGroups>
          <GridViewRowPresenter VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

In den ControlTemplate Beispielen wird mindestens eine der folgenden Ressourcen verwendet.The ControlTemplate examples use one or more of the following resources.

<!--Control colors.-->
<Color x:Key="WindowColor">#FFE8EDF9</Color>
<Color x:Key="ContentAreaColorLight">#FFC5CBF9</Color>
<Color x:Key="ContentAreaColorDark">#FF7381F9</Color>

<Color x:Key="DisabledControlLightColor">#FFE8EDF9</Color>
<Color x:Key="DisabledControlDarkColor">#FFC5CBF9</Color>
<Color x:Key="DisabledForegroundColor">#FF888888</Color>

<Color x:Key="SelectedBackgroundColor">#FFC5CBF9</Color>
<Color x:Key="SelectedUnfocusedColor">#FFDDDDDD</Color>

<Color x:Key="ControlLightColor">White</Color>
<Color x:Key="ControlMediumColor">#FF7381F9</Color>
<Color x:Key="ControlDarkColor">#FF211AA9</Color>

<Color x:Key="ControlMouseOverColor">#FF3843C4</Color>
<Color x:Key="ControlPressedColor">#FF211AA9</Color>


<Color x:Key="GlyphColor">#FF444444</Color>
<Color x:Key="GlyphMouseOver">sc#1, 0.004391443, 0.002428215, 0.242281124</Color>

<!--Border colors-->
<Color x:Key="BorderLightColor">#FFCCCCCC</Color>
<Color x:Key="BorderMediumColor">#FF888888</Color>
<Color x:Key="BorderDarkColor">#FF444444</Color>

<Color x:Key="PressedBorderLightColor">#FF888888</Color>
<Color x:Key="PressedBorderDarkColor">#FF444444</Color>

<Color x:Key="DisabledBorderLightColor">#FFAAAAAA</Color>
<Color x:Key="DisabledBorderDarkColor">#FF888888</Color>

<Color x:Key="DefaultBorderBrushDarkColor">Black</Color>

<!--Control-specific resources.-->
<Color x:Key="HeaderTopColor">#FFC5CBF9</Color>
<Color x:Key="DatagridCurrentCellBorderColor">Black</Color>
<Color x:Key="SliderTrackDarkColor">#FFC5CBF9</Color>

<Color x:Key="NavButtonFrameColor">#FF3843C4</Color>

<LinearGradientBrush x:Key="MenuPopupBrush"
                     EndPoint="0.5,1"
                     StartPoint="0.5,0">
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="0" />
  <GradientStop Color="{DynamicResource ControlMediumColor}"
                Offset="0.5" />
  <GradientStop Color="{DynamicResource ControlLightColor}"
                Offset="1" />
</LinearGradientBrush>

<LinearGradientBrush x:Key="ProgressBarIndicatorAnimatedFill"
                     StartPoint="0,0"
                     EndPoint="1,0">
  <LinearGradientBrush.GradientStops>
    <GradientStopCollection>
      <GradientStop Color="#000000FF"
                    Offset="0" />
      <GradientStop Color="#600000FF"
                    Offset="0.4" />
      <GradientStop Color="#600000FF"
                    Offset="0.6" />
      <GradientStop Color="#000000FF"
                    Offset="1" />
    </GradientStopCollection>
  </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Das vollständige Beispiel finden Sie unter Beispiel zum Formatieren mit ControlTemplates.For the complete sample, see Styling with ControlTemplates Sample.

Siehe auchSee also