WPF自定义日历选择控件

目录

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;
            }
        }
相关推荐
Monkey-旭11 小时前
鸿蒙 5.1 深度解析:ArkUI 4.1 升级与分布式开发新范式
分布式·wpf·harmonyos·arkts·openharmony·arkui
FuckPatience3 天前
WPF TabControl页面绑定ItemsSource
wpf
cplmlm3 天前
WPF+MVVM入门学习
c#·wpf
诸葛务农4 天前
人形机器人——电子皮肤技术路线:光学式电子皮肤及MIT基于光导纤维的分布式触觉传感电子皮肤
分布式·机器人·wpf
界面开发小八哥5 天前
界面控件DevExpress WPF中文教程:Data Grid - 绑定数据
ui·.net·wpf·界面控件·devexpress·ui开发
界面开发小八哥5 天前
图表组件SciChart WPF再升级:v8.9带来油气井图、新交互与可视化增强
信息可视化·wpf·数据可视化·scichart
创可贴治愈心灵6 天前
WPF中UI线程频繁操作造成卡顿的处理
ui·c#·wpf
阿登林7 天前
初步学习WPF-Prism
学习·wpf
△曉風殘月〆7 天前
WPF MVVM进阶系列教程(三、使用依赖注入)
wpf·mvvm
此wei浩亦7 天前
WPF中使用 using prism.region 报错
c#·wpf·prism