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 каким-то образом?

Есть ли более простой способ достичь этого?

Любые идеи, которые могут быть очень полезными!

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> 

Там нет необходимости для Dependency собственности ImpressedContent. Фактически вы могли бы сделать все это, даже не создав новый класс управления, просто используя только базу ContentControl и применяя к ней новый стиль, который использует шаблон ниже.

Вы можете найти здесь больше о шаблонах управления WPF

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

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