Стили и шаблоны элемента ListBoxListBox 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.

Части ListBoxListBox Parts

ListBox Управления не имеет частей с именами.The ListBox control does not have any named parts.

При создании ControlTemplate для ListBox, шаблон может содержать ItemsPresenter в ScrollViewer.When 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 имя ItemsPresenter.If the ItemsPresenter is not the direct child of the ScrollViewer, you must give the ItemsPresenter the name, ItemsPresenter.

Состояния ListBoxListBox States

В следующей таблице перечислены визуальные состояния ListBox элемента управления.The following table lists the visual states for the ListBox control.

Имя VisualStateVisualState Name Имя VisualStateGroupVisualStateGroup Name ОписаниеDescription
ValidValid 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.

Части ListBoxItemListBoxItem Parts

ListBoxItem Управления не имеет частей с именами.The ListBoxItem control does not have any named parts.

Состояния ListBoxItemListBoxItem States

В следующей таблице перечислены визуальные состояния ListBox элемента управления.The following table lists the visual states for the ListBox control.

Имя VisualStateVisualState Name Имя VisualStateGroupVisualStateGroup Name ОписаниеDescription
Норм.Normal CommonStatesCommonStates Состояние по умолчанию.The default state.
MouseOverMouseOver CommonStatesCommonStates Указатель мыши расположен над элементом управления.The mouse pointer is positioned over the control.
ОтключеноDisabled CommonStatesCommonStates Элемент отключен.The item is disabled.
FocusedFocused FocusStatesFocusStates Элемент имеет фокус.The item has focus.
Без фокуса вводаUnfocused FocusStatesFocusStates Элемент не имеет фокуса.The item does not have focus.
UnselectedUnselected SelectionStatesSelectionStates Элемент не выбран.The item is not selected.
SelectedSelected SelectionStatesSelectionStates Этот элемент сейчас выбран.The item is currentlyplate selected.
SelectedUnfocusedSelectedUnfocused SelectionStatesSelectionStates Элемент выбран, но не имеет фокуса.The item is selected, but does not have focus.
ValidValid ValidationStatesValidationStates Элемент управления использует Validation класс и HasError присоединенное свойство false.The control uses the Validation class and the HasError attached property is false.
InvalidFocusedInvalidFocused ValidationStatesValidationStates HasError Присоединенное свойство true имеет элемент управления имеет фокус.The 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.

Пример шаблона элемента управления ControlTemplate для ListBoxListBox ControlTemplate Example

В следующем примере показано определение ControlTemplate для ListBox и ListBoxItem элементов управления.The 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