造型图像框

Question

我想要像MSN一custumized图像控制与绿色光边境

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 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"/> 

看起来像这样：