WPF 模仿前端大佬寫一個(gè)Hover效果
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
先看一下效果吧：
原博主的地址:【動(dòng)畫進(jìn)階】神奇的卡片 Hover 效果與 Blur 的特性探究 - ChokCoco - 博客園 (cnblogs.com) 原效果是一個(gè)css效果,我們采用WPF的方式模仿一下 因?yàn)榧夹g(shù)有限，沒有原博主的那么好看，畢竟盜版永遠(yuǎn)比不過原版... 然后這里看一下盜版的怎么寫吧 先是拿到原版的圖片(原博客里面有圖片地址)，當(dāng)然也可以自己挑一張自己喜歡的圖片,把圖片保存到自己的WPF項(xiàng)目下面
再把圖片運(yùn)用到代碼里面去，給一個(gè)border的背景設(shè)置成圖片，再給border設(shè)置一個(gè)圓角，就會(huì)得到一個(gè)圓角的圖片 ? <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>
然后再給圖片添加一個(gè)模糊效果 模糊效果的實(shí)現(xiàn)就是在圖片的下面一層添加一個(gè)同樣的border，但是設(shè)置不同的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> 紅色部分就是添加的模糊層,添加以后就會(huì)得到下面的效果
然后最重要的就是剩下的hover效果了: 我們先準(zhǔn)備一個(gè)背景色，原版的背景色我不知道怎么實(shí)現(xiàn)，所以只能用不同的背景色做為底色了
把這個(gè)背景放到最下面就會(huì)得到下面的效果(這里遇到個(gè)問題，不知道怎么把超出border以外的虛化效果裁掉，導(dǎo)致border以外也有一點(diǎn)點(diǎn)的模糊效果) (原博是通過設(shè)置外層的overflow: hidden; 來實(shí)現(xiàn)的，但是我不知道wpf怎么實(shí)現(xiàn)這個(gè)效果，查了半天也沒查到)
代碼如下，就是就是一個(gè)帶有漸變色的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> 然后就是實(shí)現(xiàn)hover效果,在實(shí)現(xiàn)hover效果以前先給bd2添加一個(gè)clip效果 UIElement.Clip 屬性 (System.Windows) | Microsoft Learn 關(guān)于clip的解釋,可以看一下微軟對(duì)于clip效果的說明 <Border.Clip>
<EllipseGeometry x:Name="eg1" RadiusX="150" RadiusY="150" Center="150,200"/>
</Border.Clip>把這段代碼放到明為bd2的border下面就可以了 但是還需要一些后臺(tái)代碼，控制一下這個(gè)clip的移動(dòng),我們給最外層的名為gd1的grid添加幾個(gè)事件 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) { //這里獲取一下鼠標(biāo)的坐標(biāo)，然后讓clip效果的中心跟著鼠標(biāo)中心移動(dòng) Point mousePosition = e.GetPosition(gd1); eg1.Center = new Point(mousePosition.X, mousePosition.Y); } 然后我們讓默認(rèn)情況下bd2的 Visibility="Hidden" 效果就完成了... 轉(zhuǎn)自https://www.cnblogs.com/lvpp13/p/18376098 該文章在 2024/11/18 10:39:56 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
