Стиль изображения Box

Question

Я хочу сделать Custumized Image Control, как MSN с зеленым светом в рамке

Answer 1

Я бы порекомендовал UserControl, примерно так:

<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();
        }
    }
}

Это сравнительно просто, если вам нужны эти пользовательские изогнутые формы, вам, вероятно, нужно работать с контурами, а не с границей с радиусом угла.

Пример использования:

<uc:BorderedImageControl Source="http://www.gravatar.com/avatar/c35af79e54306caedad37141f13de30c?s=32&amp;d=identicon&amp;r=PG"
                                         CornerRadius="20" BorderThickness="10" MaxWidth="100" Margin="5"/>

выглядит так:

Answer 2

Вы должны использовать ContentControl с пользовательским шаблоном. И установите содержимое элемента управления на изображение, которое вы хотите отобразить.

<ContentControl Template="{DynamicResource TheTemplate}"><Image/></ContentControl>

Затем определите стиль где-нибудь в вашем словаре ресурсов.

<ControlTemplate TargetType="{x:Type ContentControl}">
    <Grid>
        <!-- Add some fancy borders and colors here  --> 
        <ContentPresenter/>
    </Grid>
</ControlTemplate>