Xamarin.Forms UWP - 如何隐藏或更改选择器/组合框下拉箭头的颜色

本文介绍了Xamarin.Forms UWP - 如何隐藏或更改选择器/组合框下拉箭头的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我现在正在为 UWP 开发 Xamarin.Forms 项目，并且我正在为 Pickers 使用自定义渲染器.我实际上将选择器覆盖在标签和图标的顶部，以便当用户单击标签/图标时，它会打开选择器.为了实现这一点，我基本上将选择器上的所有内容都设置为透明——边框、文本和背景.选择器仍然可以正常工作，并且所有选择器元素都是不可见的，除了选择器箭头仍然可见.我如何影响选择器箭头的颜色(以使其透明)，或者完全摆脱它?

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?

去掉文本和背景颜色很简单:

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.

我知道 Control 是一个 FormsComboBox VisualElementRender.Control，我已经尝试在 Visual Studio 中扫描 Control 的所有属性.

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.

推荐答案

对于自定义渲染，Picker 是 ComboBox 在 UWP 中.请参阅渲染器基类和本机控件.因此，对于您要更改的下拉箭头，它实际上是 Combobox 的控件模板内的 DropDownGlyph 元素.您可以复制默认的ComboBox 样式和模板和通过将 Visibility 属性设置为 Collapsed，将 DropDownGlyph 更新为不可见.例如:

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:

渲染:

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

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>

这篇关于Xamarin.Forms UWP - 如何隐藏或更改选择器/组合框下拉箭头的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！