首页 > 其他分享 >WPF 模仿前端大佬写一个Hover效果

WPF 模仿前端大佬写一个Hover效果

时间:2024-08-23 15:48:15浏览次数:12  
标签:Hover clip 效果 Visibility bd2 WPF 大佬 border 图片

先看一下效果吧:

 

原博主的地址:【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究 - ChokCoco - 博客园 (cnblogs.com)

原效果是一个css效果,我们采用WPF的方式模仿一下

因为技术有限,没有原博主的那么好看,毕竟盗版永远比不过原版...

然后这里看一下盗版的怎么写吧

先是拿到原版的图片(原博客里面有图片地址),当然也可以自己挑一张自己喜欢的图片,把图片保存到自己的WPF项目下面

 再把图片运用到代码里面去,给一个border的背景设置成图片,再给border设置一个圆角,就会得到一个圆角的图片

    <Grid>
        <Grid x:Name="gd1" Height="400" Width="300">
            <Border Margin="50" CornerRadius="30">
                <Border.Background>
                    <ImageBrush ImageSource="08.jpg"/>
                </Border.Background>
            </Border>
        </Grid>
    </Grid>

然后再给图片添加一个模糊效果

模糊效果的实现就是在图片的下面一层添加一个同样的border,但是设置不同的margin,让它比正常显示的图片大一圈

<Grid x:Name="gd1" Height="400" Width="300">
    <Border CornerRadius="30" Margin="18">
        <Border.Effect>
            <BlurEffect Radius="20"/>
        </Border.Effect>
        <Border.Background>
            <ImageBrush ImageSource="08.jpg"/>
        </Border.Background>
    </Border>
    <Border Margin="50" CornerRadius="30">
        <Border.Background>
            <ImageBrush ImageSource="08.jpg"/>
        </Border.Background>
    </Border>
</Grid>

红色部分就是添加的模糊层,添加以后就会得到下面的效果

 然后最重要的就是剩下的hover效果了:

我们先准备一个背景色,原版的背景色我不知道怎么实现,所以只能用不同的背景色做为底色了

把这个背景放到最下面就会得到下面的效果(这里遇到个问题,不知道怎么把超出border以外的虚化效果裁掉,导致border以外也有一点点的模糊效果)

(原博是通过设置外层的overflow: hidden; 来实现的,但是我不知道wpf怎么实现这个效果,查了半天也没查到)

代码如下,就是就是一个带有渐变色的border

<Grid x:Name="gd1" Height="400" Width="300">
    <Border x:Name="bd2" BorderThickness="2" Visibility="Hidden" CornerRadius="30" Margin="15">
        <Border.BorderBrush>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF43D4F9"/>
                <GradientStop Color="#FFDF07FD" Offset="1"/>
            </LinearGradientBrush>
        </Border.BorderBrush>
        <Border.Clip>
            <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
        </Border.Clip>
        <Border CornerRadius="30" Opacity="0.7">
            <Border.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FF43D4F9"/>
                    <GradientStop Color="#FFDF07FD" Offset="1"/>
                </LinearGradientBrush>
            </Border.Background>
        </Border>
    </Border>
    <Border CornerRadius="30" Margin="18">
        <Border.Effect>
            <BlurEffect Radius="20"/>
        </Border.Effect>
        <Border.Background>
            <ImageBrush ImageSource="08.jpg"/>
        </Border.Background>
    </Border>
    <Border Margin="50" CornerRadius="30">
        <Border.Background>
            <ImageBrush ImageSource="08.jpg"/>
        </Border.Background>
    </Border>
</Grid>

然后就是实现hover效果,在实现hover效果以前先给bd2添加一个clip效果

UIElement.Clip 属性 (System.Windows) | Microsoft Learn

关于clip的解释,可以看一下微软对于clip效果的说明

<Border.Clip>
    <EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
</Border.Clip>

把这段代码放到明为bd2的border下面就可以了

但是还需要一些后台代码,控制一下这个clip的移动,我们给最外层的名为gd1的grid添加几个事件

public MainWindow()
{
    InitializeComponent();
    gd1.MouseMove += MainGrid_MouseMove;
    gd1.MouseLeave += Bd1_MouseLeave;
    gd1.MouseEnter += Bd1_MouseEnter;
}

private void Bd1_MouseEnter(object sender, MouseEventArgs e)
{
    bd2.Visibility = Visibility.Visible;
}

private void Bd1_MouseLeave(object sender, MouseEventArgs e)
{
    bd2.Visibility = Visibility.Hidden;
}

private void MainGrid_MouseMove(object sender, MouseEventArgs e)
{
    //这里获取一下鼠标的坐标,然后让clip效果的中心跟着鼠标中心移动
    Point mousePosition = e.GetPosition(gd1);
    eg1.Center = new Point(mousePosition.X, mousePosition.Y);
}

然后我们让默认情况下bd2的 Visibility="Hidden" 

效果就完成了...

如果有更好的解决办法,可以和我联系哦。

 

项目github地址:bearhanQ/WPFFramework: Share some experience (github.com)

QQ技术交流群:332035933;

欢迎进群讨论问题,不论是winform,还是wpf,还是.net core的,还有很多萌妹.

 

标签:Hover,clip,效果,Visibility,bd2,WPF,大佬,border,图片
From: https://www.cnblogs.com/lvpp13/p/18376098

相关文章

  • 【AI绘画】零基础学会Stable Diffusion!保姆级教程!附全套学习教程,你离成为大佬只差看完
    大家好,我是SD教程菌。最近,我惊奇地发现,还有不少粉丝朋友还没用过AI绘画的顶流工具——StableDiffusion,简称“SD”。今天来出一期SD版零基础的AI绘画课,分为4个部分:SD能有多强?电脑配置要求软件安装基础使用流程1.SD能有多强?其实,2022年8月StableDiffusion就开源发布了,经......
  • WPF 模拟UWP原生窗口样式——亚克力|云母材质、自定义标题栏样式、原生DWM动画 (附我封
    先看一下最终效果,左图为使用亚克力材质并添加组合颜色的效果;右图为MicaAlt材质的效果。两者都自定义了标题栏并且最大限度地保留了DWM提供的原生窗口效果(最大化最小化、关闭出现的动画、窗口阴影、拖拽布局器等)。接下来把各部分的实现一个个拆开来讲讲。一、使用窗口材质特......
  • WPF 设备输入事件封装
    本文主要介绍WPF应用对鼠标输入、触摸屏触笔以及触摸事件的封装之前有简单说明设备输入类型 WPF屏幕点击的设备类型-唐宋元明清2188-博客园(cnblogs.com)1、鼠标- 通过Mouse相关的事件参数MouseButtonEventArgs中的数据,e.StylusDecice==null表示没有触摸设备,所以设备为......
  • 文字下滑线渐变效果(有hover效果)
    文字下滑线渐变效果(有hover效果)利用线性渐变,先设置background-size款为0,搞为3px,transition设置过过渡时间,hover时,把background-size宽度设为100%,高度还是3px<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<a>BBBBBBBBBBBBBBBBBBBBB......
  • WPF中如何使用后台代码动态创建数据模板(DataTemplate)
    数据模板回顾 在WPF中数据模板可以控制数据的呈现方式。对于一些简单的数据,例如一个string,一个int,在显示时,无须额外控制。但是对于复杂数据类型,就需要使用数据模板来控制数据的呈现方式。 一个很简单的例子假设我们定义了一个学生类1publicclassStudent2......
  • 「对比评测」标准WPF DataGrid与DevExpress WPF GridControl有何不同?(一)
    DevExpressWPF拥有120+个控件和库,将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpressWPF能创建有着强大互动功能的XAML基础应用程序,这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。无论是Office办公软件的衍伸产品,还是以数据为中心......
  • WPF:MVVM的由来与属性绑定的过程
    WPF:MVVM的由来与属性绑定的过程1、MVVM(1)MVVM是什么?​ MVVM(Model-View-ViewModel)是一种软件架构设计模式MVVM模式。有助于分离应用程序的业务逻辑和用户界面层,使得开发过程更易于管理,同时也便于单元测试。Model?现实世界中对象的抽象结果。View?View=UI。ViewModel?Vie......
  • 七个合法学习黑客技术的平台,让你从萌新成为大佬
     1、HackThisSite提供在线IRC聊天和论坛,让用户交流更加方便。网站涵盖多种主题,包括密码破解、网络侦察、漏洞利用、社会工程学等。非常适用于个人提高网络安全技能2、HackaDay涵盖多个领域,包括黑客技术、科技、工程和DIY等内容,站内提供大量有趣的文章、视频、教程和......
  • 七个合法学习黑客技术的平台,让你从萌新成为大佬
     1、HackThisSite提供在线IRC聊天和论坛,让用户交流更加方便。网站涵盖多种主题,包括密码破解、网络侦察、漏洞利用、社会工程学等。非常适用于个人提高网络安全技能2、HackaDay涵盖多个领域,包括黑客技术、科技、工程和DIY等内容,站内提供大量有趣的文章、视频、教程和......
  • 【WPF】WPF项目.exe可执行文件在非开发环境打不开
    如题,做一个小工具,开发完之后把bin/release文件夹打包发他,但在他电脑打不开。打开可靠性监视器:按下Win+S,在搜索栏中输入“控制面板”,然后点击进入。在控制面板中选择“系统和安全”。然后选择“安全与维护”。在“安全与维护”窗口中,展开“维护”部分,并点击“查看可靠性......