C# 具有特殊边界的内容控制

我想写一个

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>

我想把它用得有点像

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

是否可以以某种方式使用ContentControl的Content属性

有没有更简单的方法来实现这一点

---

有什么好主意吗

我认为您应该在这里使用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>

像这样使用你的控制

<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

依赖项属性。事实上，您甚至可以在不创建新控件类的情况下完成所有这些操作，只需使用base

ContentControl

并将新样式应用于使用以下模板的控件即可

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

---

我认为您应该在这里使用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>

像这样使用你的控制

<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

依赖项属性。事实上，您甚至可以在不创建新控件类的情况下完成所有这些操作，只需使用base

ContentControl

并将新样式应用于使用以下模板的控件即可

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

---

这似乎正是我想要的。我会试试的。我想就是这样。非常感谢你！只需要对我的图像做点什么；）这似乎正是我想要的。我会试试的。我想就是这样。非常感谢你！只需要对我的图像做点什么；）