Silverlight:通过模板定制设置日期选择器的格式
2011-08-07 11:18
330 查看
这是日前被问到的一个小问题,情况是这样的:Silverlight里面有一个DatePicker控件,它可以让用户选择或者输入日期。
这个控件其实很不错,既可选择,又可以输入。
但问题就出在这个输入上面,有时候我们可能不希望用户去输入,而是必须选择。但是,我们在DatePicker控件上面却找不到类似于IsReadOnly这样的属性。
其实,这样的需求,可以通过修改DatePicker控件的模板来实现。下面是一个示例
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
怎么理解上面的定义呢?我们用了一个Grid,里面放了三个控件。这里的关键就在于,包括Grid在内的四个控件的名称都是有规定的,而且控件类型也是规定的。请参考下面的文档就知道了
http://msdn.microsoft.com/en-us/library/cc278067(v=vs.95).aspx
The following table lists the named parts for the DatePicker control.
也就是说,这个控件为了支持定制,内部是定制好了所谓的Part,这都是可以替换的,只要名称和类型一样即可。
从这个例子看来,其他很多控件也是可以定制的,只要参考下面的介绍即可
http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx
所以说,理解模板,对于Silvelight或者WPF开发来说,是很重要的,给大家参考
这个控件其实很不错,既可选择,又可以输入。
但问题就出在这个输入上面,有时候我们可能不希望用户去输入,而是必须选择。但是,我们在DatePicker控件上面却找不到类似于IsReadOnly这样的属性。
其实,这样的需求,可以通过修改DatePicker控件的模板来实现。下面是一个示例
<UserControl xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" x:Class="SilverlightApplication3.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" d:DesignHeight="300" d:DesignWidth="400" xmlns:dp="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls"> <Grid x:Name="LayoutRoot" Background="White"> <sdk:DatePicker Height="40" Width="300"> <sdk:DatePicker.Template> <ControlTemplate> <Border BorderBrush="Black" BorderThickness="1"> <Grid x:Name="Root"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"></ColumnDefinition> <ColumnDefinition Width="Auto"></ColumnDefinition> </Grid.ColumnDefinitions> <dp:DatePickerTextBox IsReadOnly="True" x:Name="TextBox" Margin="5"></dp:DatePickerTextBox> <Button Content="Pick" Grid.Column="1" x:Name="Button" Margin="5"></Button> <Popup x:Name="Popup"></Popup> </Grid> </Border> </ControlTemplate> </sdk:DatePicker.Template> </sdk:DatePicker> </Grid> </UserControl>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
怎么理解上面的定义呢?我们用了一个Grid,里面放了三个控件。这里的关键就在于,包括Grid在内的四个控件的名称都是有规定的,而且控件类型也是规定的。请参考下面的文档就知道了
http://msdn.microsoft.com/en-us/library/cc278067(v=vs.95).aspx
The following table lists the named parts for the DatePicker control.
DatePicker Part | Type | Description |
---|---|---|
Root | Grid | The root of the control. |
Button | Button | The button that opens and closes the Calendar. |
TextBox | DatePickerTextBox | The text box that allows you to input a date. |
Popup | Popup | The popup for the DatePicker control. |
从这个例子看来,其他很多控件也是可以定制的,只要参考下面的介绍即可
http://msdn.microsoft.com/en-us/library/cc278075(v=VS.95).aspx
所以说,理解模板,对于Silvelight或者WPF开发来说,是很重要的,给大家参考
相关文章推荐
- MyEclipse6.5设置注释模板的日期为中文格式
- LaTeX中CTeX版本日期格式设置英文
- 如何设置MySql默认的日期格式
- oracle11g linux 日期格式设置
- Excel 2007的日期格式设置
- Silverlight教程第七部分: 使用控件模板定制控件的观感
- Java导出Excel设置大数据不被科学计数法显示、自定义日期格式
- 日期格式设置
- asp.net 2.0 中GridView里设置日期格式
- element-ui的el-date-picker组件设置提交时的日期值格式
- 关于nth-child()伪类选择器选取元素设置transform样式但是无法通过hover改变transform的问题
- 设计html日期控件(支持日期显示、时间显示、格式定制)
- bat批处理日期时间格式设置使用
- POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写(copy)
- c#格式化数据 日期格式设置示例 format使用 DataFormatString使用
- 设置ll和ls -l命令中显示的日期格式
- Qt中DateTimeEdit等时间日期控件设置显示格式
- POI设置EXCEL单元格格式为文本、小数、百分比、货币、日期、科学计数法和中文大写
- 通过scanner实现日期格式的数据输入
- 使用Jackson时转换JSON时,日期格式设置