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.

만들 때를 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.

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.
사용 안 함Disabled 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 항목이 선택된 currentlyplate입니다.The item is currentlyplate selected.
SelectedUnfocusedSelectedUnfocused SelectionStatesSelectionStates 항목이 선택되었지만 항목에 포커스가 없습니다.The item is selected, but does not have focus.
유효Valid 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.

ListBox ControlTemplate 예제ListBox ControlTemplate Example

다음 예제에서는 정의 하는 방법을 보여 줍니다는 ControlTemplate 에 대 한 합니다 ListBoxListBoxItem 컨트롤입니다.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>

전체 샘플을 보려면 Styling with ControlTemplates Sample(ControlTemplate으로 스타일 지정 샘플)을 참조하세요.For the complete sample, see Styling with ControlTemplates Sample.

참고자료See also