How to make an underlined input text field in Windows Phone?

What is the easiest and correct way to make a TextBox, which is looks like an underlined input text field? You can see examples of what I mean, at the top of the screen in the Messaging Hub and in the Nokia Transport for example.

What technique should I use for implementing that?

Answers


May be this is an easy way:

  • First, set default background of textbox and border to transparent.

  • Then you could use Shawn Kendrot's answer to get an underline (because of you need a label inside the textbox)

  • And final, to make the focused textbox background transparent you must follow this Change focused textbox background/foreground in WP7

Or you could create a style that custom textbox template to transparent background and insert underline.

In my opinion, the best way is try to create a UserControl have Label property, you could set textbox label dynamically while you need.

I just create this one:

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>

Using:

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

Override the TextBox's Template to not have a background or border, then put a border around the label and the textbox with BorderThickness="0 0 0 1"


To mimic those pages, you'll want to wrap a textblock and textbox in a border. This should get you started.

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

Need Your Help

Error while uploading mp3 file to aws bucket using carrierwave

ruby-on-rails ruby amazon-s3 carrierwave

I'm trying to upload a mp3 file to aws bucket using carrierwave gem. I'm getting Broken Pipe exception. Here is the full trace

How do I correctly append the title of Incumbent to the current office holder?

jquery asp.net sql-server vb.net

it is something as simple as the query below that really gets on my nerves.