Bug 45869 - On UWP, the right-edge of the border of an Entry is overwritten by the cancel button during typing
Summary: On UWP, the right-edge of the border of an Entry is overwritten by the cancel...
Alias: None
Product: Forms
Classification: Xamarin
Component: Forms ()
Version: 2.3.2
Hardware: PC Windows
: --- normal
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2016-10-25 09:11 UTC by John Hardman
Modified: 2016-10-27 23:14 UTC (History)
3 users (show)

Tags: UWP Entry SearchBar
Is this bug a regression?: ---
Last known good build:

Two screenshots side-by-side to show the problem (48.35 KB, image/png)
2016-10-25 09:11 UTC, John Hardman
Regular UWP TextBox w/colored clear all button (29.40 KB, image/png)
2016-10-27 22:34 UTC, Paul DiPietro [MSFT]

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report on Developer Community or GitHub with your current version information, steps to reproduce, and relevant error messages or log files if you are hitting an issue that looks similar to this resolved bug and you do not yet see a matching new report.

Related Links:

Description John Hardman 2016-10-25 09:11:26 UTC
Created attachment 18211 [details]
Two screenshots side-by-side to show the problem

As per the attached screenshot (please excuse the garish colors), the right-hand edge of the border surrounding an Entry on UWP is visible before the user starts typing, but is overwritten by the cancel button once the user starts typing. It seems the cancel button is slightly too far to the right (probably an edge case in the truest sense of the word!)
Comment 1 John Hardman 2016-10-25 12:09:41 UTC
Note that the default background color for the button is transparent, so the problem is not seen unless the default background color is changed.
Comment 2 John Hardman 2016-10-25 12:14:16 UTC
The same problem occurs with the Search button on the SearchBar on UWP.
Comment 3 Paul DiPietro [MSFT] 2016-10-25 20:48:11 UTC
What's your layout like in this screenshot? I can reproduce this somewhat if I have a ContentPage with the content set strictly to the Entry with HorizontalOptions set to Start (and no VerticalOptions set), but other than that it's a bit iffy. I'm wondering if there's a particular situation here along the lines of yours where it's more reliably reproducible. The smallest amount of nesting possible that gets it to occur would be great to know, too.
Comment 4 John Hardman 2016-10-26 09:25:56 UTC
@Paul DiPietro

Nothing special about the layout.

(1) Start with a new solution
(2) Add the following to the OnLaunched method, to change the background color of the cancel button on any Entry views:

Windows.UI.Xaml.Application.Current.Resources["TextBoxButtonBackgroundThemeBrush"] = new SolidColorBrush(Colors.Lime);

(3) In the portable code, create any layout containing an Entry, for example:

            public App()
                // The root page of your application
                MainPage = new ContentPage
                    Content = new StackLayout
                        VerticalOptions = LayoutOptions.Center,
                        Children = {
                            new Entry
                                HorizontalOptions = LayoutOptions.FillAndExpand,
                                Placeholder = "Enter text here"

(4) Build/run and then start typing into the Entry. Before typing the right edge of the Entry border is visible. Once typing the right edge is overlaid by the cancel button. (it probably always is, but with a transparent background for the button, people wouldn't normally realise that the button is too far to the right).
Comment 5 Paul DiPietro [MSFT] 2016-10-27 22:34:16 UTC
From what I can gather, this actually appears to be normal behavior. When you create a regular UWP app in VS and adjust a TextBox's styling so that it uses a non-standard color similar to what's been done here, that same overlap appears. I'll attach a screenshot.
Comment 6 Paul DiPietro [MSFT] 2016-10-27 22:34:36 UTC
Created attachment 18255 [details]
Regular UWP TextBox w/colored clear all button
Comment 7 John Hardman 2016-10-27 23:14:49 UTC
@Paul DiPietro - So, a Microsoft bug? Now that Xamarin is part of Microsoft, do you have a mechanism for passing bugs upstream, presumably to the Windows 10 team? It has to be considered a bug, even if just a cosmetic one.