原文:抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Vblegend_2013/article/details/83447420

源码已封装成 MirrorGrid类 可以直接在XAML里添加

根据需要可以把Grid 改为  button border等控件

注意 Target必须为当前控件下层的控件对象

 

加个BlurEffect就是毛玻璃效果

<!--玻璃层控件-->
<local:MirrorGrid
Background="Red"
Target="{Binding ElementName=box}"
Width="150"
Height="100"
x:Name="thumb" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="thumb_MouseDown" MouseMove="thumb_MouseMove" MouseUp="thumb_MouseUp">
<local:MirrorGrid.Effect>
<BlurEffect Radius="20" RenderingBias="Performance"/>
</local:MirrorGrid.Effect>
</local:MirrorGrid>

 

using System.Windows;
using System.Windows.Controls;
using System.Windows.Media; namespace WpfApp2
{
/// <summary>
/// 镜像格子
/// </summary>
public class MirrorGrid : Grid
{ /// <summary>
/// 目标对象
/// </summary>
public FrameworkElement Target
{
get { return (FrameworkElement)GetValue(TargetProperty); }
set { SetValue(TargetProperty, value); }
} /// <summary>
/// 目标对象属性
/// </summary>
public static readonly DependencyProperty TargetProperty =
DependencyProperty.Register("Target", typeof(FrameworkElement), typeof(MirrorGrid),
new FrameworkPropertyMetadata(null)); /// <summary>
/// 重写基类 Margin
/// </summary>
public new Thickness Margin
{
get { return (Thickness)GetValue(MarginProperty); }
set { SetValue(MarginProperty, value); }
}
public new static readonly DependencyProperty MarginProperty = DependencyProperty.Register("Margin", typeof(Thickness), typeof(MirrorGrid), new FrameworkPropertyMetadata(new Thickness(0), new PropertyChangedCallback(OnMarginChanged)));
private static void OnMarginChanged(DependencyObject target, DependencyPropertyChangedEventArgs e)
{
((FrameworkElement)target).Margin = (Thickness)e.NewValue;
//强制渲染
((FrameworkElement)target).InvalidateVisual();
} protected override void OnRender(DrawingContext dc)
{
var Rect = new Rect(0, 0, RenderSize.Width, RenderSize.Height);
if (Target == null)
{
dc.DrawRectangle(this.Background, null, Rect);
}
else
{
this.DrawImage(dc, Rect);
} } private void DrawImage(DrawingContext dc, Rect rect)
{
VisualBrush brush = new VisualBrush(Target)
{
Stretch = Stretch.Fill,
};
var tl = this.GetElementLocation(Target);
var sl = this.GetElementLocation(this);
var lx = (sl.X - tl.X) / Target.ActualWidth;
var ly = (sl.Y - tl.Y) / Target.ActualHeight;
var pw = this.ActualWidth / Target.ActualWidth;
var ph = this.ActualHeight / Target.ActualHeight;
brush.Viewbox = new Rect(lx, ly, pw, ph);
dc.DrawRectangle(brush, null, rect);
} /// <summary>
/// 获取控件元素在窗口的实际位置
/// </summary>
/// <param name="Control"></param>
/// <returns></returns>
public Point GetElementLocation(FrameworkElement Control)
{
Point location = new Point(0, 0);
FrameworkElement element = Control;
while (element != null)
{
var Offset = VisualTreeHelper.GetOffset(element);
location = location + Offset;
element = (FrameworkElement)VisualTreeHelper.GetParent(element);
}
return location;
} }
}

 

测试源码

<Window x:Class="WpfApp2.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp2"
mc:Ignorable="d"
Title="Window1" Height="450" Width="800">
<Grid ClipToBounds="True">
<!--下层被模糊层-->
<Grid x:Name="box"
Background="AntiqueWhite"
HorizontalAlignment="Left" Height="332" VerticalAlignment="Top" Width="551">
<Grid HorizontalAlignment="Left" Height="260" Margin="0,0,0,0" VerticalAlignment="Top" Width="345">
<Grid.Background>
<ImageBrush ImageSource="123.png"/>
</Grid.Background>
</Grid>
<Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="114" Margin="345,218,0,0" Stroke="Black" VerticalAlignment="Top" Width="206"/>
</Grid>
<!--玻璃层控件-->
<local:MirrorGrid
Background="Red"
Target="{Binding ElementName=box}"
Width="150"
Height="100"
x:Name="thumb" Margin="0,0,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" MouseDown="thumb_MouseDown" MouseMove="thumb_MouseMove" MouseUp="thumb_MouseUp">
<local:MirrorGrid.Effect>
<BlurEffect Radius="20" RenderingBias="Performance"/>
</local:MirrorGrid.Effect>
</local:MirrorGrid>
<!--测试边框线-->
<Rectangle Stroke="#FF2DEC0E"
IsHitTestVisible="False"
Width="{Binding ElementName=thumb, Path=Width}"
Height="{Binding ElementName=thumb, Path=Height}"
Margin="{Binding ElementName=thumb, Path=Margin}"
HorizontalAlignment="Left" VerticalAlignment="Top"/> </Grid>
</Window>

 

后台

using System.Windows;
using System.Windows.Input; namespace WpfApp2
{
/// <summary>
/// Window1.xaml 的交互逻辑
/// </summary>
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
} private bool isDragging;
private Point clickPosition; private void thumb_MouseDown(object sender, MouseButtonEventArgs e)
{
isDragging = true;
var draggableElement = sender as UIElement;
clickPosition = e.GetPosition(this);
draggableElement.CaptureMouse();
} private void thumb_MouseUp(object sender, MouseButtonEventArgs e)
{
isDragging = false;
var draggableElement = sender as UIElement;
draggableElement.ReleaseMouseCapture();
} private void thumb_MouseMove(object sender, MouseEventArgs e)
{
var draggableElement = sender as UIElement;
if (isDragging && draggableElement != null)
{
Point currentPosition = e.GetPosition(this.Parent as UIElement);
Thickness s = new Thickness(thumb.Margin.Left + currentPosition.X - clickPosition.X, thumb.Margin.Top + currentPosition.Y - clickPosition.Y,0,0);
thumb.Margin = s;
clickPosition = currentPosition;
}
} }
}

 

 

抛砖引玉 【镜像控件】 WPF实现毛玻璃控件不要太简单的更多相关文章

  1. 实现控件WPF(4)----Grid控件实现六方格

    PS:今天上午,非常郁闷,有很多简单基础的问题搞得我有些迷茫,哎,代码几天不写就忘.目前又不当COO,还是得用心记代码哦! 利用Grid控件能很轻松帮助我们实现各种布局.上面就是一个通过Grid单元格 ...

  2. WPF中Ribbon控件的使用

    这篇博客将分享如何在WPF程序中使用Ribbon控件.Ribbon可以很大的提高软件的便捷性. 上面截图使Outlook 2010的界面,在Home标签页中,将所属的Menu都平铺的布局,非常容易的可 ...

  3. WPF 调用WinForm控件

    WPF可以使用WindowsFormsHost控件做为容器去显示WinForm控件,类似的用法网上到处都是,就是拖一个WindowsFormsHost控件winHost1到WPF页面上,让后设置win ...

  4. InteropBitmap指定内存,绑定WPF的Imag控件时刷新问题。

    1.InteropBitmap指定内存,绑定WPF的Imag控件的Source属性 创建InteropBitmap的时候,像素的格式必须为PixelFormats.Bgr32, 如果不是的话在绑定到I ...

  5. 在WPF程序中将控件所呈现的内容保存成图像(转载)

    在WPF程序中将控件所呈现的内容保存成图像 转自:http://www.cnblogs.com/TianFang/archive/2012/10/07/2714140.html 有的时候,我们需要将控 ...

  6. WPF 分页控件 WPF 多线程 BackgroundWorker

    WPF 分页控件 WPF 多线程 BackgroundWorker 大家好,好久没有发表一篇像样的博客了,最近的开发实在头疼,很多东西无从下口,需求没完没了,更要命的是公司的开发从来不走正规流程啊, ...

  7. 【WPF】监听WPF的WebBrowser控件弹出新窗口的事件

    原文:[WPF]监听WPF的WebBrowser控件弹出新窗口的事件 WPF中自带一个WebBrowser控件,当我们使用它打开一个网页,例如百度,然后点击它其中的链接时,如果这个链接是会弹出一个新窗 ...

  8. 在WPF的WebBrowser控件中抑制脚本错误

    原文:在WPF的WebBrowser控件中抑制脚本错误 今天用WPF的WebBrowser控件的时候,发现其竟然没有ScriptErrorsSuppressed属性,导致其到处乱弹脚本错误的对话框,在 ...

  9. 浅尝辄止WPF自定义用户控件(实现颜色调制器)

    主要利用用户控件实现一个自定义的颜色调制控件,实现一个小小的功能,具体实现界面如下. 首先自己新建一个wpf的用户控件类,我就放在我的wpf项目的一个文件夹下面,因为是一个很小的东西,所以就没有用mv ...

随机推荐

  1. 实现indexOf

    1.先判断Array数组是否含有indexOf方法,如果有直接返回结果:如果没有则利用循环比较得到结果. function indexOf(arr, item) { if(Array.prototyp ...

  2. ios日期比较

    +(int)compareDate:(NSDate *)date1 date:(NSDate *)date2 { NSDateFormatter *dateFormatter = [[NSDateFo ...

  3. outlook vba 2

  4. 高速在MyEclipse中打开jsp类型的文件

    MyEclipse打开jsp时老是要等上好几秒,嗯嗯,这个问题的确非常烦人,事实上都是MyEclipse的"自作聪明"的结果(它默认用Visual Designer来打开的),进行 ...

  5. php实现从尾到头打印列表

    php实现从尾到头打印列表 一.总结 4.数组倒序:array_reverse() 5.函数肯定要return,而不是echo 二.php实现从尾到头打印列表 输入一个链表,从尾到头打印链表每个节点的 ...

  6. surfingkeys

    https://www.appinn.com/surfingkeys-for-chrome/ 尝试使用.听说能支持js Vimium 不支持拷贝链接的文本. 不支持stop page https:// ...

  7. pppoe-环境下的mtu和mss

    路由器上在宽带拨号高级设置页面会有设置数据包MTU的页面 数据包MTU(字节):1480 (默认是1480,如非必要,请勿修改) PPPoE/ADSL:1492 ,可以尝试修改为1492 MTU: M ...

  8. 【2006】求N!的精确值

    Time Limit: 3 second Memory Limit: 2 MB 对于阶乘函数,即使自变量较小,其函数值也会相当大.例如: 10!=3628800 25!=155112100433309 ...

  9. 《iOS Human Interface Guidelines》——Edit Menu

    编辑菜单 用户能够显示一个编辑菜单来在文本视图.网页视图和图像视图运行诸如剪切.粘贴和选择的操作. 你能够调整一些菜单的行为来在你的app中给用户给多的内容控制.比方你能够: 指定哪一个标准菜单命令对 ...

  10. OpenGL核心之视差映射

    笔者介绍:姜雪伟,IT公司技术合伙人.IT高级讲师,CSDN社区专家,特邀编辑.畅销书作者;已出版书籍:<手把手教你¯的纹理坐标偏移T3来对fragment的纹理坐标进行位移.你能够看到随着深度 ...