在自定义的登录页面上,需要添加一个文本框(Textbox)和一个密码框(PasswordBox),外边再套一张图片。但是发现鼠标滑过控件的时候,总会出现外边框,很影响显示效果。如何能够去除Textbox和PasswordBox的鼠标滑过外边框呢?效果图如下:
1、实现去除TextBox的鼠标滑过外边框,自定义扩展一个控件即可,实现代码如下所示:
public class MidNoFocusTextbox : TextBox
{
public override void OnApplyTemplate()
{
foreach (string s in "FocusVisualElement,MouseOverBorder".Split(','))
{
var bdr = GetTemplateChild(s) as Border;
if (bdr != null)
{
bdr.BorderThickness = new Thickness(0);
}
}
base.OnApplyTemplate();
}
}
2、实现PasswordBox控件的鼠标滑过去除边框效果,同样扩展控件的话,则行不通。因为PasswordBox控件不能继承。所以只能通过XAML样式,来满足要求了。具体实现如下所示:
<!-- 输入密码内容样式属性,通过模板去除了密码框的光标滑过外框 -->
<Style x:Key="PasswordText" TargetType="PasswordBox">
<Setter Property="HorizontalAlignment" Value="Right"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
<Setter Property="FontSize" Value="14"></Setter>
<Setter Property="Width" Value="190"></Setter>
<Setter Property="MaxLength" Value="20"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="PasswordBox">
<Grid x:Name="RootElement">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="MouseOverBorder" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" To="#FF99C1E2" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="DisabledVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity" To="0" Duration="0"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationErrorElement" Storyboard.TargetProperty="Visibility">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="validationTooltip" Storyboard.TargetProperty="IsOpen">
<DiscreteObjectKeyFrame KeyTime="0" >
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>True</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderThickness="0" CornerRadius="1">
<Border x:Name="MouseOverBorder" BorderThickness="0" BorderBrush="Transparent">
<Border x:Name="ContentElement" Margin="{TemplateBinding Padding}"/>
</Border>
</Border>
<Border x:Name="DisabledVisualElement" BorderThickness="0" IsHitTestVisible="False"/>
<Border x:Name="FocusVisualElement" BorderThickness="0" Margin="1" IsHitTestVisible="False"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>