欧美日韩一级视频,zo0o与人xxxx欧美另类,国产欧美日韩亚洲

<delect id="hceqt"></delect>

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

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2024年11月18日 10:39 本文熱度 555

先看一下效果吧：

原博主的地址:【動畫進階】神奇的卡片 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"

效果就完成了...

轉自https://www.cnblogs.com/lvpp13/p/18376098

該文章在 2024/11/18 10:39:56 編輯過

關鍵字查詢

wpf

一個

前端

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

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