win8 metro 时间日期选择控件
2013-08-27 16:56
281 查看
由于win8缺少时间日期选择控件,在网上找到了一个高手手写的demo(可以在http://xamlwinrtcalendar.codeplex.com/上下载)。另外WinRTXamlToolkit.Controls.Calendar上也可以调用日历,还未尝试。
metro前台
metro 后台
效果图
metro前台
<common:LayoutAwarePage xmlns:c4fConverters="using:Coding4Fun.Toolkit.Controls.Converters" xmlns:c4fToolkit="using:Coding4Fun.Toolkit.Controls" xmlns:DatePicker="using:DatePicker"//在项目中引用DatePicker文件夹 xmlns:controls="using:WinRTXamlToolkit.Controls" > <Popup x:Name="LightDismissAnimatedPopup" HorizontalOffset="600" Grid.Row="1" VerticalOffset="200" IsLightDismissEnabled="False"> <Popup.ChildTransitions> <TransitionCollection> <PopupThemeTransition /> </TransitionCollection> </Popup.ChildTransitions> <Border BorderBrush="{StaticResource ApplicationForegroundThemeBrush}" BorderThickness="2" Background="{StaticResource ApplicationPageBackgroundThemeBrush}" Width="330" Height="500"> <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center"> <TextBlock Text="选择日期" FontSize="24.667" HorizontalAlignment="Center" /> <DatePicker:DatePicker x:Name="dtPicker" Value="{Binding CurrentDateTime, Mode=TwoWay}" HorizontalAlignment="Center" VerticalAlignment="Center" Height="350" /> <Grid HorizontalAlignment="Stretch" > <Grid.ColumnDefinitions> <ColumnDefinition /> <ColumnDefinition /> </Grid.ColumnDefinitions> <Button Grid.Column="0" Content="选择今天" Click="TodayPopupClicked" HorizontalAlignment="Center" /> <Button Grid.Column="1" Content="关闭" Click="CloseAnimatedPopupClicked" HorizontalAlignment="Center" /> </Grid> </StackPanel> </Border> </Popup> <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,87,0,-20" Grid.RowSpan="3" Width="1191"> <TextBlock FontSize="33" Height="auto" Text="请选择需要查询的日期:" Margin="20,20,20,38" TextAlignment="Right" Width="503"/> <c4fToolkit:Tile> <StackPanel Width="auto"> <TextBox HorizontalAlignment="Left" IsReadOnly="True" x:Name="datePicker" TextWrapping="Wrap" Text="{Binding CurrentDateTime, Converter={StaticResource DebugConverter}}" VerticalAlignment="Center" Height="57" Width="448" Margin="0,20,30,0" GotFocus="datePicker_GotFocus" /> </StackPanel> </c4fToolkit:Tile> <Button x:Name="btnRefresh" FontSize="22" Click="btnRefresh_Click" Content="刷新" Width="123" Height="44" Margin="0,20,0,24"/> </StackPanel>
metro 后台
public class DebugConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, string language) { return System.Convert.ToDateTime(value).ToString("yyyy年MM月dd日"); } public object ConvertBack(object value, Type targetType, object parameter, string language) { return value; } } private DateTime currentDateTime; public DateTime CurrentDateTime { get { return currentDateTime; } set { if (value == currentDateTime) return; currentDateTime = value; if (this.PropertyChanged != null) this.PropertyChanged(this, new PropertyChangedEventArgs("CurrentDateTime")); } } public event PropertyChangedEventHandler PropertyChanged; private void CloseAnimatedPopupClicked(object sender, RoutedEventArgs e) { if (LightDismissAnimatedPopup.IsOpen) { LightDismissAnimatedPopup.IsOpen = false; } DateTime time = Convert.ToDateTime(datePicker.Text); string url = "数据地址" + time.ToString("yyyy-MM-dd"); WebRequest request = HttpWebRequest.Create(url); IAsyncResult result = (IAsyncResult)request.BeginGetResponse(ResponseCallBack, request); } private void TodayPopupClicked(object sender, RoutedEventArgs e) { dtPicker.Value = DateTime.Now; } private void datePicker_GotFocus(object sender, RoutedEventArgs e) { if (!LightDismissAnimatedPopup.IsOpen) { LightDismissAnimatedPopup.IsOpen = true; } }
效果图
相关文章推荐
- Windows Phone 7 日期选择控件DatePicker和时间选择控件TimePicker
- HTML5新控件 - 日期和时间选择输入
- HTML5新控件 - 日期和时间选择输入
- Button、选择框、日期、时间控件
- Android 滚动的时间日期选择控件
- asp.net中的时间日期选择控件
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- ExtJs日期控件案例(可控制时间的选择)
- Windows Phone 7 日期选择控件DatePicker和时间选择控件TimePicker
- Bootstrap3 日期+时间选择控件 datetimepicker的使用方法说明
- 带时间的日期选择web控件
- Extjs DateTime 日期时间选择控件 (非点击日期强制选择) 支持4.0以上
- EXT日期时间选择控件,目前最好用的版本
- 带时间选择的JS日期控件
- HTML5新控件 - 日期和时间选择输入
- 带时间的日期选择web控件
- 带时间选择得JS日期控件
- Swing日期时间选择框控件
- 猎豹MFC--DataTimePicker日期时间选择控件CDatatimeCtrl CTime CTimeSpan时间间隔
- JS日期和时间选择控件升级版(自写)