ListBox 样式和模板ListBox Styles and Templates

本主题介绍 ListBox 控件的样式和模板。This topic describes the styles and templates for the ListBox control. 您可以修改默认 ControlTemplate 以使控件具有独特的外观。You can modify the default ControlTemplate to give the control a unique appearance. 有关详细信息,请参阅通过创建 ControlTemplate 自定义现有控件的外观For more information, see Customizing the Appearance of an Existing Control by Creating a ControlTemplate.

ListBox 部件ListBox Parts

ListBox 控件没有任何命名部分。The ListBox control does not have any named parts.

ListBox创建 ControlTemplate 时,模板可能包含 ScrollViewer中的 ItemsPresenterWhen you create a ControlTemplate for a ListBox, your template might contain an ItemsPresenter within a ScrollViewer. ItemsPresenter 显示 ListBox中的每一项; ScrollViewer 允许在控件中滚动)。(The ItemsPresenter displays each item in the ListBox; the ScrollViewer enables scrolling within the control). 如果 ItemsPresenter 不是 ScrollViewer的直接子级,则必须为 ItemsPresenter 指定名称 ItemsPresenterIf the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

ListBox 状态ListBox States

下表列出了 ListBox 控件的可视状态。The following table lists the visual states for the ListBox control.

VisualState 名称VisualState Name VisualStateGroup 名称VisualStateGroup Name 描述Description
有效Valid ValidationStatesValidationStates 控件有效。The control is valid.
InvalidFocusedInvalidFocused ValidationStatesValidationStates 控件无效,但具有焦点。The control is not valid and has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates 控件无效,并且没有焦点。The control is not valid and does not have focus.

ListBoxItem 部件ListBoxItem Parts

ListBoxItem 控件没有任何命名部分。The ListBoxItem control does not have any named parts.

ListBoxItem 状态ListBoxItem States

下表列出了 ListBox 控件的可视状态。The following table lists the visual states for the ListBox control.

VisualState 名称VisualState Name VisualStateGroup 名称VisualStateGroup Name 描述Description
普通Normal CommonStatesCommonStates 默认状态。The default state.
MouseOverMouseOver CommonStatesCommonStates 鼠标指针悬停在控件上。The mouse pointer is positioned over the control.
DisabledDisabled CommonStatesCommonStates 该项已禁用。The item is disabled.
已设定焦点Focused FocusStatesFocusStates 该项有焦点。The item has focus.
失去焦点Unfocused FocusStatesFocusStates 该项没有焦点。The item does not have focus.
未选定Unselected SelectionStatesSelectionStates 未选定该项。The item is not selected.
已选定Selected SelectionStatesSelectionStates 该项当前已选定。The item is currentlyplate selected.
SelectedUnfocusedSelectedUnfocused SelectionStatesSelectionStates 该项已选定,但没有焦点。The item is selected, but does not have focus.
有效Valid ValidationStatesValidationStates 控件使用 Validation 类,并且 HasError 附加属性是 falseThe control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates HasError 附加属性是控件具有焦点 trueThe HasError attached property is true has the control has focus.
InvalidUnfocusedInvalidUnfocused ValidationStatesValidationStates HasError 附加属性是 true 控件没有焦点。The HasError attached property is true has the control does not have focus.

ListBox ControlTemplate 示例ListBox ControlTemplate Example

下面的示例演示如何为 ListBoxListBoxItem 控件定义 ControlTemplateThe following example shows how to define a ControlTemplate for the ListBox and ListBoxItem controls.

<Style x:Key="{x:Type ListBox}"
       TargetType="ListBox">
  <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="MinWidth"
          Value="120" />
  <Setter Property="MinHeight"
          Value="95" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListBox">
        <Border Name="Border"
                BorderThickness="1"
                CornerRadius="2">
          <Border.Background>
            <SolidColorBrush Color="{StaticResource ControlLightColor}" />
          </Border.Background>
          <Border.BorderBrush>
            <SolidColorBrush Color="{StaticResource BorderMediumColor}" />
          </Border.BorderBrush>
          <ScrollViewer Margin="0"
                        Focusable="false">
            <StackPanel Margin="2"
                        IsItemsHost="True" />
          </ScrollViewer>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsEnabled"
                   Value="false">
            <Setter TargetName="Border"
                    Property="Background">
              <Setter.Value>
                <SolidColorBrush Color="{StaticResource DisabledControlLightColor}" />
              </Setter.Value>
            </Setter>
            <Setter TargetName="Border"
                    Property="BorderBrush">
              <Setter.Value>
                <SolidColorBrush Color="{DynamicResource DisabledBorderLightColor}" />
              </Setter.Value>

            </Setter>
          </Trigger>
          <Trigger Property="IsGrouping"
                   Value="true">
            <Setter Property="ScrollViewer.CanContentScroll"
                    Value="false" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

<Style x:Key="{x:Type ListBoxItem}"
       TargetType="ListBoxItem">
  <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">
          <Border.Background>
            <SolidColorBrush Color="Transparent" />
          </Border.Background>
          <VisualStateManager.VisualStateGroups>
            <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>
          <ContentPresenter />
        </Border>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

上一示例使用了一个或多个以下资源。The preceding example uses 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>

有关完整示例,请参阅使用 ControlTemplates 设置样式示例For the complete sample, see Styling with ControlTemplates Sample.

请参阅See also