Windows Phone 7中带题头的TextBox和PasswordBox

	 

	之前在做豆瓣电台的时候想实现一个登录界面，起初是把TextBlock和TextBox放在一起（效果如下），但是这样实现出来的效果既浪费空间，又不美观。

	

	因为之前写WPF对自定义控件有一些基础，所以就对TextBox和Password的Template做了些手脚，让题头融合到控件里。这样既美观又节省空间，同时还可以保证不会推动系统控件风格和功能，如下图：

	

	实现上面的效果非常简单，只需要在Blend中创建一个新的TextBox，然后右键-Edit Template-Edit a Copy。在弹出的对话框中的Name设定一个名字，如“LabelTextBox”，然后在Define in中选择Application以在整个程序范围内都可以使用它。

	操作完这些以后Blend会自动在App.xaml里创建一个新的Style资源，我们在里面搜索一下ContentControl，这就是TextBox中显示文字的元素了。剩下的就是对这个元素进行改造，如调整位置，添加新元素等等。下面是我写的TextBox和PasswordBox的资源：

	        <ControlTemplate x:Key="PhoneDisabledTextBoxTemplate" TargetType="TextBox">

	            <ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>

	        </ControlTemplate>

	        <Style x:Key="LabelTextBox" TargetType="TextBox">

	            <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/>

	            <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}"/>

	            <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}"/>

	            <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}"/>

	            <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}"/>

	            <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}"/>

	            <Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}"/>

	            <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>

	            <Setter Property="Padding" Value="2"/>

	            <Setter Property="Template">

	                <Setter.Value>

	                    <ControlTemplate TargetType="TextBox">

	                        <Grid Background="Transparent">

	                            <VisualStateManager.VisualStateGroups>

	                                <VisualStateGroup x:Name="CommonStates">

	                                    <VisualState x:Name="Normal"/>

	                                    <VisualState x:Name="MouseOver"/>

	                                    <VisualState x:Name="Disabled">

	                                        <Storyboard>

	                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="EnabledBorder">

	                                                <DiscreteObjectKeyFrame KeyTime="0">

	                                                    <DiscreteObjectKeyFrame.Value>

	                                                        <Visibility>Collapsed</Visibility>

	                  &nb

补充：移动开发 , Windows Phone ,

上一个：[翻译]WP7 QuickStart-第二篇-使用XAML创建Windows Phone用户界面
下一个：如何在WP7上用XNA写2D游戏（二）