WPF实例秀——如何获取UI元素的图像

简介:
WPF实例秀——如何获取UI元素的图像
 
这个标题还真难说明白,我还是再解释一下吧。
 
比如我想在UI上拖拽某个元素,拖拽过程中,我需要让这个UI元素的影相跟着鼠标移动(但UI还停留在原位),当放开鼠标的时候,UI元素移动到新的位置。
 
这是个很常见的需求,实现这个需求的第一步就是获取这个UI元素的影相。实现这一步其实很简单,核心就是使用VisualBrush这个画刷子类。
 
下面我给出一个简单的例子。
 
这是UI描述,
  1. <Window x:Class="WpfApplicationImage.Window1"
  2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.     Title="Window1" Height="300" Width="400" Background="SteelBlue">
  5.     <Grid Margin="10">
  6.         <Grid.ColumnDefinitions>
  7.             <ColumnDefinition Width="160"/>
  8.             <ColumnDefinition Width="*"/>
  9.             <ColumnDefinition Width="160"/>
  10.         </Grid.ColumnDefinitions>
  11.         <StackPanel x:Name="stackPanelLeft" Background="White">
  12.             <Button x:Name="btn" Content="OK" Height="40"/>
  13.         </StackPanel>
  14.         <Button Content=">>>" Grid.Column="1" Margin="5" Click="Button_Click"/>
  15.         <StackPanel x:Name="stackPanelRight" Background="White" Grid.Column="2"/>
  16.     </Grid>
  17. </Window>
UI效果是这样的
 
点击中间的Button,会把左边StackPanel中Button的影像加入到右边的StackPanel中。代码如下(核心是使用VisualBrush):
 
  1.         private void Button_Click(object sender, RoutedEventArgs e)
  2.         {
  3.             VisualBrush vbrush = new VisualBrush(btn);
  4.             Rectangle rect = new Rectangle();
  5.             rect.Width = btn.Width;
  6.             rect.Height = btn.Height;
  7.             rect.Fill = vbrush;
  8.             rect.Opacity = 0.5; //为了表示是影像,我让不透明度为50%
  9.             this.stackPanelRight.Children.Add(rect);
  10.         }
点击几下后,结果如下图:
 
核心问题解决了,剩下的就好办了。如果想做出拖拽等效果,只是些使用Mouse事件和计算偏移量的小技俩了:p
====================================
我写了一个完整的例子,上传到资源里了,可惜不知道为什么显示不出来。名字叫“WPF拖拽效果源代码”。等我自己能看见了,就把链接贴过来~~~
 
放个截图先~~~~









本文转自 水之真谛 51CTO博客,原文链接:http://blog.51cto.com/liutiemeng/121351,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
227 0
|
2月前
|
开发工具 Android开发 开发者
Android UI设计: 解释Android的Nine-Patch图像是什么,它用于什么目的?
Android UI设计: 解释Android的Nine-Patch图像是什么,它用于什么目的?
45 4
|
1月前
|
开发工具 Android开发 开发者
Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例
【6月更文挑战第26天】Android `.9.png` 图像是用于UI的可拉伸格式,保持元素清晰度和比例。通过边上的黑线定义拉伸区域,右下角黑点标识内容区域,适应文本或组件大小变化。常用于按钮、背景等,确保跨屏幕尺寸显示质量。Android SDK 提供`draw9patch.bat`工具来创建和编辑。**
100 6
|
21天前
|
C# Windows
一款开源、免费、现代化风格的WPF UI控件库
一款开源、免费、现代化风格的WPF UI控件库
|
25天前
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
Element UI 表单【详解】-- 表单校验,表单元素排列在一行,常用表单元素等
29 0
|
2月前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
79 1
|
2月前
|
前端开发 C# 索引
浅谈WPF之UI布局
一个成功的软件,离不开人性化的UI设计,如何抓住用户第一视觉,让用户产生依赖感,合适优雅的布局必不可少。本文以一些简单的小例子,简述WPF中布局 面板 控件的使用,仅供学习分享使用,如有不足之处,还请指正。
62 1
|
2月前
|
存储 传感器 监控
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
工业相机如何实现实时和本地Raw格式图像和Bitmap格式图像的保存和相互转换(C#代码,UI界面版)
65 0
|
2月前
|
搜索推荐 C# 开发者
3个值得推荐的WPF UI组件库
3个值得推荐的WPF UI组件库
248 0
|
2月前
|
前端开发 JavaScript C#
一个WPF版的Layui前端UI库
一个WPF版的Layui前端UI库
106 0