WPF自定义日历多选控件,自定义Calender日历多选控件

最新推荐文章于 2024-09-14 22:37:05 发布

小周爱学习

最新推荐文章于 2024-09-14 22:37:05 发布

阅读量1.8k

点赞数

分类专栏： wpf 文章标签： wpf自定义日历自定义calender日历多选日历控件 wpf calender多选

本文链接：https://blog.csdn.net/zhouwenguang163/article/details/79753797

版权

本文介绍了如何在WPF中创建一个自定义的多选日历控件，允许用户选择多个日期并将其显示在文本框中。通过重写Calendar控件的模板和样式，实现了日历的显示、隐藏、日期格式和分隔符等功能。控件还包括一个命令，用于在选择日期后执行查询操作。

摘要由CSDN通过智能技术生成

最近在开发中需要用到日历多选的功能，用户需要选择多个日期查询数据，Calender控件支持多选功能只需要设置SelectionMode="MultipleRange"就可以实现多选功能。我们的要求是点击日历图标的时候把日期控件显示出来，然后选择多个日期后把选择的日期放入文本框显示出来。

下面就开始把Calender重写下实现一套样式走天下

public class SunCalender : Calendar
    {
        /// <summary>
        /// 文本显示内容
        /// </summary>
        TextBlock textBlock;
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();
            
            //选择按钮
            Button selectButton = this.Template.FindName("PART_SelectButton", this) as Button;
            selectButton.Click += SelectButton_Click;

            //清除按钮
            Button clearButton = this.Template.FindName("PART_ClearButton" , this) as Button;
            clearButton.Click += ClearButton_Click;

            
            textBlock = this.Template.FindName("PART_TextBlock", this) as TextBlock;
            textBlock.FocusableChanged += ContentPresenter_FocusableChanged;
        }

        private void ContentPresenter_FocusableChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            IsDropDwonOpen = true;
        }

        /// <summary>
        /// 清除选择的日期
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void ClearButton_Click(object sender, RoutedEventArgs e)
        {
            if(textBlock != null)
            {
                this.SelectedDates.Clear();
                IsDropDwonOpen = false;
                textBlock.Text = string.Empty;
            }
        }

        /// <summary>
        /// 确定选择的日期
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void SelectButton_Click(object sender, RoutedEventArgs e)
        {
            if(textBlock != null)
            {
                IsDropDwonOpen = false;

                string text = string.Join(DateTimeSeparator, this.SelectedDates.Select(w => w.ToString(DateTimeFormat)));

                textBlock.ToolTip = text.Replace(DateTimeSeparator, Environment.NewLine);
                textBlock.Text = text;

                if(Command != null)
                {
                    Command.Execute(null);
                }
            }
        }

        /// <summary>
        /// 显示隐藏控制
        /// </summary>
        public bool IsDropDwonOpen
        {
            get { return (bool)GetValue(IsDropDwonOpenProperty); }
            set { SetValue(IsDropDwonOpenProperty, value); }

        }

        public static readonly DependencyProperty IsDropDwonOpenProperty = DependencyProperty.Register("IsDropDwonOpen", 
            typeof(bool), typeof(SunCalender), new FrameworkPropertyMetadata());

        /// <summary>
        /// 显示格式
        /// </summary>
        public string DateTimeFormat
        {
            get { return (string)GetValue(DateTimeFormatProperty); }
            set { SetValue(DateTimeFormatProperty, value); }

        }

        public static readonly DependencyProperty DateTimeFormatProperty = DependencyProperty.Register("DateTimeFormat",
            typeof(string), typeof(SunCalender), new FrameworkPropertyMetadata());

        /// <summary>
        /// 分隔符
        /// </summary>
        public string DateTimeSeparator
        {
            get { return (string)GetValue(DateTimeSeparatorProperty); }
            set { SetValue(DateTimeSeparatorProperty, value); }

        }

        public static readonly DependencyProperty DateTimeSeparatorProperty = DependencyProperty.Register("DateTimeSeparator",
            typeof(string), typeof(SunCalender), new FrameworkPropertyMetadata());

        /// <summary>
        /// 下拉按钮图标
        /// </summary>
        public string DropDwonButtonIcon
        {
            get { return (string)GetValue(DropDwonButtonIconProperty); }
            set { SetValue(DropDwonButtonIconProperty, value); }

        }

        public static readonly DependencyProperty DropDwonButtonIconProperty = DependencyProperty.Register("DropDwonButtonIcon",
            typeof(string), typeof(SunCalender), new FrameworkPropertyMetadata());

        /// <summary>
        /// 选择命令
        /// </summary>
        public ICommand Command
        {
            get
            {
                return (ICommand)GetValue(CommandProperty);
            }
            set
            {
                SetValue(CommandProperty, value);
            }
        }

        public static readonly DependencyProperty CommandProperty =
                DependencyProperty.Register("Command", typeof(ICommand), typeof(SunCalender));
    }

首先写一个类继承Calender 重写下它的OnApplyTemplate方法，下面再将里面都做了写什么事情

这个类里还定义了一些依赖属性，控制显示隐藏的，显示日期格式，还有多日期分隔符，日历图标属性。

下面开始写样式，样式有写多

<Style x:Key="CalendarStyle1" TargetType="{x:Type local:SunCalender}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Calendar}">
                    <StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
                        <Grid Background="{TemplateBinding Background}">
                            <Border x:Name="ContentPresenterBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
                                <Grid>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="25" />
                                    </Grid.ColumnDefinitions>
                                    <ToggleButton x:Name="DropDownToggle" Grid.Column="1" Cursor="Hand"
                                                          IsChecked="{Binding Path=IsDropDwonOpen,RelativeSource={RelativeSource TemplatedParent},Mode=TwoWay}" 
                                                          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                                                          HorizontalContentAlignment="Right" Background="Transparent" Style="{DynamicResource ToggleButtonStyle1}">
                                        <Image Source="{Binding Path=DropDwonButtonIcon,RelativeSource={RelativeSource TemplatedParent},Converter={StaticResource ImageConvert}}" Stretch="Uniform"/>
                                    </ToggleButton>
                                    <ContentPresenter x:Name="ContentPresenter" Margin="6,2,25,2" Visibility="Hidden" />
                                    <TextBlock x:Name="PART_TextBlock" Foreground="{TemplateBinding Foreground}" Grid.Column="0" VerticalAlignment="Center" />
                                </Grid>
                            </Border>
                            <Popup x:Name="Popup" IsOpen="{Binding Path=IsDropDwonOpen,RelativeSource={RelativeSource TemplatedParent}}">
                                <Grid Background="{TemplateBinding Background}">
                                    <Grid.RowDefinitions>
                                        <RowDefinition/>
                                        <RowDefinition/>
                                    </Grid.RowDefinitions>
                                    <CalendarItem Grid.Row="0" x:Name="PART_CalendarItem" Width="{TemplateBinding Width}" BorderBrush="{x:Null}" 
                                                      BorderThickness="0" Background="{TemplateBinding Background}" 
                                                      Style="{DynamicResource CalendarItemStyle1}"/>