帶有特殊邊框的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