728x90
반응형
728x170
■ ControlTemplate 엘리먼트를 사용해 DatePicker 엘리먼트를 정의하는 방법을 보여준다.
▶ 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="ControlMediumColorKey">#ff7381f9</Color>
<Color x:Key="ControlDarkColorKey">#ff211aa9</Color>
<Color x:Key="ControlPressedColorKey">#ff211aa9</Color>
<Color x:Key="BorderLightColorKey">#ffcccccc</Color>
<Color x:Key="BorderDarkColorKey">#ff444444</Color>
<Color x:Key="HeaderTopColorKey">#ffc5cbf9</Color>
<Style x:Key="DatePickerCalendarStyleKey" TargetType="{x:Type Calendar}"
BasedOn="{StaticResource {x:Type Calendar}}" />
<Style x:Key="DropDownButtonStyleKey" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0" />
<VisualTransition
GeneratedDuration="00:00:00.1"
To="MouseOver" />
<VisualTransition
GeneratedDuration="00:00:00.1"
To="Pressed" />
</VisualStateGroup.Transitions>
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#f2ffffff" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#ccffffff" />
</ColorAnimationUsingKeyFrames>
<ColorAnimation
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="0"
To="#ff448dca" />
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#7fffffff" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="Background"
Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#ff448dca" />
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="Highlight"
Storyboard.TargetProperty="(UIElement.Opacity)"
Duration="00:00:00.001"
BeginTime="0">
<SplineDoubleKeyFrame KeyTime="0" Value="1" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#f4ffffff" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#eaffffff" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#c6ffffff" />
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames
Storyboard.TargetName="BackgroundGradient"
Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)"
Duration="00:00:00.001"
BeginTime="0">
<SplineColorKeyFrame KeyTime="0" Value="#6bffffff" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState Name="Disabled" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="0"
Width="19"
Height="18"
Background="#11ffffff"
FlowDirection="LeftToRight">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="20*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23*" />
<RowDefinition Height="19*" />
<RowDefinition Height="19*" />
<RowDefinition Height="19*" />
</Grid.RowDefinitions>
<Border Name="Highlight" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="4"
Margin="-1"
CornerRadius="0 0 1 1"
BorderThickness="1"
Opacity="1">
<Border.BorderBrush>
<SolidColorBrush Color="{DynamicResource ControlPressedColorKey}" />
</Border.BorderBrush>
</Border>
<Border Name="Background" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4"
Margin="0 -1 0 0"
CornerRadius="0.5"
BorderBrush="#ffffffff"
BorderThickness="1"
Opacity="1">
<Border.Background>
<SolidColorBrush Color="{DynamicResource ControlDarkColorKey}" />
</Border.Background>
</Border>
<Border Name="BackgroundGradient" Grid.Row="1" Grid.RowSpan="3" Grid.ColumnSpan="4"
Margin="0 -1 0 0"
CornerRadius="0.5"
BorderBrush="#BF000000"
BorderThickness="1"
Opacity="1">
<Border.Background>
<LinearGradientBrush
StartPoint="0.7 0"
EndPoint="0.7 1">
<GradientStop Color="#ffffffff" Offset="0" />
<GradientStop Color="#f9ffffff" Offset="0.375" />
<GradientStop Color="#e5ffffff" Offset="0.625" />
<GradientStop Color="#c6ffffff" Offset="1" />
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Grid.RowSpan="1" Grid.ColumnSpan="4"
StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush
StartPoint="0 0"
EndPoint="0 1">
<GradientStop Color="{DynamicResource HeaderTopColorKey }" />
<GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush
StartPoint="0.48 1.25"
EndPoint="0.48 -1">
<GradientStop Color="#ff494949" />
<GradientStop Offset="1" Color="#ff9f9F9F" />
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Path Grid.Row="1" Grid.Column="0" Grid.RowSpan="3" Grid.ColumnSpan="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Margin="4 3 4 3"
Fill="#ff2f2f2f"
RenderTransformOrigin="0.5 0.5"
Stretch="Fill"
Data="M 11.426758 8.4305077 L 11.749023 8.4305077
L 11.749023 16.331387 L 10.674805 16.331387
L 10.674805 10.299648 L 9.0742188 11.298672
L 9.0742188 10.294277 C 9.4788408 10.090176
9.9094238 9.8090878 10.365967 9.4510155
C 10.82251 9.0929432 11.176106 8.7527733
11.426758 8.4305077 z M 14.65086 8.4305077
L 18.566387 8.4305077 L 18.566387 9.3435936
L 15.671368 9.3435936 L 15.671368 11.255703
C 15.936341 11.058764 16.27293 10.960293
16.681133 10.960293 C 17.411602 10.960293
17.969301 11.178717 18.354229 11.615566
C 18.739157 12.052416 18.931622 12.673672
18.931622 13.479336 C 18.931622 15.452317
18.052553 16.438808 16.294415 16.438808
C 15.560365 16.438808 14.951641 16.234707
14.468243 15.826504 L14.881817 14.929531
C 15.368796 15.326992 15.837872 15.525723
16.289043 15.525723 C 17.298809 15.525723
17.803692 14.895514 17.803692 13.635098
C 17.803692 12.460618 17.305971 11.873379
16.310528 11.873379 C 15.83071 11.873379
15.399232 12.079271 15.016094 12.491055
L 14.65086 12.238613 z" />
<Ellipse Grid.ColumnSpan="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="3"
Height="3"
StrokeThickness="0"
Fill="#ffffffff" />
<Border Name="DisabledVisual" Grid.Row="0" Grid.RowSpan="4" Grid.ColumnSpan="4"
CornerRadius="0 0 0.5 0.5"
BorderThickness="1"
BorderBrush="#b2ffffff"
Opacity="0" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="DatePickerStyleKey" TargetType="{x:Type DatePicker}">
<Setter Property="Foreground" Value="#ff333333" />
<Setter Property="IsTodayHighlighted" Value="True" />
<Setter Property="SelectedDateFormat" Value="Short" />
<Setter Property="Padding" Value="2" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="CalendarStyle" Value="{DynamicResource DatePickerCalendarStyleKey}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Border.BorderBrush>
<LinearGradientBrush
StartPoint="0.5 0"
EndPoint="0.5 1">
<GradientStop Offset="0" Color="{DynamicResource BorderLightColorKey}" />
<GradientStop Offset="1" Color="{DynamicResource BorderDarkColorKey }" />
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush
StartPoint="0.5 0"
EndPoint="0.5 1">
<GradientStop Offset="0" Color="{DynamicResource HeaderTopColorKey }" />
<GradientStop Offset="1" Color="{DynamicResource ControlMediumColorKey}" />
</LinearGradientBrush>
</Border.Background>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="PART_DisabledVisual"
Storyboard.TargetProperty="Opacity"
Duration="0"
To="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Name="PART_Root"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Button Name="PART_Button" Grid.Row="0" Grid.Column="1"
Style="{StaticResource DropDownButtonStyleKey}"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="3 0 3 0"
Foreground="{TemplateBinding Foreground}"
Focusable="False" />
<DatePickerTextBox Name="PART_TextBox" Grid.Row="0" Grid.Column="0"
Foreground="{TemplateBinding Foreground}"
Focusable="{TemplateBinding Focusable}"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch" />
<Grid Name="PART_DisabledVisual" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
IsHitTestVisible="False"
Opacity="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Rectangle Grid.Row="0" Grid.Column="0"
RadiusX="1"
RadiusY="1"
Fill="#a5ffffff" />
<Rectangle Grid.Row="0" Grid.Column="1"
Margin="3 0 3 0"
Width="19"
Height="18"
RadiusX="1"
RadiusY="1"
Fill="#a5ffffff" />
<Popup Name="PART_Popup"
Placement="Bottom"
PlacementTarget="{Binding ElementName=PART_TextBox}"
AllowsTransparency="True"
StaysOpen="False" />
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel
HorizontalAlignment="Center"
VerticalAlignment="Center"
Orientation="Horizontal">
<DatePicker
VerticalAlignment="Center" />
<DatePicker
Style="{StaticResource DatePickerStyleKey}"
Margin="10 0 0 0"
VerticalAlignment="Center" />
</StackPanel>
</Window>728x90
반응형
그리드형(광고전용)
'C# > WPF' 카테고리의 다른 글
| [C#/WPF] ControlTemplate 엘리먼트 : Label 엘리먼트 정의하기 (0) | 2023.01.27 |
|---|---|
| [C#/WPF] ControlTemplate 엘리먼트 : GroupBox 엘리먼트 정의하기 (0) | 2023.01.27 |
| [C#/WPF] ControlTemplate 엘리먼트 : Frame 엘리먼트 정의하기 (0) | 2023.01.27 |
| [C#/WPF] ControlTemplate 엘리먼트 : Expander 엘리먼트 정의하기 (0) | 2023.01.25 |
| [C#/WPF] ControlTemplate 엘리먼트 : DocumentViewer 엘리먼트 정의하기 (0) | 2023.01.25 |
| [C#/WPF] ControlTemplate 엘리먼트 : DataGrid 엘리먼트 정의하기 (0) | 2023.01.24 |
| [C#/WPF] ControlTemplate 엘리먼트 : ContextMenu 엘리먼트 정의하기 (0) | 2023.01.23 |
| [C#/WPF] ControlTemplate 엘리먼트 : ComboBox 엘리먼트 정의하기 (0) | 2023.01.23 |
| [C#/WPF] ControlTemplate 엘리먼트 : CheckBox 엘리먼트 정의하기 (0) | 2023.01.23 |
| [C#/WPF] ControlTemplate 엘리먼트 : Calendar 엘리먼트 정의하기 (0) | 2023.01.22 |
댓글을 달아 주세요