[英]How to customize border and background of a textbox in a Universal Windows 10 app?
I am developing a universal Windows 10 app. 我正在开发通用的Windows 10应用程序。 I want to customize a textbox to remove its default border hover and background.
我想自定义文本框以删除其默认边框悬停和背景。
My problem is that I do not know how to customize on the Universal Windows Platform. 我的问题是我不知道如何在通用Windows平台上进行自定义。
Here is the code that I am using: 这是我正在使用的代码:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<!--layoutroot where all page content is placed-->
<Grid x:Name="layoutRoot" Background="#1BA1E2">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Margin="12,0,12,0">
<!--Title Page-->
<TextBlock Text="Login Here" Foreground="White" FontSize="40" Padding="60,80,60,80"/>
<!--username-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBox PlaceholderText="Username" Name="Username" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Username_GotFocus"/>
</Border>
<!--Password-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBox PlaceholderText="Password" Name="Password" Background="Transparent" BorderBrush="{x:Null}" GotFocus="Password_GotFocus"/>
</Border>
<!--Button login-->
<Border CornerRadius="10" Background="Transparent" BorderBrush="White" BorderThickness="1" Margin="5">
<TextBlock Text="Log In" Foreground="White" Margin="0" Padding="200,5,0,5"/>
</Border>
</StackPanel><!--end StackPanel-->
</Grid><!--end Grid layoutRoot-->
</Grid>
Here is a screenshot of my UI problem: 这是我的UI问题的屏幕截图:
When I put the mouse pointer over a textbox, it changes the border and the background. 当我将鼠标指针放在文本框上时,它会更改边框和背景。
To customize TextBox , we can edit TextBox styles and templates . 要自定义TextBox ,我们可以编辑TextBox样式和模板 。
Firstly, we can open "Document Outline" in Visual Studio by open "View" → "Other Windows" → "Document Outline" . 首先,我们可以在Visual Studio中依次打开“查看”打开“文档大纲”→“ 其他窗口”→“文档大纲”。
Then in "Document Outline" select the TextBox we want to modify, for example, select "Username" and right click, then select "Edit Template" → "Edit a Copy..." . 然后在“文档大纲”中选择我们要修改的文本框 ,例如,选择“用户名”并右键单击,然后选择“编辑模板”→“编辑副本...” 。
This will popup a "Create Style Resource" dialog. 这将弹出一个“创建样式资源”对话框。 And by default it will generate the default style under
Page.Resources
like: 默认情况下,它将在
Page.Resources
下生成默认样式,例如:
<Page.Resources>
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
...
</Style>
</Page.Resources>
After this we can edit the style and template to achieve what we want. 之后,我们可以编辑样式和模板以实现我们想要的。
The hover style is defined in "PointerOver" VisualState . 悬停样式在“ PointerOver” VisualState中定义。
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="BorderElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="PlaceholderTextContentPresenter">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentElement">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
To remove its default border and background, we can just delete the animation target BorderBrush
and Background
like: 要删除其默认边框和背景,我们只需删除动画目标
BorderBrush
和Background
如下所示:
<VisualState x:Name="PointerOver">
<Storyboard>
<!--<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="BorderBrush">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBorderBrushPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="BorderElement" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlBackgroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>-->
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="PlaceholderTextContentPresenter" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlPlaceholderForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentElement" Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlForegroundPointerOver}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
And the "Focused" VisualState is the same. 与“焦点” VisualState相同。
Besides, form the default template, you can find TextBox has already had a Border in it. 此外,作为默认模板,您可以发现TextBox中已经有一个Border 。
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/>
So we can just add CornerRadius="10"
in this Border
: 所以我们可以在
Border
添加CornerRadius="10"
:
<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1" `CornerRadius="10"`/>
And then use this new style in TextBox
without additional Border
like: 然后在没有附加
Border
TextBox
使用这种新样式,例如:
<StackPanel Grid.Row="0" Margin="12,0,12,0">
<!-- Title Page -->
<TextBlock FontSize="40" Foreground="White" Padding="60,80,60,80" Text="Login Here" />
<!-- username -->
<TextBox Name="Username" Margin="5" Background="Transparent" BorderBrush="White" GotFocus="Username_GotFocus" PlaceholderText="Username" Style="{StaticResource TextBoxStyle1}" />
...
</StackPanel>
If you want to apply this style to all TextBox
s in the Page
, you can remove x:Key="TextBoxStyle1"
in the Style
and don't set the Style
property of TextBox
: 如果要将此样式应用于
Page
中的所有TextBox
,则可以在Style
删除x:Key="TextBoxStyle1"
,而不必设置TextBox
的Style
属性:
<Page.Resources>
<Style TargetType="TextBox">
...
</Style>
</Page.Resources>
With this, the style will apply to all TextBox
s in the Page
automatically. 这样,样式将自动应用于
Page
中的所有TextBox
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.