WPF自定义日历选择控件

深漂阿碉2025-07-16 9:55

XAML样式代码：

XAML调用自定义样式

C#后端响应函数

效果对比：

原控件：

自定义样式：

XAML样式代码：

复制代码

    <Window.Resources>
        <Style x:Key="CustomDatePickerStyle" TargetType="DatePicker">
            <Setter Property="BorderBrush" Value="Gray"/>
            <Setter Property="BorderThickness" Value="1"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="DatePicker">
                        <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <!-- 文本部分（居中） -->
                                <DatePickerTextBox x:Name="PART_TextBox" Grid.Column="0" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" FontSize="18" Background="Transparent" BorderThickness="0"/>
                                <!-- 日历按钮（放大并靠右） -->
                                <ToggleButton x:Name="PART_Button" Grid.Column="1" Width="40" Height="40" FontSize="24" Content="📅" Background="Transparent" BorderThickness="0" Click="ToggleCalendarPopup" Focusable="False"/>
                                <!-- 弹出日历 -->
                                <Popup x:Name="PART_Popup" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_Button}" StaysOpen="False">
                                    <Border Background="White" BorderBrush="LightGray" BorderThickness="1">
                                        <Calendar x:Name="PART_Calendar" DisplayDate="{TemplateBinding DisplayDate}" SelectedDate="{TemplateBinding SelectedDate}"/>
                                    </Border>
                                </Popup>
                            </Grid>
                        </Border>
                        <!-- 控制弹出逻辑 -->
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsDropDownOpen" Value="True">
                                <Setter TargetName="PART_Popup" Property="IsOpen" Value="True"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

XAML调用自定义样式

cs 复制代码

<DatePicker Style="{StaticResource CustomDatePickerStyle}" FontSize="22" BorderThickness="1"/>

C#后端响应函数

cs 复制代码

        //手动绑定日历选择
        private void ToggleCalendarPopup(object sender, RoutedEventArgs e)
        {
            if (sender is ToggleButton button &&
                button.TemplatedParent is DatePicker picker)
            {
                picker.IsDropDownOpen = !picker.IsDropDownOpen;
            }
        }