Xamarin.Forms UWP - How to hide or change color of Picker / ComboBox dropdown arrow

4
votes

I'm working on a Xamarin.Forms project for UWP right now, and I'm using a custom renderer for Pickers. I'm actually overlaying the Picker on top of a label and icon so that when the user clicks the label/icon, it opens the picker. In order to accomplish this, I'm basically setting everything on the picker to transparent - the border, text, and background. The picker still functions just fine, and all picker elements are invisible, except the picker arrow is still visible. How do I affect the color of the picker arrow (in order to make it transparent), or just get rid of it altogether?

enter image description here

Getting rid of the text and background color is as easy as:

var transparent = Windows.UI.Color.FromArgb(0, 0, 0, 0);
Control.Foreground = new SolidColorBrush(transparent);
Control.Background = new SolidColorBrush(transparent);

But I can't figure out how to affect the dropdown arrow.

I know the Control is a FormsComboBox VisualElementRender<Picker, FormsComboBox>.Control, and I've tried scanning through all the properties of Control in Visual Studio.

1
xamarincomboboxxamarin.formsuwpxamarin.uwp

1 Answers

3
votes

For custom render, the correspondent native control of Picker is ComboBox in UWP . See Renderer Base Classes and Native Controls. So that for the drop down arrow you want to change , which is actually the DropDownGlyph element inside the control template of Combobox. You could copy the default ComboBox styles and templates and update the DropDownGlyph to not visible by setting the Visibility property to Collapsed. For example:

The render:

public class MyPickerRenderer : PickerRenderer
{      
   protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
   {
       base.OnElementChanged(e);     
       Control.Style=(Windows.UI.Xaml.Style)App.Current.Resources["pickerstyle"]; 
   }
}

The style in App.xaml

<Application
    x:Class="PickerDemo.UWP.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:PickerDemo.UWP"
    RequestedTheme="Light">
    <Application.Resources>
        <Style x:Key="pickerstyle" TargetType="ComboBox">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ComboBox">
                        <Grid>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="32" />
                            </Grid.ColumnDefinitions>
                            <ContentPresenter
                                x:Name="HeaderContentPresenter"
                                Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
                                x:DeferLoadStrategy="Lazy"
                                Content="{TemplateBinding Header}"
                                ContentTemplate="{TemplateBinding HeaderTemplate}"
                                FlowDirection="{TemplateBinding FlowDirection}"
                                FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
                                Visibility="Collapsed" />
                            <Border
                                x:Name="Background"
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}" />
                            <Border
                                x:Name="HighlightBackground"
                                Grid.Row="1"
                                Grid.ColumnSpan="2"
                                Background="{ThemeResource SystemControlHighlightListAccentLowBrush}"
                                BorderBrush="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Opacity="0" />
                            <ContentPresenter
                                x:Name="ContentPresenter"
                                Grid.Row="1"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <TextBlock
                                    x:Name="PlaceholderTextBlock"
                                    Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}"
                                    Text="{TemplateBinding PlaceholderText}" />
                            </ContentPresenter>
                            <FontIcon
                                x:Name="DropDownGlyph"
                                Grid.Row="1"
                                Grid.Column="1"
                                Margin="0,10,10,10"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Center"
                                AutomationProperties.AccessibilityView="Raw"
                                FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                FontSize="12"
                                Foreground="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                                Glyph="&#xE0E5;"
                                IsHitTestVisible="False"
                                Visibility="Collapsed" />
                            <Popup x:Name="Popup">
                                <Border
                                    x:Name="PopupBorder"
                                    Margin="0,-1,0,-1"
                                    HorizontalAlignment="Stretch"
                                    Background="{ThemeResource SystemControlBackgroundChromeMediumLowBrush}"
                                    BorderBrush="{ThemeResource SystemControlForegroundChromeHighBrush}"
                                    BorderThickness="{ThemeResource ComboBoxDropdownBorderThickness}">
                                    <ScrollViewer
                                        x:Name="ScrollViewer"
                                        MinWidth="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownContentMinWidth}"
                                        AutomationProperties.AccessibilityView="Raw"
                                        BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                        Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                        HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                        HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                        IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                        IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                        IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                        VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                        VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                        VerticalSnapPointsAlignment="Near"
                                        VerticalSnapPointsType="OptionalSingle"
                                        ZoomMode="Disabled">
                                        <ItemsPresenter Margin="{ThemeResource ComboBoxDropdownContentMargin}" />
                                    </ScrollViewer>
                                </Border>
                            </Popup>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageBackgroundAltMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundListMediumBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HighlightBackground" Storyboard.TargetProperty="BorderBrush">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <DoubleAnimation
                                                Storyboard.TargetName="HighlightBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="FocusedPressed">
                                        <Storyboard>
                                            <DoubleAnimation
                                                Storyboard.TargetName="HighlightBackground"
                                                Storyboard.TargetProperty="Opacity"
                                                To="1"
                                                Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextBlock" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownGlyph" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                    <VisualState x:Name="FocusedDropDown">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames
                                                Storyboard.TargetName="PopupBorder"
                                                Storyboard.TargetProperty="Visibility"
                                                Duration="0">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="DropDownStates">
                                    <VisualState x:Name="Opened">
                                        <Storyboard>
                                            <SplitOpenThemeAnimation
                                                ClosedTargetName="ContentPresenter"
                                                OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
                                                OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
                                                OpenedTargetName="PopupBorder" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Closed">
                                        <Storyboard>
                                            <SplitCloseThemeAnimation
                                                ClosedTargetName="ContentPresenter"
                                                OffsetFromCenter="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOffset}"
                                                OpenedLength="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TemplateSettings.DropDownOpenedHeight}"
                                                OpenedTargetName="PopupBorder" />
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>