WPF XAML - 图像的玻璃效果

时间:2013-08-20 12:11:08

标签: c# wpf xaml transparency effect

是否可以像this example中包含的缩略图一样创建图像的玻璃显示(例如,带有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>

2 个答案:

答案 0 :(得分:2)

看起来Brush的{​​{1}}是浅蓝/灰色Border,可能是SolidColorBrush相同的颜色。我认为'{1}}上的Background可以完成“玻璃”或“渐弱边缘”效果。

您可以在MSDN的Opacity Masks Overview页面上找到有关使用OpacityMask的详情。

答案 1 :(得分:0)

由于您的建议,我最终编码它的方式(背景图像的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>