Styling Image Box - wpf

Question

I want to make a custumized Image Control like MSN with Green light in border

Answer 1

You should use a ContentControl with a custom template. And set the content of the control to the image you want to display.
<ContentControl Template="{DynamicResource TheTemplate}"><Image/></ContentControl>
Then define the style somewhere in your resource dictionary.
<ControlTemplate TargetType="{x:Type ContentControl}">
<Grid>
<!-- Add some fancy borders and colors here -->
<ContentPresenter/>
</Grid>
</ControlTemplate>

Answer 2

I would recommend a UserControl, something like this:
<UserControl x:Class="Test.UserControls.BorderedImageControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d" DataContext="{Binding RelativeSource={RelativeSource Self}}">
<Border CornerRadius="{Binding CornerRadius}" Padding="{Binding BorderThickness}" BorderThickness="1">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE5E5E5" Offset="0"/>
<GradientStop Color="#FF15A315" Offset="1"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Border.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#FF67FF68" Offset="1"/>
<GradientStop Color="#FF75E476" Offset="0.496"/>
<GradientStop Color="#FF0FC611" Offset="0.509"/>
</LinearGradientBrush>
</Border.Background>
<Border.Child>
<Image Source="{Binding Source}"/>
</Border.Child>
</Border>
</UserControl>
namespace Test.UserControls
{
public partial class BorderedImageControl : UserControl
{
public static readonly DependencyProperty SourceProperty = Image.SourceProperty.AddOwner(typeof(BorderedImageControl));
public ImageSource Source
{
get { return (ImageSource)GetValue(SourceProperty); }
set { SetValue(SourceProperty, value); }
}
public static readonly DependencyProperty CornerRadiusProperty = Border.CornerRadiusProperty.AddOwner(typeof(BorderedImageControl));
public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, CornerRadius); }
}
public static readonly DependencyProperty BorderThicknessProperty =
DependencyProperty.Register("BorderThickness", typeof(Thickness), typeof(BorderedImageControl), new UIPropertyMetadata(new Thickness()));
public Thickness BorderThickness
{
get { return (Thickness)GetValue(BorderThicknessProperty); }
set { SetValue(BorderThicknessProperty, value); }
}
public BorderedImageControl()
{
InitializeComponent();
}
}
}
This is comparatively simple, if you want those custom curved shapes you probably need to work with paths instead of a border with corner radius.
Usage example:
<uc:BorderedImageControl Source="http://www.gravatar.com/avatar/c35af79e54306caedad37141f13de30c?s=32&d=identicon&r=PG"
CornerRadius="20" BorderThickness="10" MaxWidth="100" Margin="5"/>
Looks like this: