关闭

【C#】wpf自定义calendar日期选择控件的样式

标签: 控件wpfc#
2199人阅读 评论(5) 收藏 举报
分类:

首先上图,看下样式

静态样式
gif动图

原理

1. 总览:

Calendar本质上是一个6x7的列表,这个列表可以用ItemsControl来实现。其填充的每一个item都是一个自定义样式的Button,Button外面是一个圆形的border。根据Button按钮的IsEnabled状态,设置foreground以达到灰色不点击的效果。

2. ItemsControl内容的生成:

主要是想办法生成第一行第一列的日期,其他的日期只需要DateTime.AddDays(i)即可。代码参考:

private void SetCalendar(int year, int month)
{
            _days.Clear();//请忽略
            DateTime datetime = new DateTime(year, month, 1);
            int week = (int)datetime.DayOfWeek;//获取指定月份的1号是周几
            datetime = datetime.AddDays(1 - week);
            for (int i = 0; i < 42; i++)
            {
            _days.Add(datetime.AddDays(i));
            }
            OnPropertyChanged("Days");//请忽略
}

首先,将当前年月传入,获取到当前月份的第一天是周几,然后推算出ItemsControl的第一行第一列的Datetime,最后就是顺次相加即可。

实现

1. 界面的实现

先上代码:

<Grid  Grid.RowSpan="4" Margin="0,54,0,0" Visibility="{Binding IsShowCalendar,Converter={StaticResource BoolToVisibilityCollapseConverter}}" Background="White" Width="350" HorizontalAlignment="Right">
                <Grid.RowDefinitions>
                    <RowDefinition Height="50"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
                    <Button VerticalAlignment="Center"  Command="{Binding YearCommand}" CommandParameter="Pre" Style="{StaticResource TransparentButtonStyle}">
                        <Button.Content>
                            <TextBlock Text="&lt;" FontSize="20"></TextBlock>
                        </Button.Content>
                    </Button>
                    <TextBlock VerticalAlignment="Center" FontSize="15" Text="{Binding CurrentYear}"></TextBlock>
                    <Button VerticalAlignment="Center"  Command="{Binding YearCommand}" CommandParameter="Next" Style="{StaticResource TransparentButtonStyle}">
                        <Button.Content>
                            <TextBlock Text="&gt;" FontSize="20"></TextBlock>
                        </Button.Content>
                    </Button>
                    <Button Margin="50,10,10,10" VerticalAlignment="Center" Command="{Binding MonthCommand}" CommandParameter="Pre" Style="{StaticResource TransparentButtonStyle}">
                        <Button.Content>
                            <TextBlock Text="&lt;" FontSize="20"></TextBlock>
                        </Button.Content>
                    </Button>
                    <TextBlock VerticalAlignment="Center" Text="{Binding CurrentMonth}" FontSize="15"></TextBlock>
                    <Button VerticalAlignment="Center" Command="{Binding MonthCommand}" CommandParameter="Next" Style="{StaticResource TransparentButtonStyle}">
                        <Button.Content>
                            <TextBlock Text="&gt;" FontSize="20"></TextBlock>
                        </Button.Content>
                    </Button>
                </StackPanel>
                <UniformGrid Grid.Row="1" Columns="7">
                    <TextBlock Text="MON" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="TUE" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="WED" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="THU" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="FRI" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="SAT" TextAlignment="Center"></TextBlock>
                    <TextBlock Text="SUN" TextAlignment="Center"></TextBlock>
                </UniformGrid>
                <ItemsControl Grid.Row="2" ScrollViewer.HorizontalScrollBarVisibility="Auto"
                ScrollViewer.VerticalScrollBarVisibility="Auto"
                            ItemsSource="{Binding Days}">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Background="{Binding Converter={StaticResource BACKUP_DateTimeToColorConverter}}"  Style="{StaticResource CalendarTransparentButtonStyle}"
                                    Content="{Binding Converter={StaticResource BACKUP_DateTimeToDayConverter}}" 
                                    Command="{Binding DataContext.ChooseDateCommand,RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type Window}}}" CommandParameter="{Binding}"
                                    MouseDoubleClick="Button_MouseDoubleClick">
                                <Button.Foreground>
                                    <MultiBinding Converter="{StaticResource BACKUP_DateTimeToForegroundMultiConverter}">
                                        <Binding></Binding>
                                        <Binding Path="DataContext.CurrentMonth" RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type Window}}"></Binding>
                                    </MultiBinding>
                                </Button.Foreground>
                                <Button.IsEnabled>
                                    <MultiBinding Converter="{StaticResource BACKUP_DateTimeToEnableMultiConverter}">
                                        <Binding></Binding>
                                        <Binding Path="DataContext.CutoffDayBegin" RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type Window}}"></Binding>
                                        <Binding Path="DataContext.CutoffDayEnd" RelativeSource="{RelativeSource FindAncestor,AncestorType={x:Type Window}}"></Binding>
                                    </MultiBinding>
                                </Button.IsEnabled>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="7"></UniformGrid>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
                <StackPanel Grid.Row="3" HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,31" Orientation="Horizontal">
                    <Button Content="Cancel" Style="{StaticResource btnSecondaryStyle}" Grid.Row="2" Command="{Binding HideCalendarCommand}"></Button>
                    <Button Content="{Binding CalendarSetText}" Style="{StaticResource btnPrimaryStyle}" Grid.Row="2" Command="{Binding HideCalendarCommand}"></Button>
                </StackPanel>
            </Grid>

其中,大量用到了Binding和MVVM,如果对方面还不是很扎实,可以参考下刘铁锰的视频.
这段代码中,主要部分是ItemsControl的ItemsSource绑定。这里绑定的是Days,其类型是

public ObservableCollection<DateTime> _days = new ObservableCollection<DateTime>();
        public ObservableCollection<DateTime> Days
        {
            get
            {
                return _days;
            }
        }

在设置Button的前景色和IsEnabled状态的时候,你也看到了用的是MultiBinding,并定义了两个Converter:
1. DateTimeToForegroundMultiConverter

 class DateTimeToForegroundMultiConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {
            DateTime dt=new DateTime();
            if(values[0] is DateTime)
            {
                dt = (DateTime)values[0];
            }
            int currentMonth;
            Int32.TryParse(values[1].ToString(), out currentMonth);
            if (dt.Month == currentMonth)
            {
                if(dt.ToShortDateString()==DateTime.Now.ToShortDateString())
                {
                    return new SolidColorBrush(Colors.White);
                }
                else
                {
                    return new SolidColorBrush(Colors.Black);
                }
            }
            else
            {
                return new SolidColorBrush(Colors.Gray);
            }
        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

2. DateTimeToEnableMultiConverter

 class DateTimeToEnableMultiConverter : IMultiValueConverter
    {
        public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
        {

            DateTime currentDay, cutoffDayBegin,cutoffDayEnd;
            if(values[0] is DateTime&&values[1] is DateTime&&values[2] is DateTime)
            {
                currentDay = (DateTime)values[0];
                cutoffDayBegin = (DateTime)values[1];
                cutoffDayEnd = (DateTime)values[2];
                if (DateTime.Compare(currentDay, cutoffDayBegin) >= 0 && DateTime.Compare(currentDay, cutoffDayEnd) <= 0)
                {
                    return true;
                }
                else
                {
                    return false;
                }
            }
            else
            {
                return false;
            }


        }

        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
        {
            return null;
        }
    }

2. 后台ViewModel的实现

其实后台没有什么代码,有一个SetCalendar方法,在月份或者年份发生变动的时候调用一下即可。

private void SetCalendar(int year, int month)
        {
            _days.Clear();
            DateTime datetime = new DateTime(year, month, 1);
            int week = (int)datetime.DayOfWeek;
            datetime = datetime.AddDays(1 - week);
            for (int i = 0; i < 42; i++)
            {

                _days.Add(datetime.AddDays(i));
            }
            OnPropertyChanged("Days");
        }

还有一个就是Button点击之后的Command命令

 private void exeChooseDate(object obj)
        {
            DateTime dt;
            DateTime.TryParse(obj.ToString(), out dt);
            CurrentMonth = dt.Month;
            CurrentYear = dt.Year;
        }

Button每点击一次,就会执行一次这个方法,CurrentMonth和CurrentYear这两个属性的值就会被更改,一些来决定是否需要重新绘制UI切换的上一个/下一个月份。

CurrentMonth和CurrentYear属性见下:

private int _currentYear = 2010;
        public int CurrentYear
        {
            get
            {
                return _currentYear;
            }
            set
            {
                if (_currentYear != value && value > 1978 && value < 9999)
                {
                    _currentYear = value;
                    OnPropertyChanged("CurrentYear");
                    SetCalendar(_currentYear, CurrentMonth);
                }
            }
        }

        private int _currentMonth = 1;
        public int CurrentMonth
        {
            get
            {
                return _currentMonth;
            }
            set
            {
                if (_currentMonth != value && value < 13 && value > 0)
                {
                    _currentMonth = value;
                    OnPropertyChanged("CurrentMonth");
                    SetCalendar(CurrentYear, _currentMonth);
                }
            }
        }
1
0
查看评论

潘鹏整理WPF(10)日历控件Calendar&&DatePicker

Calendar DisplayMode=”Month”,然后选择某个月份后就依然如上图 如第一张图中是9月但是显示了8月的30和31号,DisplayDateStart=”2015-9”可以去掉 如第一张图中是9月但是显示了10月1-10号,DisplayDateEnd=”2015-...
  • PanPen120
  • PanPen120
  • 2015-09-22 17:18
  • 4076

wpf自定义按钮样式

Wpft采用xaml文件的方式来向开发者提供绘制界面的平台。本篇我将根据自己在编写软件过程中的经历,向大家介绍一下如果自定义按钮的样式。通过这些介绍,你可以做出带圆角的按钮,带图标的按钮,颜色渐变的按钮,以及设置在鼠标经过,以及点击时按钮的样式。
  • mushao999
  • mushao999
  • 2014-08-27 10:16
  • 2916

WPF 自定义进度条

之前写过一篇文章[WPF 重写按钮变成音乐播放器按钮] (http://blog.csdn.net/lishuangquan1987/article/details/52097803), 其实这一篇是接着那一篇写的,这一篇重点介绍音乐播放器的滑动进度条。 本文示例下载地址 首先看看我做的效果...
  • lishuangquan1987
  • lishuangquan1987
  • 2017-01-05 22:46
  • 269

WPF自定义控件与样式(2)-自定义按钮FButton

http://www.cnblogs.com/anding/category/421292.html
  • tiz198183
  • tiz198183
  • 2016-11-30 13:51
  • 688

WPF 4 日历控件

创建日历控件      在WPF ToolKit 中其实日历控件早已存在,对于WPF 4 中的日历控件创建起来也很简单:1. 可以直接从Toolbox 中将Calendar 拖到设计窗口;2. 或直接在XAML 中写入代码。 Window x:...
  • yangyisen0713
  • yangyisen0713
  • 2014-03-14 13:08
  • 1247

在QT中以日历的形式选择时间

在QT中以日历的形式选择时间。注意!不是用的QComboBox
  • Zhu_Zhu_Wonder
  • Zhu_Zhu_Wonder
  • 2015-11-08 21:04
  • 6618

【WPF】C#代码动态改变控件的样式

C#引入样式
  • qq_18995513
  • qq_18995513
  • 2017-01-19 11:30
  • 1903

ASP.NET基础教程-Calendar日期选择控件的使用

Calendar Web控件是日期选择器控件,用来以月历的形式显示日期。 1、在表单上添加一个标签,ID值:LBL_DATE,Text属性为:“请选择日期”,一个文本框,ID值:TXT_DATE,      一个图像按扭,ID值:IBTN_DATE,一个日...
  • passionboyxie
  • passionboyxie
  • 2014-10-25 16:48
  • 2531

Wpf 动态添加控件设置样式

新公司主要用wpf做项目,之前也没有接触过这类东西,经过一周的学习发现wpf的页面布局,样式设置和网页设计差不多。 两者都有样式文件可以为控件统一设置样式,就连优先级都差不多,发现还挺有意思。下面进入正题,怎样在程序运行后动态添加控件。   要想添加控件,容器是必须要有的,几大布局控件都可以 G...
  • xingxing513234072
  • xingxing513234072
  • 2013-05-17 09:51
  • 5769

WPF设置全局控件样式

方法: 在资源文件APP.XAML中添加如下资源 <Application x:Class="_360UI.App" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen...
  • u010975589
  • u010975589
  • 2017-04-11 14:29
  • 1088
    个人资料
    • 访问:207120次
    • 积分:2797
    • 等级:
    • 排名:第15164名
    • 原创:90篇
    • 转载:18篇
    • 译文:1篇
    • 评论:38条
    文章分类
    最新评论