Remove borders on custom renderer SearchBar for Xamarin Forms UWP

Question

I am currently working with a UWP project in Xamarin Forms.

When i use the default SearchBar, it comes with a border that i wish to remove as well as add a rounded background.

I have setup the renderer and some code, but the border is still intact.

public class SearchBar_UWP : SearchBarRenderer
{
    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        Control.Background = null;
        Control.BorderBrush = null;
    }
}

What am I missing in my UWP custom renderer code in order to remove the border and add a rounded background?

Answer 1

Remove border

You could copy the default style and modify BorderThickness property (in test i found we need to change the property on TextBox inside AutoSuggestBox ), then place the new style into Application.Resources , at last apply the style in custom renderer .

custom style in App

 <Application.Resources>
    <Style TargetType="AutoSuggestBox" x:Key="myStyle">
        <Setter Property="VerticalAlignment" Value="Top" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="TextBoxStyle" Value="{StaticResource AutoSuggestBoxTextBoxStyle}" />
        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="AutoSuggestBox">
                    <Grid x:Name="LayoutRoot">

                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="Orientation">
                                <VisualState x:Name="Landscape" />
                                <VisualState x:Name="Portrait" />

                            </VisualStateGroup>

                        </VisualStateManager.VisualStateGroups>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>

                        <TextBox x:Name="TextBox"
                        Style="{TemplateBinding TextBoxStyle}"
                        PlaceholderText="{TemplateBinding PlaceholderText}"
                        Header="{TemplateBinding Header}"
                        Width="{TemplateBinding Width}"
                                 BorderThickness="0"
       
                 
                        ScrollViewer.BringIntoViewOnFocusChange="False"
                        Canvas.ZIndex="0"
                        Margin="0"
                        DesiredCandidateWindowAlignment="BottomEdge"
                        UseSystemFocusVisuals="{TemplateBinding UseSystemFocusVisuals}" />

                        <Popup x:Name="SuggestionsPopup">
                            <Border x:Name="SuggestionsContainer">
                                <ListView x:Name="SuggestionsList"
                                Background="{ThemeResource AutoSuggestBoxSuggestionsListBackground}"
                                BorderThickness="{ThemeResource AutoSuggestListBorderThemeThickness}"
                                BorderBrush="{ThemeResource AutoSuggestBoxSuggestionsListBorderBrush}"
                                DisplayMemberPath="{TemplateBinding DisplayMemberPath}"
                                IsItemClickEnabled="True"
                                ItemTemplate="{TemplateBinding ItemTemplate}"
                                ItemTemplateSelector="{TemplateBinding ItemTemplateSelector}"
                                ItemContainerStyle="{TemplateBinding ItemContainerStyle}"
                                MaxHeight="{ThemeResource AutoSuggestListMaxHeight}"
                                Margin="{ThemeResource AutoSuggestListMargin}"
                                Padding="{ThemeResource AutoSuggestListPadding}" />
                            </Border>
                        </Popup>

                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

custom renderer

[assembly: ExportRenderer(typeof(Xamarin.Forms.SearchBar), typeof(MyRenderer))]
namespace App1.UWP
{
    class MyRenderer : SearchBarRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);

            if(Control != null)
            {
                Control.Style = App.Current.Resources["myStyle"] as Windows.UI.Xaml.Style;
            }
        }
    }
}

Add Rounded background

Warp SearchBar into Frame , and set CornerRadius on Frame .

  <Frame HeightRequest="100" WidthRequest="100" VerticalOptions="Center" HorizontalOptions="Center" BorderColor="Red" CornerRadius="50">
        <SearchBar />
    </Frame>