聚焦时将边框颜色设置为条目

Question

我正在尝试为 Entry 元素设置边框颜色，以便它显示在 Windows 平台上。为实现这一点，我向项目添加了一个效果，但在使用 BorderBrush 属性时，它不会保留为 Focused 状态选择的颜色。相反，它会更改为 Windows 强调颜色。您需要在控件的所有状态下控制颜色。

MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             xmlns:effects="clr-namespace:XamarinTestApp.Effects"
             x:Class="XamarinTestApp.MainPage">

    <StackLayout Margin="20,100,20,0" >
        <Label Text="Input element" />
        <Entry x:Name="InputEntry">
            <Entry.Effects>
                <effects:EntryEffect />
            </Entry.Effects>
        </Entry>
    </StackLayout>

</ContentPage>

EntryEffect.cs 普通代码

using Xamarin.Forms;

namespace XamarinTestApp.Effects
{
    public class EntryEffect : RoutingEffect
    {
        public EntryEffect() : base("EffectGroup.EntryEffect") { }
    }
}

UWP代码中的

EntryEffect.cs

using Effects;
using System;
using Windows.UI.Xaml.Controls;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ResolutionGroupName("EffectGroup")]
[assembly: ExportEffect(typeof(EntryEffect), "EntryEffect")]
namespace Effects
{
    public class EntryEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            try
            {
                var control = Control as Control;
                var color = Color.Magenta.ToWindowsColor();
                control.BorderBrush = new Windows.UI.Xaml.Media.SolidColorBrush(color);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        
        }

        protected override void OnDetached() { }
    }
}

同样的问题发生在我的悬停状态下。感谢您的帮助！！

Answer 1

你可以尝试在uwp中添加Style in file App.xaml，如下：

<Application.Resources>
     <ResourceDictionary>
         <SolidColorBrush x:Key="TextControlBorderBrushFocused" Color="Red"/>
    
         <Style TargetType="TextBox" x:Key="CustomTextBox">
             <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}" />
             <Setter Property="Background" Value="{ThemeResource TextControlBackground}" />
             <Setter Property="BorderBrush" Value="{ThemeResource TextControlBorderBrush}" />
             <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}" />
             <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}" />
             <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
             <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
             <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto" />
             <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto" />
             <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden" />
             <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden" />
             <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
             <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}" />
             <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}" />
             <Setter Property="ContextFlyout" Value="{StaticResource TextControlCommandBarContextFlyout}" />
             <Setter Property="SelectionFlyout" Value="{StaticResource TextControlCommandBarSelectionFlyout}" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="TextBox">
                         <Grid>
    
                             <Grid.Resources>
                                 <Style x:Name="DeleteButtonStyle" TargetType="Button">
                                     <Setter Property="Template">
                                         <Setter.Value>
                                             <ControlTemplate TargetType="Button">
                                                 <Grid x:Name="ButtonLayoutGrid"
                                             BorderBrush="{ThemeResource TextControlButtonBorderBrush}"
                                             BorderThickness="{TemplateBinding BorderThickness}"
                                             Background="{ThemeResource TextControlButtonBackground}">
    
                                                     <VisualStateManager.VisualStateGroups>
                                                         <VisualStateGroup x:Name="CommonStates">
                                                             <VisualState x:Name="Normal" />
    
                                                             <VisualState x:Name="PointerOver">
                                                                 <Storyboard>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPointerOver}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                 </Storyboard>
                                                             </VisualState>
    
                                                             <VisualState x:Name="Pressed">
                                                                 <Storyboard>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBackgroundPressed}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                     <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                         <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}" />
                                                                     </ObjectAnimationUsingKeyFrames>
                                                                 </Storyboard>
                                                             </VisualState>
    
                                                             <VisualState x:Name="Disabled">
                                                                 <Storyboard>
                                                                     <DoubleAnimation Storyboard.TargetName="ButtonLayoutGrid"
                                                                 Storyboard.TargetProperty="Opacity"
                                                                 To="0"
                                                                 Duration="0" />
                                                                 </Storyboard>
                                                             </VisualState>
                                                         </VisualStateGroup>
                                                     </VisualStateManager.VisualStateGroups>
                                                     <TextBlock x:Name="GlyphElement"
                                                 Foreground="{ThemeResource TextControlButtonForeground}"
                                                 VerticalAlignment="Center"
                                                 HorizontalAlignment="Center"
                                                 FontStyle="Normal"
                                                 FontSize="12"
                                                 Text="&#xE10A;"
                                                 FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                 AutomationProperties.AccessibilityView="Raw" />
                                                 </Grid>
                                             </ControlTemplate>
                                         </Setter.Value>
                                     </Setter>
                                 </Style>
                             </Grid.Resources>
    
                             <VisualStateManager.VisualStateGroups>
                                 <VisualStateGroup x:Name="CommonStates">
                                     <VisualState x:Name="Normal" />
    
                                     <VisualState x:Name="Disabled">
    
                                         <Storyboard>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlHeaderForegroundDisabled}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundDisabled}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushDisabled}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundDisabled}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundDisabled}}" />
                                             </ObjectAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState>
    
                                     <VisualState x:Name="PointerOver">
    
                                         <Storyboard>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundPointerOver}}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
                                             </ObjectAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState>
                                     <VisualState x:Name="Focused">
    
                                         <Storyboard>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForegroundFocused}}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundFocused}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushFocused}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundFocused}" />
                                             </ObjectAnimationUsingKeyFrames>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="RequestedTheme">
                                                 <DiscreteObjectKeyFrame KeyTime="0" Value="Light" />
                                             </ObjectAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState>
    
                                 </VisualStateGroup>
                                 <VisualStateGroup x:Name="ButtonStates">
                                     <VisualState x:Name="ButtonVisible">
    
                                         <Storyboard>
                                             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
                                                 <DiscreteObjectKeyFrame KeyTime="0">
                                                     <DiscreteObjectKeyFrame.Value>
                                                         <Visibility>Visible</Visibility>
                                                     </DiscreteObjectKeyFrame.Value>
                                                 </DiscreteObjectKeyFrame>
                                             </ObjectAnimationUsingKeyFrames>
                                         </Storyboard>
                                     </VisualState>
                                     <VisualState x:Name="ButtonCollapsed" />
    
                                 </VisualStateGroup>
    
                             </VisualStateManager.VisualStateGroups>
    
                             <Grid.RowDefinitions>
                                 <RowDefinition Height="Auto" />
                                 <RowDefinition Height="*" />
                                 <RowDefinition Height="Auto" />
                             </Grid.RowDefinitions>
    
                             <Grid.ColumnDefinitions>
                                 <ColumnDefinition Width="*" />
                                 <ColumnDefinition Width="Auto" />
                             </Grid.ColumnDefinitions>
    
                             <ContentPresenter x:Name="HeaderContentPresenter"
                         Grid.Row="0"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Content="{TemplateBinding Header}"
                         ContentTemplate="{TemplateBinding HeaderTemplate}"
                         FontWeight="Normal"
                         Foreground="{ThemeResource TextControlHeaderForeground}"
                         Margin="{ThemeResource TextBoxTopHeaderMargin}"
                         TextWrapping="Wrap"
                         VerticalAlignment="Top"
                         Visibility="Collapsed"
                         x:DeferLoadStrategy="Lazy" />
                             <Border x:Name="BorderElement"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.RowSpan="1"
                         Grid.ColumnSpan="2"
                         Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         CornerRadius="{TemplateBinding CornerRadius}"
                         Control.IsTemplateFocusTarget="True"
                         MinWidth="{ThemeResource TextControlThemeMinWidth}"
                         MinHeight="{ThemeResource TextControlThemeMinHeight}" />
                             <ScrollViewer x:Name="ContentElement"
                         Grid.Row="1"
                         Grid.Column="0"
                         HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                         HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                         VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                         VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                         IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                         IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                         IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                         Margin="{TemplateBinding BorderThickness}"
                         Padding="{TemplateBinding Padding}"
                         IsTabStop="False"
                         AutomationProperties.AccessibilityView="Raw"
                         ZoomMode="Disabled" />
                             <TextBlock x:Name="PlaceholderTextContentPresenter"
                         Grid.Row="1"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}"
                         Margin="{TemplateBinding BorderThickness}"
                         Padding="{TemplateBinding Padding}"
                         Text="{TemplateBinding PlaceholderText}"
                         TextAlignment="{TemplateBinding TextAlignment}"
                         TextWrapping="{TemplateBinding TextWrapping}"
                         IsHitTestVisible="False" />
                             <Button x:Name="DeleteButton"
                         Grid.Row="1"
                         Grid.Column="1"
                         Style="{StaticResource DeleteButtonStyle}"
                         BorderThickness="{TemplateBinding BorderThickness}"
                         Margin="{ThemeResource HelperButtonThemePadding}"
                         IsTabStop="False"
                         Visibility="Collapsed"
                         AutomationProperties.AccessibilityView="Raw"
                         FontSize="{TemplateBinding FontSize}"
                         MinWidth="34"
                         VerticalAlignment="Stretch" />
                             <ContentPresenter x:Name="DescriptionPresenter"
                         Grid.Row="2"
                         Grid.Column="0"
                         Grid.ColumnSpan="2"
                         Content="{TemplateBinding Description}"
                         Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}"
                         AutomationProperties.AccessibilityView="Raw"
                         x:Load="False"/>
    
                         </Grid>
    
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </ResourceDictionary>
    
 </Application.Resources>

uwp中的MyUwpRender是：

 [assembly: ExportRenderer(typeof(Entry), typeof(MyUwpRender))]
 namespace UwpApp1.UWP
 {
     public class MyUwpRender : EntryRenderer
     {
         public MyUwpRender()
         {
    
         }
         protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
         {
             base.OnElementChanged(e);
    
             if (Control != null)
             {
                // apply the style here
                 Control.Style = App.Current.Resources["CustomTextBox"] as Windows.UI.Xaml.Style;

                 // you can also change the CornerRadius here
                 Control.CornerRadius = new Windows.UI.Xaml.CornerRadius(5);
    
             }
         }
     }
 }

聚焦时将边框颜色设置为条目

Set border color to an Entry when is focused

c#

xaml

effects

xamarin

uwp