UWP SearchBar BackgroundColor/BorderColor difficulties

C_BarbourC_Barbour ✭✭USUniversity ✭✭
edited October 2016 in Xamarin.Forms

I've spent a few days trying to understand and come up with solutions as to getting a plain white SearchBar background in UWP when you have a colored view behind your SearchBar. I thought I'd document it incase someone came across this issue and also if anyone had any better (and much more simplier/elegant) solutions because what I've done is appearing on insanity to me for something so simplistic.

The issue in screenshots:

As you can see, the search bar despite the BackgroundColor being set to White, is somewhat transparent and is taking the BackgroundColor of the StackLayout.

<OnPlatform x:Key="CustomSearchBarBackgroundColor" x:TypeArguments="Color" iOS="White" Android="Transparent" WinPhone="White"/> ... <custom:CustomSearchBar x:Name="SearchBarCustom" Placeholder="Search bar" Opacity="1" BackgroundColor="{StaticResource CustomSearchBarBackgroundColor}"/>

As a side issue, this is all within a tab view and it appears to take on the Page BackgroundColor, not the StackLayout but this isn't the case where it's not a tab view like so:

So to overcome this issue, I've had to create a CustomSearchBarRenderer with a copy of Xamarin.Forms.SearchBarRenderer and made a few small tweaks to get it working.

The main "change" (aka line of code I've had to add) is:
void OnControlLoaded(object sender, RoutedEventArgs routedEventArgs) { ... _queryTextBox.Background = ConvertExtensions.ToBrush(Color.White); ...

I also added a Grey-colored brush to the symbol icon because it was showing as white due to the mix-up with the background colors.
protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e) { ... SetNativeControl(new AutoSuggestBox { QueryIcon = new SymbolIcon(Symbol.Find) { Foreground = (SolidColorBrush)Windows.UI.Xaml.Application.Current.Resources["SearchBarFindColorBrush"] } }); ...

This counters the issue I was having with the SearchBar taking on the ContentPage BackgroundColor and it now shows as white + with the StackLayout color behind as the first screenshots do.

Secondly to overcome the supposed transparency issue I changed the ContentView (in my original project - Added it to the StackLayout in my test project) to an AbsoluteLayout and added a BoxView behind the custom search bar with a BackgroundColor="White"

    <custom:RoundedBoxView Margin="0" RoundedCornerColor="White"
             AbsoluteLayout.LayoutBounds="0.5,0.5,1,0.5"
             AbsoluteLayout.LayoutFlags="All"/>

    <custom:CustomSearchBar
          x:Name="SearchBarCustom"
          Placeholder="Search bar"
          Opacity="1"
          BackgroundColor="{StaticResource CustomSearchBarBackgroundColor}"
          AbsoluteLayout.LayoutBounds="0.5,0.5,1,0.5"
          AbsoluteLayout.LayoutFlags="All"/>
  </AbsoluteLayout>

I'm still painfully aware of the focus border color being this bright blue color and I can't seem to figure out where to change it. I've looked into VisualStateManager's in order to set the border color when 'Focused' but as of yet I've not been able to actually apply it due to the compilation SearchBar seems to have with FormsTextBox + AutoSuggestBox. Iirc I can't seem to apply a default AutoSuggestBox style because of FormsTextBox (crashes - can't remember the error, can post it up if anyone is interested in debugging this with me) and trying to apply a FormsTextBox style has no effect.
I've also looked into the FormsTextBoxStyle and picked out this section:
<VisualState x:Name="Focused"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}"/> </ObjectAnimationUsingKeyFrames> ...
But I've tried changing TextSelectionHighlightColorThemeBrush to another color in my App.xaml and it doesn't seem to change.

I'll also edit/add to this post within the next few hours/days to add a link to my test project.

I thought it might be a default disabled color coding because I set the commands manually using Behaviors instead of through the 'Command' property in SearchBar and I know I had issues before with buttons defaulting to Grey when the command wasn't set properly but I tested this and it doesn't seem to be the case (unless I'm mistaken).

I am also aware there is this bug to do with Windows Apps, search bar and background color having inconsistent behaviors but I'm not really sure what to do with that.

Posts

  • JohnHardmanJohnHardman mod GBUniversity mod

    @CarolynBarbour.9492 - It's not just the search bar. I hit the same thing earlier this week with Entry. To overcome the problem, I put a ContentView with white background between the Entry and the StackLayout that it was contained in, so that the StackLayout contained the ContentView, which then contained the Entry.

  • C_BarbourC_Barbour ✭✭ USUniversity ✭✭

    @JohnHardman Have you found any way for changing the color of the border color on focus yet? It's the one thing still niggling away at me about the UWP applications.

  • JohnHardmanJohnHardman mod GBUniversity mod

    @C_Barbour - not yet - it's on my list of things to do, but it's a long way down the list :-(

  • JohnHardmanJohnHardman mod GBUniversity mod

    @C_Barbour - This seems to sort out the bright blue color -= just replaced the ARGB value with whatever color you need.

                Windows.UI.Xaml.Application.Current.Resources["SystemControlHighlightAccentBrush"] =
                    new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));
    
  • C_BarbourC_Barbour ✭✭ USUniversity ✭✭

    @JohnHardman Thanks for updating me. Did you find it in any reference documents or just through trial and error?

  • JohnHardmanJohnHardman mod GBUniversity mod
    edited October 2016

    @C_Barbour - There is some useful stuff on MSDN under
    https://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.aspx
    but there was still trial and error involved...

  • C_BarbourC_Barbour ✭✭ USUniversity ✭✭

    @JohnHardman My UWP Status bar is still set to the color I've set it (a grey color).

    Let me know if you need me to check anything else out.

Sign In or Register to comment.