WPF 模仿前端大佬寫一個Hover效果

BearHan發表於2024-08-23
前端

先看一下效果吧：

原博主的地址:【動畫進階】神奇的卡片 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的，還有很多萌妹.

相關文章