如何在通用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，我们可以修改TextBox styles and templates。

首先，我们可以通过打开＆＃34; View＆＃34;在Visual Studio中打开＆＃34; Document Outline＆＃34; →＆＃34;其他Windows＆＃34; →＆＃34;文档大纲＆＃34; 。

然后在＆＃34;文档大纲＆＃34; 中选择我们要修改的 TextBox ，例如，选择＆＃34;用户名＆＃34 ; 并右键单击，然后选择＆＃34;编辑模板＆＃34; →＆＃34;编辑副本......＆＃34; 。

这将弹出＆＃34;创建样式资源＆＃34; 对话框。默认情况下，它会在Page.Resources下生成默认样式，如：

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

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

悬停样式在＆＃34; PointerOver＆＃34; 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>

＆＃34;聚焦＆＃34; VisualState是一样的。

此外，形成默认模板，您可以找到 TextBox 已经包含边框。

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

因此，我们只需在此CornerRadius="10"中添加Border：

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

如果您要将此格式应用于TextBox中的所有Page，则可以删除x:Key="TextBoxStyle1"中的Style，并且不要设置{ {1}} Style的属性：

TextBox

这样，该样式将自动应用于<Page.Resources> <Style TargetType="TextBox"> ... </Style> </Page.Resources> 中的所有TextBox。