Uwp TextBox文本框样式【半边框】

最新推荐文章于 2023-12-27 10:08:27 发布
最新推荐文章于 2023-12-27 10:08:27 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Uwp 文章标签： Uwp TextBox 文本框 样式 半边框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_33538554/article/details/86680952
本文详细介绍了一种自定义WPF TextBox控件样式的实现方法，包括如何设置边框、背景、字体大小、滚动条等属性，并引入了渐变色边框和自定义删除按钮样式，通过丰富的视觉效果提升用户体验。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果截图：

页面page:

<TextBox Style="{StaticResource TextBoxStyle1}" Height="30" Width="180" Text="TextBox"></TextBox>

资源字典TextBoxStyle1:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="TextBoxStyle1" TargetType="TextBox">
        <Setter Property="MinWidth" Value="{ThemeResource TextControlThemeMinWidth}"/>
        <Setter Property="MinHeight" Value="{ThemeResource TextControlThemeMinHeight}"/>
        <Setter Property="Foreground" Value="{ThemeResource TextControlForeground}"/>
        <Setter Property="Background" Value="{ThemeResource TextControlBackground}"/>
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="1,1" StartPoint="1,0">
                    <GradientStop Color="Transparent" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="0.75"/>
                    <GradientStop Color="#1BA784" Offset="0.75"/>
                    <GradientStop Color="#1BA784" Offset="1"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="SelectionHighlightColor" Value="{ThemeResource TextControlSelectionHighlightColor}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource TextControlBorderThemeThickness}"/>
        <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Auto"/>
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Hidden"/>
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        <Setter Property="Padding" Value="{ThemeResource TextControlThemePadding}"/>
        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TextBox">
                    <Grid>
                        <Grid.Resources>
                            <Style x:Name="DeleteButtonStyle" TargetType="Button">
                                <Setter Property="Template">
                                    <Setter.Value>
                                        <ControlTemplate TargetType="Button">
                                            <Grid x:Name="ButtonLayoutGrid" Background="{ThemeResource TextControlButtonBackground}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{ThemeResource TextControlButtonBorderBrush}">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal"/>
                                                        <VisualState x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPointerOver}"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPointerOver}"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="BorderBrush">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonBorderBrushPressed}"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GlyphElement" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource TextControlButtonForegroundPressed}"/>
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Disabled">
                                                            <Storyboard>
                                                                <DoubleAnimation Duration="0" Storyboard.TargetName="ButtonLayoutGrid" Storyboard.TargetProperty="Opacity" To="0"/>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <TextBlock x:Name="GlyphElement" AutomationProperties.AccessibilityView="Raw" FontStyle="Normal" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="#1BA784" FontSize="8" HorizontalAlignment="Center" Text="&#xE10A;" VerticalAlignment="Center"/>
                                            </Grid>
                                        </ControlTemplate>
                                    </Setter.Value>
                                </Setter>
                            </Style>
                        </Grid.Resources>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ButtonStates">
                                <VisualState x:Name="ButtonVisible">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DeleteButton" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Visibility>Visible</Visibility>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="ButtonCollapsed"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="BorderElement" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" Grid.ColumnSpan="2" Control.IsTemplateFocusTarget="True" Grid.RowSpan="1" Grid.Row="1"/>
                        <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="2" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="0,0,0,2" Grid.Row="0" TextWrapping="{TemplateBinding TextWrapping}" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                        <ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled"/>
                        <TextBlock x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2"  Grid.Row="1" Text="{TemplateBinding PlaceholderText}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}"/>
                        <Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Margin="{ThemeResource HelperButtonThemePadding}" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

 

【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
文本框 css 样式
07-29
文本框 css 样式 鼠标移上去文本框变成浅绿色 文本框提示样式，鼠标点击获得焦点时提示内容消失 input文本框样式 只有下划线的文本框： 软件序列号式的输入框： 软件序列号式的输入框(完整版)： 输入框景背景透明： 鼠标划过输入框，输入框背景色变色： 等等
UWP TextBox私人定制
weixin_30558305的博客
12-30 148
这次私人定制的是背景透明的TextBox，普通的TextBox在获取焦点后，背景色就变白色了。 下面的代码可以让TextBox的背景始终是透明的。 其实很简单，就修改了 <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundAltHighBrush}" /> 改为...
[UWP小白日记-15]在UWP手机端实时限制Textbox的输入
weixin_30457551的博客
10-31 113
说实话重来没想到验证输入是如此的苦逼的一件事情。 网上好多验证都是在输入完成后再验证，我的想法是在输入的时候就限制输入，这样我就不用再写代码来验证了 应为是手机端，所以不用判断其他非法字符，直接把Textbox的属性InputScope设置为"Number"就是了，反正在目前版本的UWP中纯数字键盘还无法切换到其他的字符键盘去 下面的代码是一个金额文本框的验证，算是抛砖引玉吧。欢迎还...
UWP中Textbox和Passwordbox实现文字居中效果
张栋的博客
11-29 725
UWP中Textbox和Passwordbox实现文字居中效果 1. 问题描述： 在UWP开发中，Textbox和Passwordbox的默认样式是左上角对其的方式，虽然Textbox可以通过添加TextAlignment="Center"属性实现水平居中，但是垂直居中仍然没有办法通过自带的属性实现，例如下图显示的是默认左上样式，而有时我们需要自定义样式，比如修改成水平垂直居中对齐，那应该怎么修改呢？ 2. 解决方案： 通过创建控件模版来自定义自己需要的样式，具体步骤如下： 1、在试图设计界面或者blen
UWP textbox 只能输入数字
weixin_30701521的博客
04-10 381
private void Testbox_TextChanged(object sender, TextChangedEventArgs e) { var textbox = (TextBox)sender; if (!Regex.IsMatch(textbox.Text, "^\\d*\\.?\\d*$") && textbox.Text != "")...
对windows 10 UWP中控件的外观进行定制(customization)
KHFlash的博客
02-21 933
对windows 10 UWP中控件的外观进行定制(customization) 各位商店应用的开发者们应该经常会碰到以下情况，Visual Studio里面自带控件的默认外观比较朴素，通常这些默认的控件外观很难融入丰富多彩的用户界面，不能帮助开发者们构建漂亮的界面。 Visual Studio为开发者们定制控件外观提供了很好的手段，本篇博文将主要通过两个简单的例子告诉大家如何
C# Winform 自定义控件 TextBox
11-28
尽管WPF和UWP等新技术的出现为应用程序提供了更现代化的外观和感觉，WinForms仍然因其简单性和易用性而被许多开发者所青睐。本文将深入探讨如何在WinForms应用程序中创建和封装一个自定义的C# Winform控件，特别是...
需要鼠标点击在textbox内时 也无边框
02-27
只需将 `BorderStyle` 属性设为 None 即可让文本框失去四周固定的边框，不过这会同时影响未选中的时候的状态。如果只想改变被点击之后的样子，则可能需要借助重载 OnGotFocus 方法来自行控制绘图过程。 ```csharp ...
样式、模板与用户控件的深入探索
### 样式、模板与用户控件的深入探索 在开发过程中，样式的运用能够极大地提升界面的美观度和一致性。下面将详细介绍样式的定义、应用、管理以及如何借助工具创建样式等内容。 #### 1. 基本样式定义与应用 首先，...
WPF TabControl样式提升：动态切换与数据绑定的秘诀
本文全面探讨了WPF框架中TabControl组件的基础特性、动态切换机制、数据绑定技术以及如何打造动态Tab样式。文章首先介绍了TabControl的基本概念和特性，然后深入分析了动态切换的理论基础和高级实现技巧，并通过案例...
超级好看的文本框样式
09-11
有了它之后，页r面上的文本框就非常好看啦，用法很简单，直过复制过来用就可以啦，input表单元素也是通用的
win10 UWP 标签
lindexi
04-29 7531
本文主要翻译：http://visuallylocated.com/post/2015/02/20/Creating-a-WrapPanel-for-your-Windows-Runtime-apps.aspx http://depblog.weblogs.us/2015/02/18/how-to-add-a-tag-list-into-winrt-universal-apps/
wordpress文本框_如何使文本小部件在WordPress中更加丰富多彩和减少乏味
cumohuo9136的博客
09-14 454
wordpress文本框Text widgets allow you to add extra information to your blog’s sidebar or any other widget area. Mostly people use text widgets in WordPress to add a little introduction about themselves, ...
关于TextBox的一些样式
m0_59115955的博客
12-27 559
以上代码通过使用x:Key属性，为该样式指定了一个唯一的键值"TextBoxStyle",以便在其他地方引用和应用这个样式。TargetType属性指定了该样式的目标类型为TextBox,表示这个样式将应用于所有TextBox类型的元素。
美化WPF中TextBox的Style样式
qq_37189288的博客
10-29 4312
最后项目中美工给出了一套设计方案，需要修改Textbox控件的样式，于是修改一下默认的样式和模板 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:converter="clr-n
UWP xaml编写可输入文本框
最新发布
03-25
### 创建 UWP 应用中的可输入文本框 (TextBox) 在 UWP 应用开发中，`TextBox` 是一种允许用户输入和编辑文本的控件。以下是关于如何在 XAML 文件中定义 `TextBox` 控件并结合其他 UI 元素使用的具体方法。 #### 定义基本 TextBox 以下是一个简单的 `TextBox` 示例： ```xml <StackPanel> <!-- 提示文字 --> <TextBlock Text="请输入您的姓名：" Margin="0,10,0,0"/> <!-- 文本框 --> <TextBox x:Name="UserInputBox" PlaceholderText="在此处输入..." Width="200" Height="30" Margin="0,10,0,0"/> <!-- 显示按钮 --> <Button Content="提交" Click="Submit_Click" Margin="0,20,0,0"/> </StackPanel> ``` 上述代码片段展示了如何在一个垂直堆叠面板 (`StackPanel`) 中放置一个提示标签 (`TextBlock`) 和一个可以接收用户输入的文本框 (`TextBox`)。此外还有一个按钮 (`Button`) 用于触发某些操作[^1]。 #### 动态响应用户的输入 为了使应用能够动态响应用户的行为，在后台 C# 代码文件中需要编写相应的逻辑。例如，当点击“提交”按钮时读取 `TextBox` 的内容并将结果显示出来。 ```csharp private void Submit_Click(object sender, RoutedEventArgs e) { string userInput = UserInputBox.Text; GreetingTextBlock.Text = $"你好，{userInput}!"; } ``` 这里假设存在另一个名为 `GreetingTextBlock` 的 `TextBlock` 来展示问候消息。 #### 自适应布局设计 如果希望界面更加灵活适配不同屏幕尺寸，则可以考虑采用相对布局或者视觉状态管理器来调整各组件的位置关系[^3]。下面给出基于 `RelativePanel` 的简单例子： ```xml <RelativePanel> <TextBox x:Name="textBox1" PlaceholderText="请输入..." RelativePanel.AlignHorizontalCenterWithPanel="True" Margin="5"/> <Button x:Name="submitButton" Content="确认" Background="LightGreen" RelativePanel.Below="textBox1" RelativePanel.AlignHorizontalCenterWith="textBox1" Margin="5" Click="Submit_Click"/> </RelativePanel> ``` 这段代码利用了 `RelativePanel` 属性让按钮位于文本框下方居中位置。 --- ### 总结 以上介绍了如何在 UWP 应用项目里通过 XAML 配置一个基础的 `TextBox` 输入框及其关联的操作流程，并提及到部分高级特性如自适应布局的设计思路[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值