WPF篇（14）-ProgressBar进度条+Calendar日历控件+DatePicker日期控件

ProgressBar进度条

ProgressBar进度条通常在我们执行某个任务需要花费大量时间时使用，这时可以采用进度条显示任务或线程的执行进度，以便给用户良好的使用体验。

ProgressBar类定义

public class ProgressBar : RangeBase
{
    public static readonly DependencyProperty IsIndeterminateProperty;
    public static readonly DependencyProperty OrientationProperty;
 
    public ProgressBar();
 
    public bool IsIndeterminate { get; set; }
    public Orientation Orientation { get; set; }
 
    public override void OnApplyTemplate();
    protected override AutomationPeer OnCreateAutomationPeer();
    protected override void OnMaximumChanged(double oldMaximum, double newMaximum);
    protected override void OnMinimumChanged(double oldMinimum, double newMinimum);
    protected override void OnValueChanged(double oldValue, double newValue);
 
}

ProgressBar自身只有两个属性，分别是IsIndeterminate和Orientation 。

• IsIndeterminate属性：如果为true，表示以动画从左到右滑动的方式展示进度效果。
• Orientation属性：表示进度条的方式，水平时从左至右增长，垂直时从下到上增长。

ProgressBar案例

前端

    <StackPanel VerticalAlignment="Center">
        <ProgressBar x:Name="_ProgressBar" 
                     IsIndeterminate="False"  
                     Value="50" 
                     Minimum="0" 
                     Maximum="100" 
                     Orientation="Horizontal" 
                     Height="10" 
                     Margin="15"/>
        <TextBlock x:Name="_TextBlock" 
                   Text="50%" 
                   HorizontalAlignment="Center"/>
    </StackPanel>

后端

 public partial class MainWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            Loaded += (s, e) =>
            {
                Task.Factory.StartNew(() =>
                {
                    for (int i = 0; i <= 100; i++)
                    {
                        Dispatcher.Invoke(() => {
 
                            _TextBlock.Text = $"{i}%";
                            _ProgressBar.Value = i;
                        });
                        
                        Task.Delay(25).Wait();
                    }
                });
            };
 
        }
    }

Calendar日历控件

Calendar提供一个日历界面，供用户选择日期，它继承于Control基类。

属性成员

• DisplayDateStart：获取或设置可在日历中的第一个日期。
• CalendarItemStyle：获取或设置CalendarItem的样式
• CalendarDayButtonStyle：获取或设置CalendarDayButton的样式
• CalendarButtonStyle ：获取或设置CalendarButton的样式
• BlackoutDates：获取标记为不可选择的日期的集合。
• DisplayMode：获取或设置一个值，该值指示是否日历显示月、 年或十年。
• DisplayDateEnd：获取或设置可在日历中的日期范围内的最后日期。
• IsTodayHighlighted：获取或设置一个值，该值指示是否突出显示当前日期。默认true。
• SelectedDate：获取或设置当前选定的日期。[重要]
• SelectedDates：获取选定日期的集合。
• SelectionMode：获取或设置一个值，指示允许包含什么样的选择。如果是多选的号，就可以从SelectedDates属性获取所有已选的日期。
• DisplayDate：获取或设置要显示的日期。
• FirstDayOfWeek：获取或设置在一天中被视为周的开始。

事件成员

• SelectedDatesChanged：开启多选后，当所选集合的元素数量发生变化时引发。
• DisplayDateChanged：DisplayDate属性被修改后引发。
• SelectionModeChanged：SelectionMode属性（选择模式）发生改变后引发。
• DisplayModeChanged：DisplayMode属性（显示模式）发生改变后引发。

Calendar示例

前端代码

    <StackPanel HorizontalAlignment="Center" Margin="30">
        <Calendar x:Name="_Calendar" 
                  HorizontalAlignment="Left" 
                  VerticalAlignment="Top"
                  Margin="0,15" 
                  DisplayDateStart="2020/1/1 00:00:00"
                  DisplayDateEnd="2030/1/1 00:00:00"
                  SelectionMode="MultipleRange"/>
        <Button Content="选择" Click="Button_Click"/>
    </StackPanel>

后端代码

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var list = _Calendar.SelectedDates;
            var current = _Calendar.SelectedDate;
            MessageBox.Show($"当前日期数量:{list.Count},当前日期：{current}");
        }

DatePicker日期控件

DatePicker与Calender在某些属性上很相似，只是为了方便显示和操作，DatePicker将Calender进行了封装。

属性成员

• BlackoutDates：获取或设置为不可选择的日期的标记集合。不常用。
• DisplayDateStart：获取或设置要显示的第一个日期。
• DisplayDateEnd：获取或设置要显示的最后日期。
• DisplayDate：获取或设置要显示的日期。
• CalendarStyle：获取或设置呈现日历时所使用的样式。
• IsTodayHighlighted：获取或设置一个值，该值指示是否将突出显示当前日期。
• IsDropDownOpen：获取或设置一个值，该值指示Calendar 下拉列表是打开还是关闭。
• SelectedDateFormat：获取或设置用于显示所选的日期的格式。
• Text：获取DatePicker显示文本，或设置选定的日期
• FirstDayOfWeek：获取或设置在一天中被视为周的开始。
• SelectedDate：获取或设置当前选定的日期。
• HasEffectiveKeyboardFocus：获取一个值，该值指示DatePicker 是否 具有焦点。

事件成员

• CalendarClosed：DatePicker下拉列表关闭时引发此事件
• CalendarOpened：DatePicker下拉列表打开时引发此事件
• SelectedDateChanged：SelectedDate属性发生改变时引发此事件
• DateValidationError：当Text属性不是日期形式的字符串时引发此事件

DatePicker示例

前端代码

    
    <StackPanel HorizontalAlignment="Center" Margin="30" VerticalAlignment="Center">
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="开始日期" VerticalAlignment="Center" Margin="10,0"/>
            <DatePicker x:Name="_DatePickerStart" VerticalAlignment="Center" Width="120"/>
        </StackPanel>
        <StackPanel Orientation="Horizontal" Margin="10">
            <TextBlock Text="结束日期" VerticalAlignment="Center" Margin="10,0"/>
            <DatePicker x:Name="_DatePickerEnd" VerticalAlignment="Center" Width="120"/>
        </StackPanel>
        <Button Content="查询" Click="Button_Click" Margin="10,0"/>
       
    </StackPanel>

后端代码

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var selectedDate = $"查询日期:{_DatePickerStart.SelectedDate} {_DatePickerEnd.SelectedDate}\r\n";
            var text = $"文本值:{_DatePickerStart.Text} {_DatePickerEnd.Text}";
            MessageBox.Show($"{selectedDate} {text}");
        }