Question

Is it possible to create a glassy display of an image like the thumbnails that are contained in this example (for example the thumbnail with the image of Gordon Ramsay has a nice blue glass effect for the image that i want to recreate)?

Would you knoe how I should go about tackling it? DropShadowBitmapEffect and

<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>
Was it helpful?

Solution

It looks like the Brush of the Border is a light blue/grey SolidColorBrush, maybe with a Background of the same colour. I think that the 'glass' or 'fading edges' effect is done with a OpacityMask on the Image.

You can find out more about using an OpacityMask from the Opacity Masks Overview page at MSDN.

OTHER TIPS

This is how I ended up coding it thanks to your recommendations (the imageSource for the background image is set in C# programmatically and works):

<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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top