Изменить выделенный фон текстового поля / передний план в WP7

Question

Всякий раз, когда текстовое поле фокусируется, граница и передний план текста изменяются в соответствии с текущей темой:

свет темы -> рамка: черная, текст: белая, фон: прозрачный

тема темная -> рамка: белая, текст: белая, фон: белая

Я хочу, чтобы текстовое поле всегда имело границу: белое, текст: белое, фон: прозрачное

Я могу управлять этими настройками, когда текстовое поле не сфокусировано, но я не могу изменить фон, когда оно имеет фокус.

XML-код текстового поля:

<TextBox    InputScope="EmailSmtpAddress" Height="72" LostFocus="textBox1_LostFocus"  GotFocus="textBox1_GotFocus" HorizontalAlignment="Left" Margin="0,62,0,0" Name="textBox1" Text="Enter URL here..." VerticalAlignment="Top" Width="460" TextChanged="textBox1_TextChanged" Foreground="White" Background="#005DADF5" SelectionForeground="White" BorderBrush="#DEEAEAEA" FontFamily="Tahoma" FontWeight="Normal" />

Answer 1

Вы можете переопределить стиль по умолчанию, используя шаблон:

<Style x:Key="TextBoxStyle1" TargetType="TextBox">
        <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}" />
        <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMediumLarge}" />
        <Setter Property="Background" Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="Foreground" Value="{StaticResource PhoneTextBoxForegroundBrush}" />
        <Setter Property="BorderBrush" Value="{StaticResource PhoneTextBoxBrush}" />
        <Setter Property="SelectionBackground" Value="{StaticResource PhoneAccentBrush}" />
        <Setter Property="SelectionForeground" Value="{StaticResource PhoneTextBoxSelectionForegroundBrush}" />
        <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="Padding" Value="2" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ReadOnly">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Collapsed</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DisabledOrReadonlyContent" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxReadOnlyBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
        <!-- COMMENT THIS OUT ----->    <!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                        </ObjectAnimationUsingKeyFrames>-->
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="EnabledBorder"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                            <ContentControl x:Name="ContentElement"
                                            Margin="{StaticResource PhoneTextBoxInnerMargin}"
                                            HorizontalContentAlignment="Stretch"
                                            VerticalContentAlignment="Stretch"
                                            BorderThickness="0"
                                            Padding="{TemplateBinding Padding}" />
                        </Border>
                        <Border x:Name="DisabledOrReadonlyBorder"
                                Margin="{StaticResource PhoneTouchTargetOverhang}"
                                Background="Transparent"
                                BorderBrush="{StaticResource PhoneDisabledBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Visibility="Collapsed">
                            <TextBox x:Name="DisabledOrReadonlyContent"
                                     Background="Transparent"
                                     FontFamily="{TemplateBinding FontFamily}"
                                     FontSize="{TemplateBinding FontSize}"
                                     FontStyle="{TemplateBinding FontStyle}"
                                     FontWeight="{TemplateBinding FontWeight}"
                                     Foreground="{StaticResource PhoneDisabledBrush}"
                                     IsReadOnly="True"
                                     SelectionBackground="{TemplateBinding SelectionBackground}"
                                     SelectionForeground="{TemplateBinding SelectionForeground}"
                                     Template="{StaticResource PhoneDisabledTextBoxTemplate}"
                                     Text="{TemplateBinding Text}"
                                     TextAlignment="{TemplateBinding TextAlignment}"
                                     TextWrapping="{TemplateBinding TextWrapping}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Я использовал Expression Blend, чтобы получить шаблон по умолчанию, затем изменил его, удалив (закомментировав) элемент ObjectAnimationUsingKeyFrames, который изменил BorderBrush в Focused VisualState. Примените этот стиль к TextBox и измените его BorderBrush на ваш цвет.

<TextBox BorderBrush="Red" Style="{StaticResource TextBoxStyle1}" />

Answer 2

Самый простой способ - установить событие на GotFocus.

XamlCode TextBox:

<TextBox x:Name="InputUserName"
         Foreground="Black"
         Background="LightGray"
         BorderBrush="LightGray"
         GotFocus="GotFocusaAction" />

Код позади GotFocusAction:

private void GotFocusaAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.LightGray);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.LightGray);
    }

Когда вы хотите установить цвет выделенного TextBox на другой цветВы также должны установить Событие LostFocus, чтобы изменить BackgroundColor обратно.

XamlCode TextBox:

<TextBox x:Name="InputUserName"
     Foreground="Black"
     Background="Red"
     BorderBrush="Red"
     GotFocus="GotFocusaAction"
     LostFocus="GotFocusaAction" />

Код позади:

private void GotFocusaAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.Purple);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.Purple);
    }

    private void LostFocusAction(object sender, System.Windows.RoutedEventArgs e)
    {
        InputUserName.Background = new SolidColorBrush(Colors.Red);
        InputUserName.BorderBrush = new SolidColorBrush(Colors.Red);
    }

Answer 3

Очевидно, что вы не можете изменить фон текстового поля, когда оно сфокусировано, а не в темной теме (это даже так в интегрированных текстовых полях системы).

Итак, я нашел решение, которое решило мою проблему,

Я создал два экземпляра текстового поля ровно друг над другом и изменил непрозрачность переднего окна на 0 (полностью невидимый).

Затем я соединил оба текстовых поля с помощью кода, чтобы, если вводится первый текст (он невидим, поэтому никто не увидит записываемый текст), я редактирую текст последнего, чтобы он был точно таким же.

Answer 4

Вам необходимо прокомментировать большую зону:

<VisualStateGroup x:Name="FocusStates">
                                        <VisualState x:Name="Focused">
                                            <!--<Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="Background">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBackgroundBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="EnabledBorder" Storyboard.TargetProperty="BorderBrush">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneTextBoxEditBorderBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>-->
                                        </VisualState>
                                        <VisualState x:Name="Unfocused" />
                                    </VisualStateGroup>