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的Content属性？

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

任何想法都很高兴！

Answer 1

我相信你应该在这里使用WPF控件模板。给任何控件提供定义其视觉外观的模板非常容易。在您的情况下，您可以为此{/ 1}}定义模板

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并将新样式应用于使用以下模板的新样式。

您可以在此处找到有关WPF控件模板的更多信息

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

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

具有特殊边框的ContentControl

1 个答案: