你的位置:首页 > ASP.net教程

[ASP.net教程]WPF 自定义DateControl DateTime控件


自定义日期控件,月份选择。如下是日期的一些效果图。

具体的样式、颜色可以根据下面的代码,自己调节即可

  

1、日期控件的界面

<UserControl x:Class="WpfApplication10.DateSelectControl"="http://schemas.microsoft.com/winfx/2006/xaml/presentation"="http://schemas.microsoft.com/winfx/2006/xaml"="http://schemas.open ="http://schemas.microsoft.com/expression/blend/2008"mc:Ignorable="d" d:DesignHeight="210" d:DesignWidth="200" Loaded="MonthUserControl_OnLoaded">  <UserControl.Resources>    <Style x:Key="LbMontyStyle" TargetType="Label">      <Setter Property="Foreground" Value="{Binding MonthForeGround}"></Setter>      <Setter Property="VerticalContentAlignment" Value="Center"></Setter>      <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>      <Setter Property="FontSize" Value="16"></Setter>    </Style>    <Style x:Key="ContentControlStyle" TargetType="RadioButton">      <Setter Property="Height" Value="39"></Setter>      <Setter Property="Margin" Value="0.2,0"></Setter>      <Setter Property="Width" Value="55"></Setter>      <Setter Property="Template">        <Setter.Value>          <ControlTemplate TargetType="RadioButton">            <Grid x:Name="T_Grid">              <Label Content="{TemplateBinding Content}" Style="{StaticResource LbMontyStyle}"></Label>            </Grid>            <ControlTemplate.Triggers>              <Trigger Property="IsMouseOver" Value="True">                <Setter TargetName="T_Grid" Property="Background" Value="#FF48CDF9"></Setter>              </Trigger>              <Trigger Property="IsChecked" Value="True">                <Setter TargetName="T_Grid" Property="Background" Value="DeepSkyBlue"></Setter>              </Trigger>            </ControlTemplate.Triggers>          </ControlTemplate>        </Setter.Value>      </Setter>    </Style>  </UserControl.Resources>  <Grid HorizontalAlignment="Center" VerticalAlignment="Center">    <Grid.RowDefinitions>      <RowDefinition Height="39"></RowDefinition>      <RowDefinition Height="Auto"></RowDefinition>      <RowDefinition Height="Auto"></RowDefinition>      <RowDefinition Height="Auto"></RowDefinition>      <RowDefinition Height="Auto"></RowDefinition>    </Grid.RowDefinitions>    <Grid.ColumnDefinitions>      <ColumnDefinition Width="Auto"></ColumnDefinition>      <ColumnDefinition Width="Auto"></ColumnDefinition>      <ColumnDefinition Width="Auto"></ColumnDefinition>    </Grid.ColumnDefinitions>    <!--年份-->    <Button x:Name="BtnPrevious" Click="BtnPrevious_OnClick" Grid.Row="0" Grid.Column="0">      <Button.Template>        <ControlTemplate>          <Grid x:Name="Main_Grid" VerticalAlignment="Center" HorizontalAlignment="Center" Height="26">            <Path x:Name="Path1" Stroke="#FF363FF3" StrokeThickness="5" Data="M0,13 20,0"></Path>            <Path x:Name="Path2" Stroke="#FF363FF3" StrokeThickness="5" Data="M0,11 20,24"></Path>          </Grid>          <ControlTemplate.Triggers>            <Trigger Property="IsMouseOver" Value="True">              <Trigger.Setters>                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>              </Trigger.Setters>            </Trigger>          </ControlTemplate.Triggers>        </ControlTemplate>      </Button.Template>    </Button>    <Button x:Name="BtnNext" Click="BtnNext_OnClick" Grid.Row="0" Grid.Column="2">      <Button.Template>        <ControlTemplate TargetType="Button">          <Grid x:Name="Main_Grid" VerticalAlignment="Center" HorizontalAlignment="Center" Height="26">            <Path x:Name="Path1" Stroke="#FF363FF3" StrokeThickness="5" Data="M20,13 0,0"></Path>            <Path x:Name="Path2" Stroke="#FF363FF3" StrokeThickness="5" Data="M20,11 0,24"></Path>          </Grid>          <ControlTemplate.Triggers>            <Trigger Property="IsMouseOver" Value="True">              <Trigger.Setters>                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>                <Setter TargetName="Path1" Property="Stroke" Value="#FF0A15F9"></Setter>              </Trigger.Setters>            </Trigger>          </ControlTemplate.Triggers>        </ControlTemplate>              </Button.Template>    </Button>    <TextBlock x:Name="TblYear" Style="{x:Null}" Grid.Row="0" Grid.Column="1" Text="2016" FontSize="16" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>    <!--月份-->    <RadioButton x:Name="BtnMonth1" Grid.Row="1" Grid.Column="0" Content="1月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth2" Grid.Row="1" Grid.Column="1" Content="2月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth3" Grid.Row="1" Grid.Column="2" Content="3月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth4" Grid.Row="2" Grid.Column="0" Content="4月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth5" Grid.Row="2" Grid.Column="1" Content="5月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth6" Grid.Row="2" Grid.Column="2" Content="6月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth7" Grid.Row="3" Grid.Column="0" Content="7月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth8" Grid.Row="3" Grid.Column="1" Content="8月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth9" Grid.Row="3" Grid.Column="2" Content="9月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth10" Grid.Row="4" Grid.Column="0" Content="10月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth11" Grid.Row="4" Grid.Column="1" Content="11月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>    <RadioButton x:Name="BtnMonth12" Grid.Row="4" Grid.Column="2" Content="12月" Click="ButtonMonth_OnClick" Style="{StaticResource ContentControlStyle}"></RadioButton>  </Grid></UserControl>

View Code

2、日期控件的后台

 public partial class DateSelectControl : UserControl  {    public DateSelectControl()    {      InitializeComponent();    }    public Brush MonthForeGround    {      get { return (Brush)GetValue(MonthForeGroundProperty); }      set { SetValue(MonthForeGroundProperty, value); }    }    public static readonly DependencyProperty MonthForeGroundProperty =    DependencyProperty.Register("MonthForeGround",    typeof(Brush), typeof(DateSelectControl), new PropertyMetadata(Brushes.White));    public DateTime Value    {      get { return (DateTime)GetValue(ValueProperty); }      set      {        SetValue(ValueProperty, value);      }    }    public static readonly DependencyProperty ValueProperty =    DependencyProperty.Register("Value",    typeof(DateTime), typeof(DateSelectControl), new PropertyMetadata(DateTime.Now));    private void MonthUserControl_OnLoaded(object sender, RoutedEventArgs e)    {      var data = new MonthUserControlModel()      {        MonthForeGround = MonthForeGround,      };      TblYear.Text = Value.Year.ToString();      int month = Value.Month;      switch (month)      {        case 1:          {            BtnMonth1.IsChecked = true;          }          break;        case 2:          {            BtnMonth2.IsChecked = true;          } break;        case 3:          {            BtnMonth2.IsChecked = true;          } break;        case 4:          {            BtnMonth2.IsChecked = true;          } break;        case 5:          {            BtnMonth2.IsChecked = true;          } break;        case 6:          {            BtnMonth2.IsChecked = true;          } break;        case 7:          {            BtnMonth2.IsChecked = true;          } break;        case 8:          {            BtnMonth2.IsChecked = true;          } break;        case 9:          {            BtnMonth2.IsChecked = true;          } break;        case 10:          {            BtnMonth2.IsChecked = true;          } break;        case 11:          {            BtnMonth2.IsChecked = true;          } break;        case 12:          {            BtnMonth2.IsChecked = true;          } break;      }      this.DataContext = data;    }    private void BtnPrevious_OnClick(object sender, RoutedEventArgs e)    {      int month = Value.Month;      int year = Convert.ToInt32(TblYear.Text) - 1;      var newDate = new DateTime(year, month, 1);      Value = newDate;      TblYear.Text = year.ToString();    }    private void BtnNext_OnClick(object sender, RoutedEventArgs e)    {      int month = Value.Month;      int year = Convert.ToInt32(TblYear.Text) + 1;      var newDate = new DateTime(year, month, 1);      Value = newDate;      TblYear.Text = year.ToString();    }    private void ButtonMonth_OnClick(object sender, RoutedEventArgs e)    {      int year = Value.Year;      var button = sender as RadioButton;      int month = Convert.ToInt32(button.Content.ToString().Replace("月", ""));      var newDate = new DateTime(year, month, 1);      Value = newDate;    }  }  public class MonthUserControlModel  {    public Brush MonthForeGround { get; set; }    public string Year { get; set; }    public int Month { get; set; }  }

View Code

3、界面引用

一般我们通过弹窗的方式,来选择日期

  <Button x:Name="BtnDateTime" HorizontalAlignment="Center" Margin="20,0" Content="时间选择" Foreground="White" Background="#FF23C5FB" Width="80" Height="32" Click="BtnDateTime_OnClick"></Button>  <Popup x:Name="DateTimePopup" Placement="Top" VerticalOffset="0" PopupAnimation="Fade" Width="200" Height="280" PlacementTarget="{Binding ElementName=BtnDateTime}" StaysOpen="True" IsOpen="False" AllowsTransparency="True">    <Grid Background="CornflowerBlue">      <Grid Margin="2">        <Grid.RowDefinitions>          <RowDefinition Height="30"></RowDefinition>          <RowDefinition Height="*"></RowDefinition>          <RowDefinition Height="50"></RowDefinition>        </Grid.RowDefinitions>        <Grid>          <Grid.ColumnDefinitions>            <ColumnDefinition></ColumnDefinition>            <ColumnDefinition Width="40"></ColumnDefinition>          </Grid.ColumnDefinitions>          <TextBlock Text="选择月份" Foreground="DeepSkyBlue" FontSize="18" VerticalAlignment="Center" Margin="15,0"></TextBlock>          <Button x:Name="BtnDateTimePopupClose" ToolTip="关闭" Grid.Column="1" HorizontalAlignment="Center" Background="Transparent" VerticalAlignment="Center" Click="BtnDateTimePopupClose_OnClick">            <Button.Template>              <ControlTemplate TargetType="Button">                <Grid x:Name="Main_Grid">                  <Path Stroke="White" StrokeThickness="3" Data="M0,0 L15,15"></Path>                  <Path Stroke="White" StrokeThickness="3" Data="M15,0 L0,15"></Path>                </Grid>                <ControlTemplate.Triggers>                  <Trigger Property="IsMouseOver" Value="True">                    <!--<Setter TargetName="Main_Grid" Property="Background" Value="#FFE2E2E2"></Setter>-->                  </Trigger>                </ControlTemplate.Triggers>              </ControlTemplate>            </Button.Template>          </Button>        </Grid>        <wpfApplication10:DateSelectControl Grid.Row="1" HorizontalAlignment="Center"></wpfApplication10:DateSelectControl>        <Button Grid.Row="2" HorizontalAlignment="Right" Margin="0,0,10,15" Content="确定" Foreground="White" Background="#FF23C5FB" Width="80" Height="32"></Button>      </Grid>    </Grid>  </Popup>

View Code

GitHub代码下载:https://github.com/Kybs0/DateControl