Aneesh.A.M
Aneesh.A.M

Reputation: 1148

Xamarin Windows Entry background Color

In my Xamarin forms application i need to change the background color of an Entry control when it got foucs. I added custom renderers but the default white color is not changing when it has focus in Windows application. It is working fine in ios and android. Here is my custom renderer for windows.

public class MyCustomEntryRenderer : EntryRenderer
{
   protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
   {
       if (Control != null)
       {
           Control.Foreground = new SolidColorBrush(Colors.Transparent);
           Control.Background = new SolidColorBrush(Colors.Transparent);
       }
       base.OnElementChanged(e);
   }

   protected override void OnElementPropertyChanged(object sender, 
                                            System.ComponentModel.PropertyChangedEventArgs e)
   {
       if (Control != null)
       {
           Control.Foreground = new SolidColorBrush(Colors.Transparent);
           Control.Background = new SolidColorBrush(Colors.Transparent);
       }
       base.OnElementPropertyChanged(sender, e);
   }
}

Upvotes: 0

Views: 4109

Answers (2)

iwanlenin
iwanlenin

Reputation: 222

You need to override the default TextBox style. Here is the default style You can add the style inside the App.xaml like this:

<Application.Resources>
        <ResourceDictionary>                 
            <SolidColorBrush x:Key="RedBrush" Color="Red"></SolidColorBrush>
            <!-- Default style for Windows.UI.Xaml.Controls.TextBox -->
            <Style x:Key="CustomTextBoxStyle" TargetType="TextBox" >
                <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}" />
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" />
                <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundChromeDisabledLowBrush}" />
                <Setter Property="SelectionHighlightColor" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                <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="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 TextBoxButtonBorderThemeBrush}"
                                                  BorderThickness="{TemplateBinding BorderThickness}"
                                                  Background="{ThemeResource TextBoxButtonBackgroundThemeBrush}">
                                                        <VisualStateManager.VisualStateGroups>
                                                            <VisualStateGroup x:Name="CommonStates">
                                                                <VisualState x:Name="Normal" />
                                                                <VisualState x:Name="PointerOver">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                           Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                    </Storyboard>
                                                                </VisualState>
                                                                <VisualState x:Name="Pressed">
                                                                    <Storyboard>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid"
                                                           Storyboard.TargetProperty="Background">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                                        </ObjectAnimationUsingKeyFrames>
                                                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement"
                                                           Storyboard.TargetProperty="Foreground">
                                                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
                                                                        </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 SystemControlForegroundChromeBlackMediumBrush}"
                                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="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter"
                                                 Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledChromeDisabledLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightChromeAltLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                               Storyboard.TargetProperty="Opacity">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundHoverOpacity}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Focused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlPageTextChromeBlackMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
                                               Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundChromeWhiteBrush}" />
                                                </ObjectAnimationUsingKeyFrames>-->

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
</ObjectAnimationUsingKeyFrames>



<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
Storyboard.TargetProperty="Opacity">
    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>-->
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement"
                                               Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement"
                                               Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundChromeBlackHighBrush}" />
                                                </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.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto" />
                                    <RowDefinition Height="*" />
                                </Grid.RowDefinitions>
                                <Border x:Name="BackgroundElement"
                                    Grid.Row="1"
                                    Background="{TemplateBinding Background}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Opacity="{ThemeResource TextControlBackgroundRestOpacity}"
                                    Grid.ColumnSpan="2"
                                    Grid.RowSpan="1"/>
                                <Border x:Name="BorderElement"
                                    Grid.Row="1"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Grid.ColumnSpan="2"
                                    Grid.RowSpan="1"/>
                                <ContentPresenter x:Name="HeaderContentPresenter"
                                    x:DeferLoadStrategy="Lazy"
                                    Visibility="Collapsed"
                                    Grid.Row="0"
                                    Foreground="{ThemeResource SystemControlForegroundBaseHighBrush}"
                                    Margin="0,0,0,8"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding Header}"
                                    ContentTemplate="{TemplateBinding HeaderTemplate}"
                                    FontWeight="Normal" />
                                <ScrollViewer x:Name="ContentElement"
                                    Grid.Row="1"
                                    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" />
                                <ContentControl x:Name="PlaceholderTextContentPresenter"
                                    Grid.Row="1"
                                    Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"
                                    Margin="{TemplateBinding BorderThickness}"
                                    Padding="{TemplateBinding Padding}"
                                    IsTabStop="False"
                                    Grid.ColumnSpan="2"
                                    Content="{TemplateBinding PlaceholderText}"
                                    IsHitTestVisible="False"/>
                                <Button x:Name="DeleteButton"
                                    Grid.Row="1"
                                    Style="{StaticResource DeleteButtonStyle}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    Margin="{ThemeResource HelperButtonThemePadding}"
                                    IsTabStop="False"
                                    Grid.Column="1"
                                    Visibility="Collapsed"
                                    FontSize="{TemplateBinding FontSize}"
                                    MinWidth="34"
                                    VerticalAlignment="Stretch"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Application.Resources>

Now you can overide the "Focused" VisualState:

  <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
Storyboard.TargetProperty="Background">
    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RedBrush}" />
</ObjectAnimationUsingKeyFrames>

And comment, delete or override "Opacity"

<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement"
Storyboard.TargetProperty="Opacity">
    <DiscreteObjectKeyFrame KeyTime="0" Value="0" />
</ObjectAnimationUsingKeyFrames>-->

Now inside your Renderer you need to load the style and add for your TextBox:

private TextBox nativeControl;
private CustomEntry customControl;
protected override void 
OnElementChanged(ElementChangedEventArgs<CustomEntry> e)
{
  base.OnElementChanged(e);

  this.customControl = e.NewElement;
  this.nativeControl = new TextBox();

  var style  = App.Current.Resources["CustomTextBoxStyle"] as    Windows.UI.Xaml.Style;
  this.nativeControl.Style = style;
  this.SetNativeControl(nativeControl);
}

Now you have a Red color on background if TextBox is Focused

Upvotes: 2

Pete
Pete

Reputation: 4746

WindowsPhone is a bit strange on this one as it will reset the background color in some scenarios.

To get around this you will also need to hook into the GotFocus and LostFocus events of the platform-specific control itself.

Upvotes: 0

Related Questions