WPF之VistualBrush应用制作放大镜

我们可以通过WPF的VistualBrush获取画面中某个区域内容来当做某个元素内容的来源。根据这个原理我们就可以做出一些奇特的效果,比如放大镜的制作。

我先举个简单的利用VistualBrush的例子(文字的镜像效果)。这样更方便了解VistualBrush的原理。

1.先拖一个TextBox控件 命名为textBox1。再拖一个Rectangle矩形控件(当然也可以拖拽Lable控件,给Label.Background 填充内容)。

2.可以看到Rectangle呈现的内容就是TextBox的内容,而且是以倒影的形式显示出来。 所以接下来要做的就是给Rectangle填充TextBox的内容

<Rectangle Name="rectangle1" Stroke="Black" 
                      StrokeThickness="1" HorizontalAlignment="Left">
            <Rectangle.Fill>
                <VisualBrush Visual="{Binding ElementName=textBox1}">   
                 <!--获取视图来源-->
                </VisualBrush>
            </Rectangle.Fill>
</Rectangle>


这样就完成了Rectangle的填充。 但还没有上面的镜像效果

3.接下来我们将在VisualBrush 标签里用到RelativeTransform。就是将内容进行相对的转化

<VisualBrush Visual="{Binding ElementName=textBox1}"> 

     <VisualBrush.RelativeTransform> 

         <TransformGroup> 

            <ScaleTransform ScaleX="1" ScaleY="-1"/> 

            <TranslateTransform Y="1"/> 

         </TransformGroup> 

     </VisualBrush.RelativeTransform> 

</VisualBrush> 


这样就出现了一张图片的效果。 因此就更容易明白VistualBrush获取画面中某个区域内容来当做某个元素内容的来源的意思了。

同样的原理,接下来就开始利用VisualBrush制作具有放大功能的放大镜

我们要实现的是用放大镜在某个区域里实现放大的效果

因为上述有个简单的小例子,那么接下来直接帖代码来分析

<Grid Name="outsideGrid" Visibility="Visible">
        <Grid Name="insideGrid" HorizontalAlignment="Left" 
              VerticalAlignment="Bottom" PreviewMouseMove="insideGrid_PreviewMouseMove">
              <!--将TextBox放入insideGrid中,我们要实现的功能也是放大这个Grid里面的所有内容-->
              <TextBox HorizontalAlignment="Left" Name="textBox1" 
                       VerticalAlignment="Top" Text="WPF制作放大镜" />
        </Grid>
        <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
            <Canvas Name="magnifierCanvas" IsHitTestVisible="False">
                <Ellipse Width="100" Height="100" Fill="LightBlue" />
                <!--为了看得清楚椭圆控件我再添加了一个一样大小的Ellipse重叠再一起,将其背景颜色设置为LightBlue
                    当然你也可以不要这个Ellipse 可以删除-->
                <!--magnifierEllipse就是我们要填充的控件  就像上一个的Rectangle控件-->
                <Ellipse Width="100" Height="100" Name="magnifierEllipse">
                    <Ellipse.Fill>
                        <!--Viewbox 观景窗的范围 这里是30*30的矩形  
                            Viewbox值越大表示固定大小的Ellipse里面可以看到更多的insideGrid里面的内容
                            所以放大倍数就会越小  反之放大倍数越大。     
                            RelativeToBoundingBox相对于边境的单位。 
                            Viewport是观察孔 可以按比例来缩放视图 这里是1:1-->
                        <VisualBrush ViewboxUnits="Absolute" Viewbox="0,30,30"
                         ViewportUnits="RelativeToBoundingBox" Viewport="0,1,1"/>
                    </Ellipse.Fill>
                </Ellipse>
            </Canvas>
        </Canvas>
</Grid>


前台已经设置好了。我们似乎还没看到视图的来源, 那么如何让充当放大镜的Ellipse 随鼠标的移动而现实不同的内容呢? 接下来我们看下后台是如何处理的。我们通过一个滑鼠事件来达到目的

        VisualBrush vb;
        public MainWindow()
        {
            InitializeComponent();
            vb = (VisualBrush)magnifierEllipse.Fill; 
            vb.Visual = insideGrid;   //获取视图的来源为insideGrid中的所有内容
        }

        private void insideGrid_PreviewMouseMove(object sender,MouseEventArgs e)
        {
            Point pos = e.MouseDevice.GetPosition(outsideGrid);  //相对于outsideGrid 获取鼠标的坐标
            Rect viewBox = vb.Viewbox;    //这里的Viewbox和前台的一样   这里就是获取前台Viewbox的值 
            double xoffset = viewBox.Width / 2.0;  //因为鼠标要让它在矩形(放大镜)的中间  那么我们就要让矩形的左上角重新移动位置
            double yoffset = viewBox.Height / 2.0; //这里先获取矩形左上角要移动的x,y坐标大小
            viewBox.X = pos.X - xoffset;           //将鼠标的坐标减去要减少的坐标来重新定位viewBox的坐标
            viewBox.Y = pos.Y - yoffset;
            //viewBox.Width = 10;           //设置viewBox的大小  等同于这里可以设置放大的倍数(原因前台代码有解释)
            //viewBox.Height = 10;
            vb.Viewbox = viewBox;          //将重新定位的viewBox值 赋值给magnifierEllipse的Viewbox 并为下一个滑鼠事件更新新值
            Canvas.SetLeft(magnifierCanvas,pos.X - magnifierEllipse.Width / 2);  //同理重新定位Canvas magnifierCanvas的坐标
            Canvas.SetTop(magnifierCanvas,pos.Y - magnifierEllipse.Height / 2);
        }


这里要注意2点:

1.前台的Canvas应该在insideGrid的下面 ,如果在其上面显示insideGrid会覆盖Canvas. 这和显示的顺序有关系。

2.滑鼠事件中获取鼠标坐标的语句是Point pos = e.MouseDevice.GetPosition(outsideGrid); 是相对于outsideGrid 。 所以Canvas应该处于outsideGrid 的子节点中而不能成为insideGrid的子节点被它包含。

总结:

通过放大镜功能就能看出。其实放大镜并不是把经过的视图真正的放大,而是通过VisualBrush 获取内容作为另一个控件的视图来源,经过设置从而达到显示放大的效果。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Format[$] ( expr [ , fmt ] ) format 返回变体型 format$ 强制返回为文本 -------------------------------- 数字类型的格式化 --------------------------------     固定格式参数:     General Number 普通数字,如可以用来去掉千位分隔号     format$("100,1
VB6或者ASP 格式化时间为 MM/dd/yyyy 格式,竟然没有好的办法, Format 或者FormatDateTime 竟然结果和系统设置的区域语言的日期和时间格式相关。意思是尽管你用诸如 Format(Now, "MM/dd/yyyy"),如果系统的设置格式区域语言的日期和时间格式分隔符是"-",那他还会显示为 MM-dd-yyyy     只有拼凑: <%response.write
在项目中添加如下代码:新建窗口来显示异常信息。 Namespace My ‘全局错误处理,新的解决方案直接添加本ApplicationEvents.vb 到工程即可 ‘添加后还需要一个From用来显示错误。如果到这步还不会则需要先打好基础啦 ‘======================================================== ‘以下事件
转了这一篇文章,原来一直想用C#做k3的插件开发,vb没有C#用的爽呀,这篇文章写与2011年,看来我以前没有认真去找这个方法呀。 https://blog.csdn.net/chzjxgd/article/details/6176325 金蝶K3 BOS的插件官方是用VB6编写的,如果  能用.Net下的语言工具开发BOS插件是一件很愉快的事情,其中缘由不言而喻,而本文则是个人首创,实现在了用V
Sub 分列() ‘以空格为分隔符,连续空格只算1个。对所选中的单元格进行处理 Dim m As Range, tmpStr As String, s As String Dim x As Integer, y As Integer, subStr As String If MsgBox("确定要分列处理吗?请确定分列的数据会覆盖它后面的单元格!", _
  窗体代码 1 Private Sub Text1_OLEDragDrop(Data As DataObject, Effect As Long, Button As Integer, Shift As Integer, X As Single, Y As Single) 2 Dim path As String, hash As String 3 For Each fil
  Imports MySql.Data.MySqlClient Public Class Form1 ‘ GLOBAL DECLARATIONS Dim conString As String = "Server=localhost;Database=net2;Uid=root;Pwd=123456;" Dim con As New MySqlConnection
‘導入命名空間 Imports ADODB Imports Microsoft.Office.Interop   Private Sub A1() Dim Sql As String Dim Cnn As New ADODB.Connection Dim Rs As New ADODB.Recordset Dim S As String   S = "Provider=OraOLEDB.Oracl
Imports System.IO Imports System.Threading Imports System.Diagnostics Public Class Form1 Dim A(254) As String    Function ping(ByVal IP As Integer) As String Dim IPAddress As String IPAddress = "10.0.
VB运行EXE程序,并等待其运行结束 参考:https://blog.csdn.net/useway/article/details/5494084 Private Declare Function WaitForSingleObject Lib "kernel32" (ByVal hHandle As Long, ByVal dwMilliseconds As Long) As Long Pr
今天碰到一个问题,登陆的时候,如果不需要验证手机号为空,则不去验证手机号 因为登陆的时候所有的验证信息都存放在一个数组里 Dim CheckUserInfo() As String ={UserBirthday, SecEmail, UserMob, UserSex, RealNameFirst, RealName, CheckCardID, CheckCardType, Contactemail
在VB6.0中,数据访问接口有三种: 1、ActiveX数据对象(ADO) 2、远程数据对象(RDO) 3、数据访问对象(DAO) 1.使用ADO(ActiveX Data Objec,ActiveX数据对象)连接SQL Server 1)使用ADO控件连接 使用ADO控件的ConnectionString属性就可以连接SQL Server,该属性包含一个由分号分隔的argument=value语
注:大家如果没有VB6.0的安装文件,可自行百度一下下载,一般文件大小在200M左右的均为完整版的软件,可以使用。   特别提示:安装此软件的时候最好退出360杀毒软件(包括360安全卫士,电脑管家等,如果电脑上有这些软件的话),因为现如今的360杀毒软件直接会对VB6.0软件误报,这样的话就可能会在安装过程中被误报阻止而导致安装失败,或者是安装后缺乏很多必须的组件(其它的杀毒软件或安全卫士之类的
Private Sub Form_Load() Call conndb End Sub Private Function conndb() Dim cn As New ADODB.Connection Dim rs As New ADODB.Recordset Dim strCn, sql As String Dim db_host As String Dim db_user As String
  PPSM06S70:  Add  moddate  EDITSPRINTJOB:  MAX(TO_CHAR(ETRN.MODDATE, ‘yyyy/mm/dd/HH24:MI AM‘)) ACTUAL_SHIPDATE   4.Test Scenario (1) :Query SQL Test DN:8016578337 SELECT CTRN.TKCTID TRUCK_ID,        
  沒有出現CrystalReportViewer時,須安裝CRforVS_13_0. 新增1個數據集,新增1個數據表,添加二列,列名要和資料庫名一樣. 修改目標Framework 修改app.config, <startup >改成<startup useLegacyV2RuntimeActivationPolicy ="true">  CrystalReport1.rpt增加數據庫專家 在表單
Imports System.Threading Imports System Public Class Form1 Dim th1, th2 As Thread Public Sub Method1() Dim i As Integer For i = 1 To 100 If Me.Label1.BackColor =
Friend Const PROCESS_ALL_ACCESS = &H1F0FFF = 2035711 Friend Const PROCESS_VM_READ = &H10 Friend Const PROCESS_VM_WRITE = &H20 Friend Const PAGE_READONLY = &H2 Friend Const PAGE_READWRITE = &H4 Friend
以下代码随手写的 并没有大量测试 效率也有待提升 如果需要C#的请自行转换 Function SplitBytes(Data As Byte(), Delimiter As Byte()) As List(Of Byte()) Dim i = 0 Dim List As New List(Of Byte()) Dim bytes As New
Imports System.Data.SqlClient Public Class Form1 REM Public conn1 As SqlConnection = New SqlConnection("server=.; Integrated Security=False;Initial Catalog= mydatabase1; User ID= sa;password")