How to customize border and background of a textbox in a Universal Windows 10 app?

Question

I am developing a universal Windows 10 app. I want to customize a textbox to remove its default border hover and background.

My problem is that I do not know how to customize on the Universal Windows Platform.

Here is the code that I am using:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <!--layoutroot where all page content is placed-->
    <Grid x:Name="layoutRoot" Background="#1BA1E2">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Grid.Row="0" Margin="12,0,12,0">
            <!--Title Page-->
            <TextBlock Text="Login Here" Foreground="White" FontSize="40" Padding="60,80,60,80"/>

            <!--username-->
            <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
                <TextBox PlaceholderText="Username" Name="Username" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Username_GotFocus"/>
            </Border>
            <!--Password-->
            <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
                <TextBox PlaceholderText="Password" Name="Password" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Password_GotFocus"/>
            </Border>

            <!--Button login-->
            <Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
                <TextBlock Text="Log In" Foreground="White" Margin="0" Padding="200,5,0,5"/>
            </Border>

        </StackPanel><!--end StackPanel-->
    </Grid><!--end Grid layoutRoot-->
</Grid>

Here is a screenshot of my UI problem:

When I put the mouse pointer over a textbox, it changes the border and the background.

Answer 1

To customize TextBox , we can edit TextBox styles and templates .

Firstly, we can open "Document Outline" in Visual Studio by open "View" → "Other Windows" → "Document Outline" .

Then in "Document Outline" select the TextBox we want to modify, for example, select "Username" and right click, then select "Edit Template" → "Edit a Copy..." .

This will popup a "Create Style Resource" dialog. And by default it will generate the default style under Page.Resources like:

<Page.Resources>
    <Style x:Key="TextBoxStyle1" TargetType="TextBox">
    ...
    </Style>
</Page.Resources>

After this we can edit the style and template to achieve what we want.

The hover style is defined in "PointerOver" VisualState .

<VisualState x:Name="PointerOver">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState> 

To remove its default border and background, we can just delete the animation target BorderBrush and Background like:

<VisualState x:Name="PointerOver">
    <Storyboard>
        <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>-->
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

And the "Focused" VisualState is the same.

Besides, form the default template, you can find TextBox has already had a Border in it.

<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/>

So we can just add CornerRadius="10" in this Border :

<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" `CornerRadius="10"`/>

And then use this new style in TextBox without additional Border like:

<StackPanel Grid.Row="0" Margin="12,0,12,0">
    <!--  Title Page  -->
    <TextBlock FontSize="40" Foreground="White" Padding="60,80,60,80" Text="Login Here" />

    <!--  username  -->
    <TextBox Name="Username" Margin="5" Background="Transparent" BorderBrush="White" GotFocus="Username_GotFocus" PlaceholderText="Username" Style="{StaticResource TextBoxStyle1}" />
...
</StackPanel>

If you want to apply this style to all TextBox s in the Page , you can remove x:Key="TextBoxStyle1" in the Style and don't set the Style property of TextBox :

<Page.Resources>
    <Style TargetType="TextBox">
    ...
    </Style>
</Page.Resources>

With this, the style will apply to all TextBox s in the Page automatically.