有焦点时如何更改文本框边框的颜色? [英] How to change the color of the Border of a TextBox when it has focus?

问题描述

在我的 Windows Phone 应用程序中，我将文本框的边框设置为空:

In my windows phone app, I have set the border of my Text box to null:

但是当它有焦点时，它仍然显示蓝色作为其边框.我怎样才能配置那种颜色?我尝试查看文本框的模板，当它具有焦点时，我没有看到边框颜色的属性:

But when it has focus, it still show a blueish color as its border. How can I config that color? I tried looking at the template for Text Box, I don't see there is a property for the color of border when it has focus:

有没有人知道这是否可以改变?

Does anyone has any idea if that is changable?

    <Thickness x:Key="TextControlHeaderMarginThemeThickness">0,0,0,4.8</Thickness>
    <x:Double x:Key="TextControlThemeMinHeight">33</x:Double>
    <x:Double x:Key="ContentControlFontSize">20.26</x:Double>
    <SolidColorBrush x:Key="TextBoxDisabledBackgroundThemeBrush" Color="Transparent" />
    <x:Double x:Key="TextControlBackgroundThemeOpacity">0.8</x:Double>
    <x:Double x:Key="TextControlBorderThemeOpacity">0.8</x:Double>
    <ControlTemplate x:Key="TextBoxControlTemplate1" TargetType="TextBox">
        <Grid>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Disabled">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBackgroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledBorderThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxDisabledForegroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Normal">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Opacity" Duration="0"
                                To="{ThemeResource TextControlBackgroundThemeOpacity}" />
                            <DoubleAnimation Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Opacity" Duration="0"
                                To="{ThemeResource TextControlBorderThemeOpacity}" />
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                            <DoubleAnimation Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Opacity" Duration="0" To="0" />
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BackgroundElement" Storyboard.TargetProperty="Background">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextBoxFocusedBackgroundThemeBrush}" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Border x:Name="BackgroundElement" Grid.Row="1" Background="{TemplateBinding Background}" Margin="{TemplateBinding BorderThickness}" />
            <Border x:Name="BorderElement" Grid.Row="1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" />
            <ContentPresenter x:Name="HeaderContentPresenter" Grid.Row="0" Style="{StaticResource HeaderContentPresenterStyle}" Margin="{ThemeResource TextControlHeaderMarginThemeThickness}"
                Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
            <ScrollViewer x:Name="ContentElement" Grid.Row="1" MinHeight="{ThemeResource TextControlThemeMinHeight}"
                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" ZoomMode="Disabled"
                AutomationProperties.AccessibilityView="Raw"/>
            <ContentControl x:Name="PlaceholderTextContentPresenter" Grid.Row="1" Foreground="{ThemeResource TextBoxPlaceholderTextThemeBrush}"
                FontSize="{ThemeResource ContentControlFontSize}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}"
                IsTabStop="False" Content="{TemplateBinding PlaceholderText}" />
        </Grid>
    </ControlTemplate>

推荐答案

突出显示是通过 StoryBoard 动画完成的.

The highlight is done through a StoryBoard Animation.

特别是你的Style

<VisualState x:Name="Focused">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextSelectionHighlightColorThemeBrush}" />
        </ObjectAnimationUsingKeyFrames>
        <!--- .... --->
   </Storyboard>
</VisualState>

您可以删除它(删除它)，或者将值更改为红色

You can either get rid of it (delete it out), or change the values to say Red

<VisualState x:Name="Focused">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
            <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
        </ObjectAnimationUsingKeyFrames>
        <!--- .... --->
   </Storyboard>
</VisualState>

如果你摆脱了 StoryBoard Animation for Focused 那么你可以通过改变 BorderElement BorderBrush 来设置颜色

If you get rid of the StoryBoard Animation for Focused then you can set the color by just changing the BorderElement BorderBrush

<Border x:Name="BorderElement" BorderBrush="Red" BorderThickness="{TemplateBinding BorderThickness}" Grid.Row="1"/>

这篇关于有焦点时如何更改文本框边框的颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！