TextBox 的样式，当聚焦时应该关闭样式更改

Question

我的文本框有一个简单的样式：

<Style x:Key="PortalFocusVisualStyle" TargetType="TextBox">
    <!--<Setter Property="Focusable" Value="False"/>-->
    <Setter Property="BorderBrush">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#7FFFFFFF" Offset="1"/>
                <GradientStop Color="#3FFFFFFF"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#0CFFFFFF" Offset="0"/>
                <GradientStop Color="#26FFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>

这就是我所有文本框的样子。顺便说一句，如果可能的话，PasswordBoxes 也是如此，但我也可以为它们做一个新的样式。

当用户单击文本框时，顶部边框几乎消失并且看起来很奇怪。 对于 Windows 7，这似乎是默认行为。 但我不希望这样，文本框（或密码框）现在看起来应该完全一样，不管它是否聚焦。

所以我的想法是对 style 和 focusvisualstyle 都使用这种样式，如下所示：

我的问题仍然是焦点文本框看起来不一样。

我尝试使用视觉状态，并在我的上述样式中添加了一个 setter 模板：

    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TextBox" >
                <Grid x:Name="RootElement" Background="{TemplateBinding Background}" >
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="FocusStates">
                            <VisualState x:Name="Focused"/>
                            <VisualState x:Name="Unfocused"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
               </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>

但不知何故这是错误的，我只看到一个空盒子。我不知道我需要向网格添加什么，或者如果网格是个好主意，我根本无法将 Visualstates 添加到模板中，有人可以帮我吗？

或者也许有更简单的解决方案？ 我希望我的文本框和密码框具有上面的背景和边框的上述样式，当它被聚焦时，它应该看起来相同并且不会改变边框等......

非常感谢！ 埃里克

Answer 1

这是你需要做的：

<Style TargetType="{x:Type TextBox}">
        <Setter Property="Margin" Value="0" />
        <Setter Property="Padding" Value="0" />
        <Setter Property="FocusVisualStyle" Value="{x:Null}" />
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#7FFFFFFF" Offset="1"/>
                    <GradientStop Color="#3FFFFFFF"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#0CFFFFFF" Offset="0"/>
                    <GradientStop Color="#26FFFFFF" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">
                        <ScrollViewer Margin="0" x:Name="PART_ContentHost"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Scrollviewer 是文本框模板的实际内容宿主。而这里的秘诀就是将 FocusVisualStyle 设置为 null。这将使您在所有平台上都有一致的外观。