0

我想写一个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 的 Content 属性？

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

任何想法都非常受欢迎！

4

1 回答 1

4

我相信你应该在这里使用 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

于 2013-05-18T11:14:53.547 回答