今天打算来做一个圆角的输入框

默认输入框:

这个输入框不好看,并且在XP 跟 WIN 7  WIN10 效果 都不太一样

我们今天不用模板的方式,而是 最简单的方式 来实现 圆角 输入框;

----------------------------------------------------方案1:XAML 拼凑方案----------------------------------------------------

<Border  HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" BorderThickness="1" BorderBrush="#C8C8C8" CornerRadius="5">
<TextBox Margin="2"  BorderThickness="0"></TextBox>
</Border>

效果

第一步骤,

在输入框外层 加了一个Border。CornerRadius是圆角值为5.BorderThickness(边框线条粗细)="1"   BorderBrush(边框色)="#C8C8C8"

第二步骤,

输入框 去掉BorderThickness,增加Margin 属性,如果没有Margin属性,效果会是这样

解决方案,

1.将输入框背景色改为透明。 Background="{x:Null}"    (需要给border添加一个背景色)

2.用 margin 增加输入框与border的距离 Margin="2" (这个会造成输入框大小被撑大)

最终效果:

最终源码:

<Grid>
<Border HorizontalAlignment="Center" VerticalAlignment="Center" MinWidth="150" BorderThickness="1" BorderBrush="#888888" CornerRadius="5">
<TextBox Text="WPF UI 真漂亮 944095635" Foreground="#888888" Padding="3" BorderThickness="0" Background="{x:Null}"/>
</Border>
</Grid>

  

----------------------------------------------------方案2:TextBox 模板----------------------------------------------------

待续....

WPF 圆角输入框的更多相关文章

  1. Swingr的JTextField、JPasswordField设置圆角输入框

    方法1:定义Border,然后给JTextField设置即可 摘自并整理:https://blog.csdn.net/u012093968/article/details/39316679 最好添加这 ...

  2. WPF 圆角textbox

    原文:WPF 圆角textbox 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a771948524/article/details/9245965 ...

  3. WPF数字输入框和IP地址输入框

    数字输入框 简介 在业务中,我们经常需要限制用户的输入,比如限制输入长度,限制只能输入数字等等.限制输入长度WPF内置的TextBox已经帮我们解决了,但是限制输入数字却并未在WPF中内置解决方案.使 ...

  4. Android 之 Shape (圆角输入框)

    1 简介 本文主要介绍通过 shape 来设置 EditText 的圆角.   2 shape 的设置   shape_life_search.xml 放在 res/drawable 文件夹内 < ...

  5. WPF圆角按钮例程

    <Window x:Class="WpfApp3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/200 ...

  6. wpf 圆角TextBox 样式

    <Style x:Key="RoundCornerTextStyle" TargetType="{x:Type TextBox}"> <Set ...

  7. WPF圆角按钮与触发颜色变化

    <Button x:Name="button1" Content="按钮1" Margin="10,10,0,0" Cursor=&q ...

  8. Android 圆角输入框

        draweable文件下建立一个名字为shape的XML文件:   <shape xmlns:android="http://schemas.android.com/apk/r ...

  9. WPF圆角按钮

    <ControlTemplate x:Key="CornerButton" TargetType="{x:Type Button}"> <Bo ...

随机推荐

  1. HTML5 Canvas 数据持久化存储之属性列表

    属性列表想必大家都不会陌生,正常用 HTML5 来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用 HT for Web 来实现属性栏点击按钮弹出多功能选框, ...

  2. linux下 ls -l 命令显示结果每一列代表什么意思

    第一个栏位,表示文件的属性.Linux的文件基本上分为三个属性:可读(r),可写(w),可执行(x).但是这里有十个格子可以添(具体程序实现时,实际上是十个bit位).第一个小格是特殊表示格,表示目录 ...

  3. html_栏目下拉

    ========================================================= =================[ 下拉栏目菜单 ]=============== ...

  4. s​q​l​i​t​e​3​-​入​门​教​程

    *** 非常好 http://wenku.baidu.com/link?url=xDoS4prJaGRac0QS0nxdNr6056N-qJIfZ7OhiTharj1ntuIsNy9sWXWvBXLh ...

  5. Mysql Index extends优化

    Innodb通过自动把主键列添加到每个二级索引来扩展它们: CREATE TABLE t1 ( i1 , i2 , d DATE DEFAULT NULL, PRIMARY KEY (i1, i2), ...

  6. 用Express、MySQL搭建项目(接口以及静态文件获取、文件上传等)

    一.简介 本文将主要基于node.js使用express框架搭建一个后台环境,包括如何自定义项目目录.所用依赖以及中间件.路由以及模板引擎.接口数据获取以及文件上传等内容. 二.后台环境搭建 1.新建 ...

  7. 从arduino到32单片机的转型

    #include "stm32f10x.h" #include "led.h" #include "delay.h" int main(vo ...

  8. js_9_dom属性

    如何设置标签属性? 找到标签 设置属性: 默认:.属性 = 属性值  //  默认属性才能用 找style中font-size : .style.fontSize     //  中间的短杆去掉,s要 ...

  9. Python输出hello world(各行命令详解)

    创建main.py文件并粘贴下面代码 点击右键运行Debug 'main'后,下方的Debug窗口会出现ImportError: No module named 'bottle'这样的提示,提示导入b ...

  10. MoonLight可视化订单需求区域分析系统前端

    MoonLight可视化订单需求区域分析系统实现功能: 在现实生活中,计算机和互联网迅速发展,人们越来越趋向于网络,于是我们就有了各种各样的系统,来帮助我们更好地生活.比如对于打车来说,我们也可以通过 ...