Question

创建TextBox最简单，最正确的方法是什么，它看起来像带下划线的输入文本字段？您可以在Messaging Hub的屏幕顶部和Nokia Transport中查看我的意思示例。

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

Messaging Hub Nokia Transport

Answer 1

将TextBox的Template覆盖为没有背景或边框，然后在标签和文本框周围添加BorderThickness="0 0 0 1"

的边框

Answer 2

要模仿这些页面，您需要在边框中包装文本块和文本框。这应该可以帮到你。

    <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>

Answer 3

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

首先，将文本框和边框的默认背景设置为透明。
然后您可以使用Shawn Kendrot的答案来获得下划线（因为您需要在文本框中添加标签）
最后，为了使焦点文本框背景透明，您必须遵循此Change focused textbox background/foreground in WP7

或者您可以创建一个样式，将自定义文本框模板设置为透明背景并插入下划线。

在我看来，最好的方法是尝试创建一个UserControl具有Label属性，您可以在需要时动态设置文本框标签。

我只是创建了这个：

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>

如何在Windows Phone中创建带下划线的输入文本字段？

3 个答案: