造型图像框

Question

我想制作一个像MSN一样的静态图像控件，边框为绿灯

Answer 1

您应该将 ContentControl 与自定义模板一起使用。并将控件的内容设置为您要显示的图像。

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

然后在资源字典中的某处定义样式。

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

Answer 2

我会推荐一个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"/>

看起来像这样：