ComboBox ControlTemplate 예제

아티클
08/20/2008

업데이트: 2007년 11월

WPF(Windows Presentation Foundation)의 컨트롤에는 해당 컨트롤의 시각적 트리가 포함된 ControlTemplate이 있습니다. 컨트롤의 ControlTemplate을 수정하면 해당 컨트롤의 구조와 모양을 변경할 수 있습니다. 컨트롤의 시각적 트리 부분만 바꿀 수 있는 방법은 없습니다. 즉, 컨트롤의 시각적 트리를 변경하려면 컨트롤의 Template 속성을 새로운 전체 ControlTemplate으로 설정해야 합니다.

이 항목에서는 WPFComboBox 컨트롤의 ControlTemplate을 보여 줍니다.

이 항목에는 다음 단원이 포함되어 있습니다.

사전 요구 사항
ComboBox ControlTemplate 예제
관련 항목

사전 요구 사항

이 항목의 예제를 실행하려면 WPF 응용 프로그램 작성 방법을 알고 있어야 합니다. 자세한 내용은 Windows Presentation Foundation 시작을 참조하십시오. WPF에서 스타일이 사용되는 방식도 알고 있어야 합니다. 자세한 내용은 스타일 지정 및 템플릿을 참조하십시오.

ComboBox ControlTemplate 예제

이 예제에는 기본적으로 ComboBox의 ControlTemplate에 정의된 요소가 모두 포함되어 있지만 특정 값은 예제로만 간주해야 합니다.

<ControlTemplate x:Key="ComboBoxToggleButton" TargetType="ToggleButton">
  <Grid>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition Width="20" />
    </Grid.ColumnDefinitions>
    <Border
      x:Name="Border" 
      Grid.ColumnSpan="2"
      CornerRadius="2"
      Background="{StaticResource NormalBrush}"
      BorderBrush="{StaticResource NormalBorderBrush}"
      BorderThickness="1" />
    <Border 
      Grid.Column="0"
      CornerRadius="2,0,0,2" 
      Margin="1" 
      Background="{StaticResource WindowBackgroundBrush}" 
      BorderBrush="{StaticResource NormalBorderBrush}"
      BorderThickness="0,0,1,0" />
    <Path 
      x:Name="Arrow"
      Grid.Column="1"     
      Fill="{StaticResource GlyphBrush}"
      HorizontalAlignment="Center"
      VerticalAlignment="Center"
      Data="M 0 0 L 4 4 L 8 0 Z"/>
  </Grid>
  <ControlTemplate.Triggers>
    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
      <Setter TargetName="Border" Property="Background" Value="{StaticResource DarkBrush}" />
    </Trigger>
    <Trigger Property="ToggleButton.IsChecked" Value="true">
      <Setter TargetName="Border" Property="Background" Value="{StaticResource PressedBrush}" />
    </Trigger>
    <Trigger Property="IsEnabled" Value="False">
      <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
      <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
      <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
      <Setter TargetName="Arrow" Property="Fill" Value="{StaticResource DisabledForegroundBrush}" />
    </Trigger>
  </ControlTemplate.Triggers>
</ControlTemplate>

<ControlTemplate x:Key="ComboBoxTextBox" TargetType="TextBox">
  <Border x:Name="PART_ContentHost" Focusable="False" Background="{TemplateBinding Background}" />
</ControlTemplate>

<Style x:Key="{x:Type ComboBox}" TargetType="ComboBox">
  <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="20"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ComboBox">
        <Grid>
          <ToggleButton 
            Name="ToggleButton" 
            Template="{StaticResource ComboBoxToggleButton}" 
            Grid.Column="2" 
            Focusable="false"
            IsChecked="{Binding Path=IsDropDownOpen,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
            ClickMode="Press">
          </ToggleButton>
          <ContentPresenter
            Name="ContentSite"
            IsHitTestVisible="False" 
            Content="{TemplateBinding SelectionBoxItem}"
            ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
            ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
            Margin="3,3,23,3"
            VerticalAlignment="Center"
            HorizontalAlignment="Left" />
          <TextBox x:Name="PART_EditableTextBox"
            Style="{x:Null}" 
            Template="{StaticResource ComboBoxTextBox}" 
            HorizontalAlignment="Left" 
            VerticalAlignment="Center" 
            Margin="3,3,23,3"
            Focusable="True" 
            Background="Transparent"
            Visibility="Hidden"
            IsReadOnly="{TemplateBinding IsReadOnly}"/>
          <Popup 
            Name="Popup"
            Placement="Bottom"
            IsOpen="{TemplateBinding IsDropDownOpen}"
            AllowsTransparency="True" 
            Focusable="False"
            PopupAnimation="Slide">
            <Grid 
              Name="DropDown"
              SnapsToDevicePixels="True"                
              MinWidth="{TemplateBinding ActualWidth}"
              MaxHeight="{TemplateBinding MaxDropDownHeight}">
              <Border 
                x:Name="DropDownBorder"
                Background="{StaticResource WindowBackgroundBrush}"
                BorderThickness="1"
                BorderBrush="{StaticResource SolidBorderBrush}"/>
              <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
                <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
              </ScrollViewer>
            </Grid>
          </Popup>
        </Grid>
        <ControlTemplate.Triggers>
          <Trigger Property="HasItems" Value="false">
            <Setter TargetName="DropDownBorder" Property="MinHeight" Value="95"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
          </Trigger>
          <Trigger Property="IsGrouping" Value="true">
            <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
          </Trigger>
          <Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="true">
            <Setter TargetName="DropDownBorder" Property="CornerRadius" Value="4"/>
            <Setter TargetName="DropDownBorder" Property="Margin" Value="0,2,0,0"/>
          </Trigger>
          <Trigger Property="IsEditable"
               Value="true">
            <Setter Property="IsTabStop" Value="false"/>
            <Setter TargetName="PART_EditableTextBox" Property="Visibility"  Value="Visible"/>
            <Setter TargetName="ContentSite" Property="Visibility" Value="Hidden"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
  <Style.Triggers>
  </Style.Triggers>
</Style>

앞의 예제에서는 다음 리소스를 하나 이상 사용합니다.

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

전체 샘플을 보려면 ControlTemplates를 사용한 스타일 지정 샘플을 참조하십시오.

참고 항목

개념

ComboBoxItem ControlTemplate 예제

스타일을 지정할 수 있는 컨트롤을 디자인하기 위한 지침

기타 리소스

ControlTemplate 예제

다음을 통해 공유

ComboBox ControlTemplate 예제

사전 요구 사항

ComboBox ControlTemplate 예제

참고 항목

개념

기타 리소스

추가 리소스