WPF XAML-图像的玻璃效果

本文关键字：玻璃 XAML- 图像 WPF | 更新日期: 2023-09-27 18:28:23

是否可以像本例中包含的缩略图一样创建图像的玻璃状显示（例如，Gordon Ramsay图像的缩略图对我想要重新创建的图像具有很好的蓝色玻璃效果）？

你知道我该怎么处理吗？DropShadowBitmapEffect和

<Border BorderThickness="1"
                Height="94" Width="175.5" Margin="3,3,0,3" HorizontalAlignment="Left" VerticalAlignment="Center">
                <Border.BorderBrush>
                    <SolidColorBrush Color="#FFF9F9F9" Opacity="0.5"/>
                </Border.BorderBrush>
                <Border.BitmapEffect>
                    <DropShadowBitmapEffect ShadowDepth="1" Softness="0.305" Color="#FFF9F9F9"/>
                </Border.BitmapEffect>
                        <Image Name="myImg" Stretch="Fill"/>
            </Border>

WPF XAML-图像的玻璃效果

看起来Border的Brush是浅蓝色/灰色的SolidColorBrush，可能有相同颜色的Background。我认为"玻璃"或"褪色边缘"效应是用Image上的OpacityMask来实现的。

您可以从MSDN上的"不透明度遮罩概述"页面了解有关使用OpacityMask的更多信息。

这就是我根据您的建议对其进行编码的方式（背景图像的imageSource是在C#中以编程方式设置的，并且可以工作）：

<Border BorderThickness="1" CornerRadius="5" Height="94" Width="175.5"
                    HorizontalAlignment="Left"  VerticalAlignment="Center" Margin="3,3,0,3">
                <Border.Background>
                    <ImageBrush x:Name="myImg" Stretch="Fill"/>
                </Border.Background>
                <Border.Effect>
                    <DropShadowEffect BlurRadius="10" ShadowDepth="7" Direction="315"/>
                </Border.Effect>
                <Border.BorderBrush>
                    <LinearGradientBrush EndPoint="0.811,0.2" StartPoint="0.246,1.023">
                        <GradientStop Color="#FF7C9FC8" Offset="0"/>
                        <GradientStop Color="#FF7C9FC8" Offset="1"/>
                        <GradientStop Color="#FF353535" Offset="0.491"/>
                    </LinearGradientBrush>
                </Border.BorderBrush>
                <Border BorderThickness="0"  CornerRadius="0" Margin="0" >
                    <Border.Background>
                        <RadialGradientBrush GradientOrigin="0.7,-0.6" RadiusY="0.5" RadiusX="1.001">
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <ScaleTransform CenterY="0.5" CenterX="0.5" ScaleY="1" ScaleX="1"/>
                                    <SkewTransform AngleY="0" AngleX="0" CenterY="0.5" CenterX="0.5"/>
                                    <RotateTransform Angle="-29.285" CenterY="0.5" CenterX="0.5"/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                            <GradientStop Color="#B6FFFFFF"/>
                            <GradientStop Color="#0BFFFFFF" Offset="0.578"/>
                        </RadialGradientBrush>
                    </Border.Background>
                </Border>
            </Border>
相关文章：