wpf datepicker 樣式
阿新 • • 發佈：2018-03-19
point parent ext generated pat pick IT lean orb
在項目中用到的
1 <Style TargetType="{x:Type DatePicker}"> 2 <Setter Property="Foreground" Value="Black"/> 3 <Setter Property="Width" Value="335"/> 4 <Setter Property="Height" Value="73"/> 5 <Setter Property="Focusable" Value="False"/> 6<Setter Property="VerticalContentAlignment" Value="Center"/> 7 <Setter Property="IsTodayHighlighted" Value="True"/> 8 <Setter Property="SelectedDateFormat" Value="Short"/> 9 <Setter Property="Background" Value="White"/> 10 <Setter Property="BorderThickness" Value="1"/> 11 <Setter Property="BorderBrush" Value="#D2D6D9"/> 12 <Setter Property="CalendarStyle" Value="{DynamicResource DatePickerCalendar}"/> 13 <Setter Property="Template"> 14 <Setter.Value> 15 <ControlTemplate TargetType="{x:Type DatePicker}"> 16 <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" > 17 <VisualStateManager.VisualStateGroups> 18 <VisualStateGroup x:Name="CommonStates"> 19 <VisualState x:Name="Normal"/> 20 <VisualState x:Name="Disabled"> 21 <Storyboard> 22 <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_DisabledVisual"/> 23 </Storyboard> 24 </VisualState> 25 </VisualStateGroup> 26 </VisualStateManager.VisualStateGroups> 27 <Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"> 28 <Grid.Resources> 29 <SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/> 30 <ControlTemplate x:Key="DropDownButtonTemplate" TargetType="{x:Type Button}"> 31 <Grid> 32 <VisualStateManager.VisualStateGroups> 33 <VisualStateGroup x:Name="CommonStates"> 34 <VisualStateGroup.Transitions> 35 <VisualTransition GeneratedDuration="0"/> 36 <VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/> 37 <VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/> 38 </VisualStateGroup.Transitions> 39 <VisualState x:Name="Normal"/> 40 <VisualState x:Name="MouseOver"> 41 <Storyboard> 42 <ColorAnimation Duration="0" To="#FF448DCA" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/> 43 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 44 <SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/> 45 </ColorAnimationUsingKeyFrames> 46 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 47 <SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/> 48 </ColorAnimationUsingKeyFrames> 49 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 50 <SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/> 51 </ColorAnimationUsingKeyFrames> 52 </Storyboard> 53 </VisualState> 54 <VisualState x:Name="Pressed"> 55 <Storyboard> 56 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"> 57 <SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/> 58 </ColorAnimationUsingKeyFrames> 59 <DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight"> 60 <SplineDoubleKeyFrame KeyTime="0" Value="1"/> 61 </DoubleAnimationUsingKeyFrames> 62 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 63 <SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/> 64 </ColorAnimationUsingKeyFrames> 65 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 66 <SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/> 67 </ColorAnimationUsingKeyFrames> 68 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 69 <SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/> 70 </ColorAnimationUsingKeyFrames> 71 <ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient"> 72 <SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/> 73 </ColorAnimationUsingKeyFrames> 74 </Storyboard> 75 </VisualState> 76 <VisualState x:Name="Disabled"/> 77 </VisualStateGroup> 78 </VisualStateManager.VisualStateGroups> 79 <Grid Background="Transparent" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="18" Margin="0" VerticalAlignment="Center" Width="19"> 80 <Grid.ColumnDefinitions> 81 <ColumnDefinition Width="20*"/> 82 <ColumnDefinition Width="20*"/> 83 <ColumnDefinition Width="20*"/> 84 <ColumnDefinition Width="20*"/> 85 </Grid.ColumnDefinitions> 86 <Grid.RowDefinitions> 87 <RowDefinition Height="23*"/> 88 <RowDefinition Height="19*"/> 89 <RowDefinition Height="19*"/> 90 <RowDefinition Height="19*"/> 91 </Grid.RowDefinitions> 92 <Border x:Name="Highlight" Visibility="Hidden" BorderBrush="#FF45D6FA" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,1,1" Margin="-1" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/> 93 <Border x:Name="Background" Visibility="Hidden" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="#FF1F3B53" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3"/> 94 <Border x:Name="BackgroundGradient" Visibility="Hidden" BorderBrush="#BF000000" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3"> 95 <Border.Background> 96 <LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0"> 97 <GradientStop Color="#FFFFFFFF" Offset="0"/> 98 <GradientStop Color="#F9FFFFFF" Offset="0.375"/> 99 <GradientStop Color="#E5FFFFFF" Offset="0.625"/> 100 <GradientStop Color="#C6FFFFFF" Offset="1"/> 101 </LinearGradientBrush> 102 </Border.Background> 103 </Border> 104 <Rectangle Visibility="Hidden" Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1"> 105 <Rectangle.Fill> 106 <LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6"> 107 <GradientStop Color="#FF4084BD"/> 108 <GradientStop Color="#FFAFCFEA" Offset="1"/> 109 </LinearGradientBrush> 110 </Rectangle.Fill> 111 <Rectangle.Stroke> 112 <LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25"> 113 <GradientStop Color="#FF494949"/> 114 <GradientStop Color="#FF9F9F9F" Offset="1"/> 115 </LinearGradientBrush> 116 </Rectangle.Stroke> 117 </Rectangle> 118 <Path Grid.ColumnSpan="4" Grid.Column="0" Data="M 0 0 L 4 6 L 8 0" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="Center" Margin="4,3,4,3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Center"/> 119 <Ellipse Visibility="Hidden" Grid.ColumnSpan="4" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="3" StrokeThickness="0" VerticalAlignment="Center" Width="3"/> 120 <Border x:Name="DisabledVisual" Visibility="Hidden" BorderBrush="#B2FFFFFF" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,.5,.5" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/> 121 </Grid> 122 </Grid> 123 </ControlTemplate> 124 </Grid.Resources> 125 <Grid.ColumnDefinitions> 126 <ColumnDefinition Width="*"/> 127 <ColumnDefinition Width="Auto"/> 128 </Grid.ColumnDefinitions> 129 <!--<Button x:Name="PART_Button" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" Template="{StaticResource DropDownButtonTemplate}" VerticalAlignment="Center" Width="20"/>--> 130 <Button x:Name="PART_Button" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" VerticalAlignment="Center" Width="60" Height="73" Background="Transparent" > 131 <Button.Content> 132 <Image Source="/View/Resources/pop_ico_calendar.png" Height="55"/> 133 </Button.Content> 134 </Button> 135 <DatePickerTextBox x:Name="PART_TextBox" Text="{TemplateBinding Tag}" Grid.Column="0" IsHitTestVisible="False" Focusable="False" HorizontalContentAlignment="Center" Grid.Row="0" VerticalContentAlignment="Center" FontStyle="Normal" FontSize="32" Foreground="#484C50" Height="73" BorderThickness="0,0,2,0" BorderBrush="#F0F0F0" Background="Transparent" /> 136 <Grid x:Name="PART_DisabledVisual" Grid.ColumnSpan="2" Grid.Column="0" IsHitTestVisible="False" Opacity="0" Grid.Row="0" Height="73"> 137 <Grid.ColumnDefinitions> 138 <ColumnDefinition Width="*"/> 139 <ColumnDefinition Width="Auto"/> 140 </Grid.ColumnDefinitions> 141 <!--<Rectangle Grid.Column="0" Fill="#A5FFFFFF" RadiusY="1" Grid.Row="0" RadiusX="1"/>--> 142 <!--<Rectangle Grid.Column="1" Fill="#A5FFFFFF" Height="18" Margin="3,0,3,0" RadiusY="1" Grid.Row="0" RadiusX="1" Width="19"/>--> 143 <Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False"/> 144 </Grid> 145 </Grid> 146 </Border> 147 <ControlTemplate.Triggers> 148 <DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="false"> 149 <Setter Property="Foreground" TargetName="PART_TextBox" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/> 150 </DataTrigger> 151 <Trigger Property="IsMouseOver" Value="True"> 152 <Setter Property="Opacity" Value="0.8"/> 153 </Trigger> 154 <Trigger Property="IsDropDownOpen" Value="True"> 155 <Setter Property="Opacity" Value="1"/> 156 </Trigger> 157 </ControlTemplate.Triggers> 158 </ControlTemplate> 159 </Setter.Value> 160 </Setter> 161 </Style>
效果如下：
wpf datepicker 樣式