728x90
반응형
728x170
■ ControlTemplate 엘리먼트를 사용해 ComboBox 엘리먼트를 정의하는 방법을 보여준다.
▶ MainWindow.xaml
<Window x:Class="TestProject.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="800"
Height="600"
Title="TestProject"
FontFamily="나눔고딕코딩"
FontSize="16">
<Window.Resources>
<Color x:Key="DisabledControlDarkColorKey">#ffc5cbf9</Color>
<Color x:Key="DisabledForegroundColorKey">#ff888888</Color>
<Color x:Key="SelectedBackgroundColorKey">#ffc5cbf9</Color>
<Color x:Key="SelectedUnfocusedColorKey">#ffdddddd</Color>
<Color x:Key="ControlLightColorKey">White</Color>
<Color x:Key="ControlMediumColorKey">#ff7381f9</Color>
<Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
<Color x:Key="ControlMouseOverColorKey">#ff3843c4</Color>
<Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
<Color x:Key="GlyphColorKey">#ff444444</Color>
<Color x:Key="BorderLightColorKey">#ffcccccc</Color>
<Color x:Key="BorderMediumColorKey">#ff888888</Color>
<Color x:Key="BorderDarkColorKey">#ff444444</Color>
<Color x:Key="DisabledBorderDarkColorKey">#ff888888</Color>
<ControlTemplate x:Key="ComboBoxToggleButtonTemplateKey" TargetType="{x:Type ToggleButton}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlMouseOverColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Pressed" />
<VisualState Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledControlDarkColorKey}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="arrowPath"
Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColorKey}" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Border.BorderBrush).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledBorderDarkColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup Name="CheckStates">
<VisualState Name="Checked">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource ControlPressedColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Unchecked" />
<VisualState Name="Indeterminate" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border Name="border" Grid.ColumnSpan="2"
CornerRadius="2"
BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
<GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<LinearGradientBrush.GradientStops>
<GradientStopCollection>
<GradientStop Color="{DynamicResource ControlLightColorKey }" />
<GradientStop Offset="1.0" Color="{DynamicResource ControlMediumColorKey}" />
</GradientStopCollection>
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
</Border>
<Border Grid.Column="0"
Margin="1"
CornerRadius="2 0 0 2">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
</Border.Background>
</Border>
<Path Name="arrowPath" Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="M 0 0 L 4 4 L 8 0 Z">
<Path.Fill>
<SolidColorBrush Color="{DynamicResource GlyphColorKey}" />
</Path.Fill>
</Path>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ComboBoxTextBoxTemplateKey" TargetType="{x:Type TextBox}">
<Border Name="PART_ContentHost"
Background="{TemplateBinding Background}"
Focusable="False" />
</ControlTemplate>
<Style x:Key="{x:Type ComboBox}" TargetType="{x:Type ComboBox}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="MinWidth" Value="120" />
<Setter Property="MinHeight" Value="20" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="ScrollViewer.CanContentScroll" Value="true" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBox}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="MouseOver" />
<VisualState Name="Disabled">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource DisabledForegroundColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup Name="EditStates">
<VisualState Name="Editable">
<Storyboard>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="PART_EditableTextBox"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="contentSiteContentPresenter"
Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Hidden}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Uneditable" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToggleButton Grid.Column="2"
Template="{StaticResource ComboBoxToggleButtonTemplateKey}"
ClickMode="Press"
Focusable="false"
IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
<ContentPresenter Name="contentSiteContentPresenter"
ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}"
ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"
HorizontalAlignment="Left"
VerticalAlignment="Stretch"
Margin="3 3 23 3"
IsHitTestVisible="False"
Content="{TemplateBinding SelectionBoxItem}">
</ContentPresenter>
<TextBox Name="PART_EditableTextBox"
Template="{StaticResource ComboBoxTextBoxTemplateKey}"
Style="{x:Null}"
HorizontalAlignment="Left"
VerticalAlignment="Bottom"
Margin="3 3 23 3"
Background="Transparent"
Focusable="True"
IsReadOnly="{TemplateBinding IsReadOnly}"
Visibility="Hidden" />
<Popup Name="popup"
Placement="Bottom"
IsOpen="{TemplateBinding IsDropDownOpen}"
AllowsTransparency="True"
Focusable="False"
PopupAnimation="Slide">
<Grid
MinWidth="{TemplateBinding ActualWidth}"
MaxHeight="{TemplateBinding MaxDropDownHeight}"
SnapsToDevicePixels="True">
<Border Name="dropDownBorder"
BorderThickness="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource BorderMediumColorKey}" />
</Border.BorderBrush>
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlLightColorKey}" />
</Border.Background>
</Border>
<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="IsGrouping" Value="true">
<Setter Property="ScrollViewer.CanContentScroll" Value="false" />
</Trigger>
<Trigger
SourceName="popup"
Property="AllowsTransparency"
Value="true">
<Setter
TargetName="dropDownBorder"
Property="CornerRadius"
Value="4" />
<Setter
TargetName="dropDownBorder"
Property="Margin"
Value="0 2 0 0" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="{x:Type ComboBoxItem}" TargetType="{x:Type ComboBoxItem}">
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ComboBoxItem}">
<Border Name="border"
Padding="2"
Background="Transparent"
SnapsToDevicePixels="true">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="SelectionStates">
<VisualState Name="Unselected" />
<VisualState Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedBackgroundColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="SelectedUnfocused">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="border"
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)">
<EasingColorKeyFrame KeyTime="0" Value="{StaticResource SelectedUnfocusedColorKey}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<ComboBox
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ComboBoxItem>항목 1</ComboBoxItem>
<ComboBoxItem>항목 2</ComboBoxItem>
<ComboBoxItem IsSelected="True">항목 3</ComboBoxItem>
<ComboBoxItem>항목 4</ComboBoxItem>
</ComboBox>
</Window>728x90
반응형
그리드형(광고전용)
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] ControlTemplate 엘리먼트 : Expander 엘리먼트 정의하기 (0) | 2023.01.25 |
|---|---|
| [C#/WPF] ControlTemplate 엘리먼트 : DocumentViewer 엘리먼트 정의하기 (0) | 2023.01.25 |
| [C#/WPF] ControlTemplate 엘리먼트 : DatePicker 엘리먼트 정의하기 (0) | 2023.01.25 |
| [C#/WPF] ControlTemplate 엘리먼트 : DataGrid 엘리먼트 정의하기 (0) | 2023.01.24 |
| [C#/WPF] ControlTemplate 엘리먼트 : ContextMenu 엘리먼트 정의하기 (0) | 2023.01.23 |
| [C#/WPF] ControlTemplate 엘리먼트 : CheckBox 엘리먼트 정의하기 (0) | 2023.01.23 |
| [C#/WPF] ControlTemplate 엘리먼트 : Calendar 엘리먼트 정의하기 (0) | 2023.01.22 |
| [C#/WPF] ControlTemplate 엘리먼트 : 비주얼 상태와 트리거를 사용해 Button 엘리먼트 정의하기 (0) | 2023.01.22 |
| [C#/WPF] Control 클래스 : 사용자 지정 가능한 모양을 가진 컨트롤 만들기 (0) | 2023.01.21 |
| [C#/WPF] Application 클래스 : LoadComponent 정적 메소드를 사용해 리소스 딕셔너리 구하기 (0) | 2023.01.21 |
댓글을 달아 주세요