How To Change Text-Box Placeholder Color🎨 In UWP Project

Introduction

In this article, we’ll learn how we can change the textbox placeholder color in UWP applications. In UWP applications, the default placeholder color is black, if our application textbox background color is also black then the placeholder text will have the same color, so in this article we will change the placeholder color. In this way, we can create our application better. I hope you will like it.

Create your UWP Application

Step 1

Open Visual Studio and select File >> New Project.

 

 

The "New Project" window will pop up. Select "Blank App (Universal Windows)", name your project, and click “OK”.

 

 A "New Universal Windows Project" window will pop up. Select the target version and minimum version and click “OK”.

Step 2

Once your project is ready, open Solution Explorer. Click on “MainPage.xaml”, and design the application according to the requirement.

Step 3

Now, copy the sample code and paste before "ScrollViewer".

In the style tag, there is a key. Its name should be unique from other and can be user-defined.

<Page.Resources>

        <Style x:Key="vikasTextboxStyle" TargetType="TextBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">

                        <ContentControl x:Name="PlaceholderTextContentPresenter"
                              Grid.Row="1"
                              Margin="{TemplateBinding BorderThickness}"
                              Padding="{TemplateBinding Padding}"
                              IsTabStop="False"
                              Grid.ColumnSpan="2"
                              Content="{TemplateBinding PlaceholderText}"
                              IsHitTestVisible="False"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

And add the key in Style but remember that the key name should be same as you given in page.resourse style tag and write the code in textbox as given in the below screenshot.

<Style="{StaticResource vikasTextboxStyle}">

<TextBox.Resources>
                        <Style TargetType="ContentControl">
                            <Setter Property="Foreground" Value="Green"/>
                        </Style>
 </TextBox.Resources>

For a complete sample, you can use the code below.

<Page
    x:Class="AppPackages.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppPackages"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <Style x:Key="vikasTextboxStyle" TargetType="TextBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="TextBox">

                        <ContentControl x:Name="PlaceholderTextContentPresenter"
                              Grid.Row="1"
                              Margin="{TemplateBinding BorderThickness}"
                              Padding="{TemplateBinding Padding}"
                              IsTabStop="False"
                              Grid.ColumnSpan="2"
                              Content="{TemplateBinding PlaceholderText}"
                              IsHitTestVisible="False"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <ScrollViewer>
        <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Grid.RowDefinitions>
                <RowDefinition MaxHeight="150" MinHeight="140"></RowDefinition>
                <RowDefinition MaxHeight="500" MinHeight="400"></RowDefinition>
            </Grid.RowDefinitions>
            <Border>
                <StackPanel>
                    <Rectangle MinWidth="430" MinHeight="175">
                        <Rectangle.Fill>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0.8,1.3">
                                <GradientStop Color="Brown" Offset="1"  />
                                <GradientStop Color="CornflowerBlue" Offset=".4" />
                            </LinearGradientBrush>
                        </Rectangle.Fill>
                    </Rectangle>
                </StackPanel>
            </Border>
            <StackPanel Grid.Row="1" HorizontalAlignment="Center" Margin="0,180,0,150" >

                <TextBox x:Name="Email" PlaceholderText="Type Email..." Margin="10,30,10,20" Style="{StaticResource vikasTextboxStyle}">
                    <TextBox.Resources>
                        <Style TargetType="ContentControl">
                            <Setter Property="Foreground" Value="Green"/>
                        </Style>
                    </TextBox.Resources>
                </TextBox>

                <TextBox x:Name="Password" PlaceholderText="Type Password..."  Margin="10,10,10,10" Style="{StaticResource vikasTextboxStyle}">
                    <TextBox.Resources>
                        <Style TargetType="ContentControl">
                            <Setter Property="Foreground" Value="Red"/>
                        </Style>
                    </TextBox.Resources>
                </TextBox>

                <Button Content="Welcome to UWP application" HorizontalAlignment="Stretch"
               Width="367" Foreground="White" Background="OrangeRed" Height="44" Margin="10,10,10,30"></Button>
            </StackPanel>
        </Grid>
    </ScrollViewer>
</Page>

 

Now, you can see in the screenshot the email placeholder color is green and the password color is red. You can set the color as per your app requirement.