9

Is there any "placeholder type" property availble for textbox in xaml in windows phone 8

4 Answers 4

31

There is the PhoneTextBox in the official Windows Phone Toolkit, covered here.

Sample code:

<toolkit:PhoneTextBox Hint="Password"/>

enter image description here

To add toolkit to your project : Type the following into your package manager console :
PM> Install-Package WPtoolkit
And

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

inside <phone:PhoneApplicationPage tag in the xaml page

2
  • VerticalContentAlignment="Top" doesn't work? anyone know how to make it vertical align top (the text that is)
    – Jimmyt1988
    Commented Apr 15, 2014 at 16:01
  • Is there a way to keep the hint text when the texbox recieve the focus?? Commented Feb 5, 2015 at 8:59
1

Try like this below code:

<TextBox x:Name="InvoiceDate" Text="" Width="300"  TextAlignment="Left" Height="30" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" />
                    <TextBlock IsHitTestVisible="False" Text="Men att läsa" Width="300"  TextAlignment="Left" Height="30" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2" Padding="5, 5, 5, 5"  Foreground="LightGray">
                        <TextBlock.Style>
                            <Style TargetType="{x:Type TextBlock}">
                                <Setter Property="Visibility" Value="Collapsed"/>
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Text, ElementName=InvoiceDate}" Value="">
                                        <Setter Property="Visibility" Value="Visible"/>
                                    </DataTrigger>                                    
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
1

There is no placeholder property for TextBox. I use the following solution to work around this for a username textbox:

XAML:

<Grid>
    <TextBlock Name="UsernamePlaceholder" Text="Username" />
    <TextBox Name="UsernameTextBox" Text="" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus"/>
</Grid>

Code:

private void TextBox_GotFocus(object sender, RoutedEventArgs e) 
{    
    UsernamePlaceholder.Visibility = Visibility.Collapsed;
}

private void TextBox_LostFocus(object sender, RoutedEventArgs e)
{
    if (sender is TextBox)
    {
        var textbox = sender as TextBox;
        if (string.IsNullOrEmpty(textbox.Text))
        {
            UsernamePlaceholder.Visibility = Visibility.Visible;
        }
    }
}

This basically replaces the TextBox with a Grid-element, containing a TextBox and a TextBlock (working as placeholder). Then when the textbox is focused, the textblock is hidden, and when it looses focus the textblock is shown if the textbox is empty.

0

My solution is based on the answer of PKENO

XAML (UserControl):

<UserControl x:Class="FestivalProject.Controls.TextBoxPH"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"            
             mc:Ignorable="d">
    <TextBox x:Name="testTextBox" Margin="0" LostFocus="testTextBox_LostFocus" GotFocus="testTextBox_GotFocus"/>
</UserControl>

Code behind UserControl:

public partial class TextBoxPH : UserControl
    {
        private String _Text;

        public String Text
        {
            get { return _Text; }
            set { 
                _Text = testTextBox.Text = value;               
            }
        }



        private String _PlaceHolder;
        public String PlaceHolder
        {
            get { return _PlaceHolder; }
            set { 
                _PlaceHolder =testTextBox.Text = value;      
            }
        }        

        public TextBoxPH()
        {           
            InitializeComponent();  
        }   

        private void testTextBox_LostFocus(object sender, RoutedEventArgs e)
        {
            if (string.IsNullOrEmpty(testTextBox.Text)) testTextBox.Text = PlaceHolder;              

        }

        private void testTextBox_GotFocus(object sender, RoutedEventArgs e)
        {
            if (testTextBox.Text.Equals(PlaceHolder, StringComparison.OrdinalIgnoreCase)) testTextBox.Text = string.Empty;

        }
    }

XAML (in Window):

<txtPH:TextBoxPH  Margin="5"  Grid.ColumnSpan="2" PlaceHolder="PlaceholderText"/>

Probably not the most efficient way, but it works.

Not the answer you're looking for? Browse other questions tagged or ask your own question.