带有特殊边框的ContentControl

Question

我想写一个ContentControl来托管其他控件并给它们一个特殊边框。

所以我加了一个新的UserControl，做了个ContentControl它。它有一个网格，在我想要边界的外侧。

所以第一个问题是：这是实现“有界”控制的好方法吗？

这里是XAML

<ContentControl x:Class="DemoApplication.Controls.ImpressedContentControl" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
       Name="ImpressedContent" 
       d:DesignHeight="300" 
       d:DesignWidth="300" 
       mc:Ignorable="d"> 
    <Grid> 
     <Grid.Resources> 
      <ImageBrush x:Key="ImpressedLeftBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_left.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
      <ImageBrush x:Key="ImpressedRightBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_right.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
      <ImageBrush x:Key="ImpressedTopBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_top.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
      <ImageBrush x:Key="ImpressedBottomBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_bottom.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
     </Grid.Resources> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="4" /> 
      <RowDefinition Height="1*" /> 
      <RowDefinition Height="4" /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="4" /> 
      <ColumnDefinition Width="1*" /> 
      <ColumnDefinition Width="4" /> 
     </Grid.ColumnDefinitions> 

     <Grid Grid.Row="0" 
       Grid.Column="1" 
       Background="{DynamicResource ImpressedTopBrush}" /> 
     <Grid Grid.Row="2" 
       Grid.Column="1" 
       Background="{DynamicResource ImpressedBottomBrush}" /> 
     <Grid Grid.Row="1" 
       Grid.Column="0" 
       Background="{DynamicResource ImpressedLeftBrush}" /> 
     <Grid Grid.Row="1" 
       Grid.Column="2" 
       Background="{DynamicResource ImpressedRightBrush}" /> 

     <ContentControl Grid.Row="1" 
        Grid.Column="1" 
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Content="{Binding ElementName=ImpressedContent, 
            Path=ControlContent}" /> 

    </Grid> 
</ContentControl> 

在代码隐藏我有一个DependencyProperty设置内容。

public partial class ImpressedContentControl : ContentControl 
    { 
     public ImpressedContentControl() 
     { 
      InitializeComponent(); 
     } 

     public Control ControlContent 
     { 
      get { return (Control)GetValue(ControlContentProperty); } 
      set { SetValue(ControlContentProperty, value); } 
     } 

     public static readonly DependencyProperty ControlContentProperty = 
      DependencyProperty.Register("ControlContent", typeof(Control), typeof(ImpressedContentControl), new UIPropertyMetadata("")); 
    } 

我想用它有点像

<controls:ImpressedContentControl Grid.Column="1"> 
      <ControlContent> 
       <TextBlock Text="FooBar Text" /> 
      </ControlContent> 
</controls:ImpressedContentControl> 

是否有可能使用ContentControl中莫名其妙的内容属性？

有没有更简单的方法来实现这一目标？

任何想法高度appeciated！

Answer 1

我相信你应该在这里使用WPF控件模板。给任何控件一个定义其视觉外观的模板是很容易的。 你的情况，你可以定义模板为您ImpressedContentControl这样

<ContentControl x:Class="DemoApplication.Controls.ImpressedContentControl" 
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
       Name="ImpressedContent" 
       d:DesignHeight="300" 
       d:DesignWidth="300" 
       mc:Ignorable="d"> 
     <!--define control template--> 
     <ContentControl.Template> 
     <ControlTemplate TargetType="{x:Type ContentControl}"> 
      <Grid> 
       <Grid.Resources> 
        <ImageBrush x:Key="ImpressedLeftBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_left.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
        <ImageBrush x:Key="ImpressedRightBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_right.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
        <ImageBrush x:Key="ImpressedTopBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_top.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
        <ImageBrush x:Key="ImpressedBottomBrush" 
         ImageSource="/DemoApplication;component/Images/Impressed_bottom.png" 
         TileMode="FlipY" 
         Viewport="0,0,100,100" 
         ViewportUnits="Absolute" /> 
       </Grid.Resources> 
       <Grid.RowDefinitions> 
        <RowDefinition Height="4" /> 
        <RowDefinition Height="1*" /> 
        <RowDefinition Height="4" /> 
       </Grid.RowDefinitions> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="4" /> 
        <ColumnDefinition Width="1*" /> 
        <ColumnDefinition Width="4" /> 
       </Grid.ColumnDefinitions> 

       <Grid Grid.Row="0" 
       Grid.Column="1" 
       Background="{DynamicResource ImpressedTopBrush}" /> 
       <Grid Grid.Row="2" 
       Grid.Column="1" 
       Background="{DynamicResource ImpressedBottomBrush}" /> 
       <Grid Grid.Row="1" 
       Grid.Column="0" 
       Background="{DynamicResource ImpressedLeftBrush}" /> 
       <Grid Grid.Row="1" 
       Grid.Column="2" 
       Background="{DynamicResource ImpressedRightBrush}" /> 

       <!--Use ContentPresenter to display inner content--> 
       <ContentPresenter Grid.Row="1" Grid.Column="1"></ContentPresenter> 

      </Grid> 
     </ControlTemplate> 
     </ContentControl.Template> 
    </ContentControl> 

和使用你的控制这样

<controls:ImpressedContentControl Grid.Column="1"> 
      <TextBlock Text="FooBar Text" /> 
</controls:ImpressedContentControl> 

没有必要为ImpressedContent依赖属性。事实上，如果不创建新的控制类，只需使用基地ContentControl并将新样式应用于使用下面的模板即可。

您可以在这里找到更多关于WPF控件模板

http://msdn.microsoft.com/en-us/library/ee230084.aspx

http://msdn.microsoft.com/en-us/magazine/cc163497.aspx