新时尚Windows8开发(18):制作类似单行簿的输入控件
2012-10-04 15:46
411 查看
单行簿,在上小学,初中的时候,相信我们都用过,那我们在让用户输入内容的,如文本框,也能做出这种格式吗?
对了,新浪微博Win8客户端,在发表新微博的时候,输入框也是这样的效果,看看下面的图。
新浪微博这个输入控件,是先把TextBox的背景设置为{x:Null},然后在TextBox下面放一个Image控件,再引用一张图片来实现的。
而我的做法也差不多,只是在TextBox下面放的不是图片,而是一个Grid元素,Grid分为几行,而每一行放一个高度为1的矩形,看起来就像一根直线,同样,也做出了这种效果。请看下图。
怎么样?还过得去吧,虽然不是什么高技术含量,但还是初步实现了类似单行簿的输入界面。
方法倒不复杂,首先,用一个用户控件,把这些东西排版好。
对于行的高度如何与TextBox中的文本配合,我们就不断地调,直到看起来差不多就行了,就是协调TextBox中的字体大小和Grid的行高。
然后,我们在其他页面中引用这个用户控件就行了。
这是一个笨方法,让各位见笑了,呵呵,如果你觉得有用,就研究一下,如果你想到更强大的方法,你就不用看了。哈!
对了,新浪微博Win8客户端,在发表新微博的时候,输入框也是这样的效果,看看下面的图。
新浪微博这个输入控件,是先把TextBox的背景设置为{x:Null},然后在TextBox下面放一个Image控件,再引用一张图片来实现的。
而我的做法也差不多,只是在TextBox下面放的不是图片,而是一个Grid元素,Grid分为几行,而每一行放一个高度为1的矩形,看起来就像一根直线,同样,也做出了这种效果。请看下图。
怎么样?还过得去吧,虽然不是什么高技术含量,但还是初步实现了类似单行簿的输入界面。
方法倒不复杂,首先,用一个用户控件,把这些东西排版好。
<UserControl x:Class="App1.ucxaml" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" Width="450" Height="270"> <UserControl.Resources> <Style x:Key="lineStyle" TargetType="Rectangle"> <Setter Property="VerticalAlignment" Value="Bottom"/> <Setter Property="Fill" Value="Red"/> <Setter Property="HorizontalAlignment" Value="Stretch"/> <Setter Property="Height" Value="1"/> <Setter Property="Opacity" Value="0.6"/> </Style> <Style x:Key="txtStyle" TargetType="TextBox"> <Setter Property="Background" Value="{x:Null}"/> <Setter Property="Foreground" Value="Black"/> <Setter Property="FontSize" Value="28"/> <Setter Property="TextWrapping" Value="Wrap"/> </Style> </UserControl.Resources> <Grid Background="LightGray"> <Grid Canvas.ZIndex="0"> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> <RowDefinition Height="38"/> </Grid.RowDefinitions> <Rectangle Grid.Row="0" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="1" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="2" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="3" Style="{StaticResource lineStyle}"/> <Rectangle Grid.Row="4" Style="{StaticResource lineStyle}"/> </Grid> <TextBox Name="txt" Canvas.ZIndex="1" Style="{StaticResource txtStyle}" MaxLength="120"/> </Grid> </UserControl>
对于行的高度如何与TextBox中的文本配合,我们就不断地调,直到看起来差不多就行了,就是协调TextBox中的字体大小和Grid的行高。
然后,我们在其他页面中引用这个用户控件就行了。
<Page x:Class="App1.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:App1" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <local:ucxaml /> </Grid> </Page>
这是一个笨方法,让各位见笑了,呵呵,如果你觉得有用,就研究一下,如果你想到更强大的方法,你就不用看了。哈!
相关文章推荐
- 新时尚Windows8开发(20):FlipView控件
- Windows8 Metro开发 (03) : AppBar控件之BottomAppBar
- 新时尚Windows8开发(5):消息框
- 实现类似google搜索效果,文本框输入智能提示,没有用ajax控件和第三方控件,完全手写代码
- Office 用控件制作一份专业合同书 开发借鉴
- windows8 开发教程 教你制作 多点触控Helper可将任意容器内任意对象进行多点缩放
- fxhomeSoft-silverlight版地图引擎开发教程 之 底图控件制作
- VS2013 用ATL向导制作OCX控件入门 (开发及测试)
- SharpDevelop 类似visual studio的一个C#制作的开源,.net开发工具
- 新时尚Windows8开发(3):应用程序状态
- 制作login.jsp页面,要求实现提供用户登陆的界面, 用户通过该界面输入用户名(控件名userName)和密码(控件名password), 然后点击“登录”按钮实现登陆操作.
- 新时尚Windows8开发(36):Play To的一些事情
- 新时尚Windows8开发(17):自己也来做一做弹出对话框
- 新时尚Windows8开发(27):根据应用程序的视图状态调整UI
- asp.net控件开发基础(18)
- Android自定义类似支付宝密码输入的控件
- 使用C#开发ActiveX控件 控件开发、制作CAB包、签名、部署
- Windows8应用开发学习(二)布局控件篇
- 新时尚Windows8开发(23):那些关于按钮的事
- 仿酷狗音乐播放器开发日志二十——换肤功能背景图片控件的制作(附源码)