如何在 Universal Windows 10 应用程序中自定义文本框的边框和背景？

Question

我正在开发通用 Windows 10 应用程序。我想自定义一个文本框以删除其默认边框悬停和背景。

我的问题是我不知道如何在通用 Windows 平台上自定义。

这是我使用的代码：

<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>

这是我的 UI 问题的屏幕截图：

当我将鼠标指针放在文本框上时，它会更改边框和背景。

Answer 1

自定义TextBox, we can edit TextBox styles and templates。

首先，我们可以通过打开"View"→"Other Windows"→在Visual Studio中打开"Document Outline" "Document Outline".

然后在"Document Outline"select中我们要修改TextBox，比如select "Username" 然后右击，然后 select "Edit Template" → "Edit a Copy...".

这将弹出一个 "Create Style Resource" 对话框。默认情况下，它将在 Page.Resources 下生成默认样式，例如：

<Page.Resources>
    <Style x:Key="TextBoxStyle1" TargetType="TextBox">
    ...
    </Style>
</Page.Resources>

在此之后我们可以编辑样式和模板来实现我们想要的。

悬停样式在 "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>

要删除其默认边框和背景，我们只需删除动画目标 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>

和"Focused" VisualState 是一样的。

此外，在默认模板中，您会发现TextBox里面已经有一个Border。

<Border x:Name="BorderElement" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="2" Grid.Row="1" Grid.RowSpan="1"/>

所以我们可以在 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"`/>

然后在 TextBox 中使用这种新样式，无需额外 Border，例如：

<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>

如果您想将此样式应用于 Page 中的所有 TextBox，您可以删除 Style 中的 x:Key="TextBoxStyle1" 并且不要设置 Style 属性共 TextBox:

<Page.Resources>
    <Style TargetType="TextBox">
    ...
    </Style>
</Page.Resources>

这样，样式将自动应用于 Page 中的所有 TextBox。

如何在 Universal Windows 10 应用程序中自定义文本框的边框和背景？

How to customize border and background of a textbox in a Universal Windows 10 app?

c#

xaml

uwp

windows-10-universal

uwp-xaml