2019-4-29-win10-uwp-使用-Border-布局

title	author	date	CreateTime	categories
win10 uwp 使用 Border 布局	lindexi	2019-04-29 12:29:45 +0800	2019-03-31 15:53:38 +0800	Win10 UWP

在 UWP 写一个界面需要将元素排列，在排列元素的时候有特殊的元素叫容器。容器的意思是元素里面包含元素，在 UWP 用到的容器有很多，也可以自己写一个。简单的容器是 Border 边框控件，如控件说的，这个容器就是用来做元素的边框。提供元素边框和背景，只能在这个容器里面放一个元素

在 UWP 中可以直接在 xaml 写界面，建议将界面在 xaml 写。简单创建项目写一个 Border 里面有一个文本

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

这里的 Border 有两个设置的属性 HorizontalAlignment 和 VerticalAlignment 属性，这两个属性是通用的 UIElement 的属性，也就是界面元素定义的属性

定义 HorizontalAlignment 用在外层的容器的布局，容器发现 HorizontalAlignment 就知道需要将这个元素放在水平的哪里

定义 VerticalAlignment 就是告诉外层需要将这个元素放在垂直的哪里，详细请看 win10 uwp 一张图说明水平对齐和垂直对齐

在 Border 里面只能放一个元素，上面代码是一个文本，运行代码可以看到这个界面

在 VisualStudio 2017 可以在 UWP 运行修改 xaml 代码修改界面，在 Border 控件定义边框

边框包括两个需要定义的属性，一个是边框的线条宽度，另一个是边框的颜色。修改代码，加上 BorderThickness="2" BorderBrush="Black" 修改 Border 边框宽度为 2 颜色是黑色

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="2" BorderBrush="Black"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

其实边框可以定制的很多，如我需要边框的上方线条宽度是 2 像素，边框左边是10像素，边框的下方是 2 像素等，我可以这样写

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="10 2 2 2" BorderBrush="Black"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

这里的 Border 宽度是可以使用多个值和 Margin 相同，顺序是左上右下对应修改就可以

如果修改宽度为 0 那么就看不到相同，如我就需要在文本画一条直线

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="0 2 0 0" BorderBrush="Black"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

边框还可以修改圆角 CornerRadius 请看代码

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="2 2 2 2" BorderBrush="Black" CornerRadius="5"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

和 BorderThickness 一样，可以修改 CornerRadius 的上下左右的值，顺序是左上角右上角右下角左下角

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="2 2 2 2" BorderBrush="Black" CornerRadius="5 2 10 2"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

在 TextBlock 是没有背景属性的，那么如何给一段文字修改背景？可以使用 Border 里面放文本，通过修改背景的方法。请看代码我修改了边框的背景，这样文本也就被我修改背景

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="10 2 2 2" BorderBrush="Black" Background="#0F252525"><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

颜色有两个写法，一个是直接写预定的颜色，如 Black 黑色，另一个是写颜色的 #AARRGGBB 可以在 QQ 截图的时候按下 ctrl 键知道屏幕鼠标的颜色

在写到了背景会看到还有属性是 BackgroundSizing 这个表示背景是否包含边框，默认的值是 InnerBorderEdge 也就是背景大小是不包括边框，可以修改为 OuterBorderEdge 背景大小包括边框。这个属性是在边框是透明的时候才有用

另外还有背景动画，这个需要在后台修改背景，通过 BrushTransition 在元素背景修改的时候做动画渐变

        <Border HorizontalAlignment="Center" VerticalAlignment="Center"BorderThickness="20 20 2 2" BorderBrush="Transparent" CornerRadius="5 2 10 2"Background="{x:Bind BorderBackground,Mode=OneWay}" BackgroundSizing="OuterBorderEdge"><Border.BackgroundTransition><BrushTransition></BrushTransition></Border.BackgroundTransition><TextBlock Margin="10,10,10,10" Text="林德熙是逗比" /></Border>

在后台创建属性 BorderBackground 在两秒之后修改颜色，可以看到这个方法的动画很诡异，如果想要好看的动画请看UWP Background过渡动画 - 叫我蓝火火 - 博客园

        public MainPage(){this.InitializeComponent();Task.Delay(TimeSpan.FromSeconds(2)).ContinueWith(async _ =>{await Dispatcher.RunAsync(CoreDispatcherPriority.Normal,() => { BorderBackground = new SolidColorBrush(Colors.Black); });});}public static readonly DependencyProperty BorderBackgroundProperty = DependencyProperty.Register("BorderBackground", typeof(Brush), typeof(MainPage),new PropertyMetadata(new SolidColorBrush(Colors.White)));public Brush BorderBackground{get { return (Brush) GetValue(BorderBackgroundProperty); }set { SetValue(BorderBackgroundProperty, value); }}

Border.BackgroundTransition Property (Windows.UI.Xaml.Controls)

Border Class (Windows.UI.Xaml.Controls)

2019-4-29-win10-uwp-使用-Border-布局相关推荐

win10 UWP Controls by function
Windows的 XAML UI 框架提供了很多控件,支持用户界面开发库. 我现在做的一个中文版的,很多都是照着微软写,除了注释我们先学微软做一个简单的frame,新建Page,里面放title和跳 ...
win10 uwp 使用 Matrix3DProjection 进行 3d 投影
win10 uwp 使用 Matrix3DProjection 进行 3d 投影原文:win10 uwp 使用 Matrix3DProjection 进行 3d 投影版权声明:博客已迁移到 htt ...
win10 uwp 商业游戏 1.1.5
本文是在win10 uwp 商业游戏基础上继续开发,添加一些无聊的游戏因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏下面我来告诉大家如何在游戏中添加多个 ...
win10 UWP 应用设置
win10 UWP 应用设置简单的把设置需要的,放到微软自带的LocalSettings LocalSettings.Values可以存放几乎所有数据如果需要存放复合数据,一个设置项是由多个值组成 ...
win10 uwp DataContext
本文告诉大家DataContext的多种绑法. 适合于WPF的绑定和UWP的绑定. 我告诉大家很多个方法,所有的方法都有自己的优点和缺点,可以依靠自己喜欢的用法使用.当然,可以在新手面前秀下,一个页面 ...
Win10 UWP开发系列：使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
win10 uwp 毛玻璃
原文:win10 uwp 毛玻璃版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http://lindexi.gitee.io 访问博 ...
win10 uwp 打包第三方字体到应用
原文:win10 uwp 打包第三方字体到应用有时候我们会把一些特殊字体打包到软件,因为如果找不到我们的字体会变为默认,现在很多字体图标我们用得好,有时候我们的应用会用很漂亮的字体,需要我们自己打包 ...
Win10 UWP开发中的重复性静态UI绘制小技巧 1
Win10 UWP开发中的重复性静态UI绘制小技巧 1 原文:Win10 UWP开发中的重复性静态UI绘制小技巧 1 介绍在Windows 10 UWP界面实现的过程中,有时会遇到一些重复性的.静态 ...
win10 uwp 线程池
win10 uwp 线程池原文:win10 uwp 线程池如果大家有开发 WPF 或以前的程序,大概知道线程池不是 UWP 创造的,实际上在很多技术都用到线程池. 为什么需要线程池,他是什么?如何 ...

2019-4-29-win10-uwp-使用-Border-布局

2019-4-29-win10-uwp-使用-Border-布局相关推荐

最新文章

热门文章