如何使Windows Phone中带下划线的文本输入字段？(How to make an under

是什么力量让一个TextBox的最简单，最正确的方法，它看起来像一个带下划线的文本输入字段？你可以看到我的意思的例子，在信息中心和诺基亚运输，例如在屏幕的顶部。

我应该使用什么技术实现的？

Answer 1:

可能这是一个简单的方法：

首先，设置文本框和边框的默认背景为透明。
然后，你可以用肖恩Kendrot的回答得到一个下划线（因为你需要的文本内的标签）
而最终，使聚焦文本框背景透明，必须遵循这个变化集中文本框的背景/前景在WP7

或者你可以创建一种风格，自定义文本模板透明背景，并插入下划线。

在我看来，最好的办法就是尝试创建一个用户控件有标签属性，你可以动态设置文本框的标签，而你所需要的。

我只是创造这一个：

namespace Test
{
    public partial class CustomTextbox : UserControl
    {
        public readonly DependencyProperty LabelProperty = DependencyProperty.Register("Label", typeof(string), typeof(CustomTextbox), null);
        public readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(CustomTextbox), null);

        /// <summary>
        /// Get/set label
        /// </summary>
        public string Label
        {
            get
            {
                return (string)GetValue(LabelProperty);
            }
            set
            {
                SetValue(LabelProperty, value);
            }
        }

        /// <summary>
        /// Get/set text property
        /// </summary>
        public string Text
        {
            get
            {
                return (string)GetValue(TextProperty);
            }
            set
            {
                SetValue(TextProperty, value);
            }
        }

        public CustomTextbox()
        {
            InitializeComponent();

            DataContext = this;
        }
    }
}

XAML：

    <Border BorderBrush="White" BorderThickness="0,0,0,1">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="{Binding Path=Label}" VerticalAlignment="Bottom" Margin="0,0,0,2" />
            <TextBox Text="{Binding Path=Text}" FontSize="22" Grid.Column="1" Background="Transparent" BorderThickness="1" Foreground="White" Margin="0" Padding="10,0" VerticalAlignment="Bottom">
                <TextBox.Template>
                    <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.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="ReadOnly">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

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

                            <Border x:Name="DisabledOrReadonlyBorder"
                                    Margin="{StaticResource PhoneTouchTargetOverhang}"
                                    Background="Transparent"
                                    BorderBrush="{StaticResource PhoneDisabledBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Visibility="Collapsed">
                                <TextBox x:Name="DisabledOrReadonlyContent"
                                         Background="Transparent"
                                         FontFamily="{TemplateBinding FontFamily}"
                                         FontSize="{TemplateBinding FontSize}"
                                         FontStyle="{TemplateBinding FontStyle}"
                                         FontWeight="{TemplateBinding FontWeight}"
                                         Foreground="{StaticResource PhoneDisabledBrush}"
                                         IsReadOnly="True"
                                         SelectionBackground="{TemplateBinding SelectionBackground}"
                                         SelectionForeground="{TemplateBinding SelectionForeground}"
                                         Text="{TemplateBinding Text}"
                                         TextAlignment="{TemplateBinding TextAlignment}"
                                         TextWrapping="{TemplateBinding TextWrapping}" 
                                 BorderThickness="0"/>
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </TextBox.Template>
            </TextBox>
        </Grid>
    </Border>
</UserControl>

使用：

<local:CustomTextbox Label="label:" Text="text"></local:CustomTextbox>

Answer 2:

重写文本框的Template ，以没有背景或边框，然后把标签周围的边框和文本框用BorderThickness="0 0 0 1"

Answer 3:

为了模仿那些页面，你会想要包装的边框的文本块和文本框。这应该让你开始。

    <Border BorderBrush="White" BorderThickness="0,0,0,2">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Text="To:" Style="{StaticResource PhoneTextTitle2Style}" Margin="12,5" VerticalAlignment="Bottom"/>
            <TextBox Grid.Column="1" Background="Transparent" BorderThickness="0" Foreground="{StaticResource PhoneSubtleBrush}" Text="This is a test"
                     VerticalAlignment="Bottom" />
        </Grid>
    </Border>