[WPF] VisualBrush 中的布局
今天插一篇随笔。说一说上周五遇到的一个布局问题,问题大概是这样的:需要在一个快区域上添加一张透明的背景图片,由于区域较大、并且宽高都不是固定大小,图片较小 所以图片需要居中显示。除此之外还需要在图片的透明部分添加一个非透明的纯色。
比如:最终的效果图、如下图所示:
当然如果只是为了实现这种效果、实现方案有多种,至少有三大类:
1、嵌套两个控件、分别应用纯色 和 居中图像。
2、使用 VisualBrush 将组合效果应用在同一个控件的Background上
3、重写控件、将组合效果绘制在Background上。
笔者今天说的是第二种方案:VisualBrush、这个强大的Brush类,它可以将任意Visual元素转化为Brush。
笔者第一次写的代码如下:
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.Column="1">
<Border.Background>
<VisualBrush>
<VisualBrush.Visual>
<Border Background="#455C73">
<Image Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="img_xiaofangzi.png" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</Grid>
第一次写的代码
看样子应该没多大问题、可出现的效果却不尽人意、图像被拉伸了(并且Image的宽高都失效了):
看到这个效果、我的第一直觉是在 VisualBrush上应用: Stretch="None" :
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.Column="1">
<Border.Background>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Border Background="#455C73">
<Image Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="img_xiaofangzi.png" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</Grid>
修改后的代码
事实再一次出乎意料:
表现出来的形式:VisualBrush中的Border大小没有填充整个背景色。 并且 Border的小大 和 Image的大小一致,很像是Image的宽高 20 * 20 把 Border撑大了。
在尝试为Broder设置宽高后,效果终于满意了。最终代码:
<Grid Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="100" />
<RowDefinition Height="*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="100" />
</Grid.ColumnDefinitions>
<Border Grid.Row="1" Grid.Column="1">
<Border.Background>
<VisualBrush Stretch="None">
<VisualBrush.Visual>
<Border Width="3000"
Height="3000"
Background="#455C73">
<Image Width="20"
Height="20"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="img_xiaofangzi.png" />
</Border>
</VisualBrush.Visual>
</VisualBrush>
</Border.Background>
</Border>
</Grid>
最终代码
当然,代码还是不够完美:由于背景区域的大小不固定,所以设置了一个超大的宽高。
问题解决了,再回头看一下VisualBrush 中的布局、由于 VisualBursh中的Visual的父级是VisualBrush, 它不能为Visual中的根元素提供大小,因此如果应用了 Stretch="None" ,那么就需要手动设置Visual根元素的大小了。这一点在 MSDN 上也可以得到证实。
[WPF] VisualBrush 中的布局的更多相关文章
- WPF中Grid布局
WPF中Grid布局XMAl与后台更改,最普通的登录界面为例. <Grid Width="200" Height="100" > <!--定义 ...
- WPF笔记(1.4 布局)——Hello,WPF!
原文:WPF笔记(1.4 布局)--Hello,WPF! 这一节只是第2章的引子.布局要使用Panel控件,有四种Panel,如下:DockPanel,就是设置停靠位置布局模型.StackPanel, ...
- 浅谈WPF本质中的数据和行为
WPF缩写为Windows Presentation Foundation的缩写,本文所要谈的就是WPF本质中的数据和行为,希望通过本文能对大家了解WPF本质有所帮助. 如果自己来做一个UI框架,我们 ...
- Android Studio分类整理res/Layout中的布局文件(创建子目录)
res/layout中的布局文件太杂,没有层次感,受不了的我治好想办法解决这个问题. 前几天看博客说可以使用插件分组,可惜我没找到.知道看到另一篇博客时,才知道这个方法不能用了. 不能用插件,那就手动 ...
- 【HTML5&CSS3进阶学习02】Header的实现·CSS中的布局
前言 我们在手机上布局一般是这个样子的: 其中头部对整个mobile的设计至关重要,而且坑也很多: ① 一般来说整个header是以fixed布局,fixed这个产物在移动端来说本身坑就非常多 ② 在 ...
- JVM中,对象在内存中的布局
在hotSpot虚拟机中,对象在内存中的布局可以分成对象头.实例数据.对齐填充三部分. 对象头:主要包括: 1.对象自身的运行行元数据,比如哈希码.GC分代年龄.锁状态标志等,这部分长度在32位虚拟机 ...
- android 非activity如何得到布局文件 (java文件中获取布局文件)
Android中得到布局文件对象有两种方式第一种,在Activity所在类中this.getLayoutInflater().inflater(R.layout.布局文件名,null);第二种,在非A ...
- Java中用户界面布局
绝对布局Absolute 通过放大或缩小界面的时候,组件大小和位置不会发生变化 浮动布局FlowLayout 调整应用程序窗口的大小时,组件将立刻重新排列 边界布局Border Layout 该位置有 ...
- 无废话Android之常见adb指令、电话拨号器、点击事件的4种写法、短信发送器、Android 中各种布局(1)
1.Android是什么 手机设备的软件栈,包括一个完整的操作系统.中间件.关键的应用程序,底层是linux内核,安全管理.内存管理.进程管理.电源管理.硬件驱动 2.Dalvik VM 和 JVM ...
随机推荐
- Centos7 安装PhantomJS
1.下载地址:http://phantomjs.org/download.html 2.文件名:phantomjs-2.1.1-linux-x86_64.tar.bz2 # 下载好后进行解压(由于 ...
- hive提前过滤重要性
hive提前过滤 create table sospdm.tmp_yinfei_test_01 ( id string ) partitioned by (statis_date string) ; ...
- JavaEE 之 Mybatis
1.Mybatis a.定义:MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架 b.步骤: ①在src下创建 SqlMapConfig.xml 及 datasource.pr ...
- Codeforces 1082D Maximum Diameter Graph (贪心构造)
<题目链接> 题目大意:给你一些点的最大度数,让你构造一张图,使得该图的直径最长,输出对应直径以及所有的边. 解题分析:一道比较暴力的构造题,首先,我们贪心的想,要使图的直径最长,肯定是尽 ...
- Spring boot中自定义Json参数解析器
转载请注明出处... 一.介绍 用过springMVC/spring boot的都清楚,在controller层接受参数,常用的都是两种接受方式,如下 /** * 请求路径 http://127.0. ...
- hibernate log4j 输出sql
applicationContext.xml <bean id="sessionFactory" class="org.springframework ...
- 南阳171----聪明的kk
//简单的dp #include<cstdio> #define Max(a,b) ((a)>(b)?(a):(b)) ]; int main() { int i,j,n,m,x,t ...
- CactiEZ安装与配置-监控网卡流量
1.1. 环境 本例CactiEZ-10.1-x86_64.iso下载地址 https://pan.baidu.com/s/1vivDJqpgtoBXRLm2D-bBTQ 密码:u12l 测试环境 服 ...
- 搭建WordPress 个人博客
1,准备 LAMP 环境 LAMP 是 Linux.Apache.MySQL 和 PHP 的缩写,是 Wordpress 系统依赖的基础运行环境.我们先来准备 LAMP 环境: (由于部分服务安装过程 ...
- (网络数据交互)Android解析Internet中的DOM树数据 “DOM树”
从网络请求回来的数据格式可能是.xml文件格式,常见的有:DOM树结构,下面讲述如何解析.具体可以参考博客文章:http://www.cnblogs.com/shenliang123/archive/ ...