创建自定义控件的正确方法是什么

Question

编辑（如评论：XY-Problem） - 问题：

我想创建自己的控件，该控件具有预定义的样式和特殊元素（按钮、...）的位置，但总的来说，所有内容都应该能够放置在我的自定义控件中。在我的例子中，自定义控件只是一个“菜单栏”，它应该能够在“GUI 代码”中的任何地方使用——但不需要它必须在那里。但是 当 使用它时，它应该在任何地方都是相同的样式和行为。一种样式 - 我认为 - 还不够，因为此菜单栏中还有预定义的元素（例如，帮助已经在菜单栏中）

编辑结束。

我想在 WPF 中构建一个自定义控件（只是一个特殊的堆栈面板），具有以下要求： 可用作 xaml 中的任何其他控件 已为自定义控件中的控件定义样式

首先，我只是尝试创建一个 UserControl，其中包含一个具有已定义样式（在 xaml 中）的堆栈面板，用于包含元素（例如 Button）。此 UserControl 包含

<ContentPresenter />

在 xaml 中。使用此方法无法命名包含的元素。例如：

<mynamespace:MyStackPanel>
  <Button Name="w00t">This does not work!</Button>
</mynamespace:MyStackPanel>

接下来的尝试是创建一个“真正的”自定义控件。这个自定义控件只是一个没有 xaml 的类。代码非常简单。类继承自 UserControl，只包含：

StackPanel sp = new StackPanel();
sp.Children.Add(new ContentPresenter());
this.AddChild(sp);

Woooohoooo，现在可以命名包含的元素了。但仍然是一个大问题：如何定义样式？

我可以在 ResourceDictionary 中为我自己的自定义控件定义样式。但我必须将 ResourceDictionary 添加到全局（App.xaml）资源中。然后我可以只为我的自定义控件定义样式 - 而不是包含元素？ - 但无论如何……这样做感觉不对！

所以主要问题是：创建可以像任何其他控件一样在 xaml 中使用的自定义控件的“正确”方法是什么？如果第二种方法是正确的方法 - 怎么可能像我在 xaml 中那样设置样式（例如，这个元素中的每个 Button 都有一个特殊的样式）并让它成为一个“全局”ResourceDictionary？

它是如何在第三方产品中实现的？

Answer 1

好的，我给你举个例子，涉及Custom Controls（与UserControls相反）

第 1 步：

创建一个派生自 ContentControl 的新类（仅代码，无 XAML）（或具有与您需要的行为相似的任何 UI 元素）

    public class ReusableContainer : ContentControl
    {
        public static readonly DependencyProperty ButtonProperty = DependencyProperty.Register("Button", typeof(Button), typeof(ReusableContainer), new PropertyMetadata(default(Button)));

        public Button Button
        {
            get { return (Button)GetValue(ButtonProperty); }
            set { SetValue(ButtonProperty, value); }
        }
    }

在此处查看我如何将 Button 属性定义为 DependencyProperty。您可以为自定义控件中所需的任何“内容占位符”添加更多 DP。

第 2 步：

将容器内 UI 元素的预定义样式放在单独的 ResourceDictionary 中：

CustomStyles.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="Button">
        <Setter Property="Background" Value="Green"/>
    </Style>
</ResourceDictionary>

第 3 步： 在 app.xaml 中，为 ReusableContainer 定义一个应用程序范围的样式，它定义了它的模板：

<Application x:Class="WpfApplication14.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:WpfApplication14"
             StartupUri="MainWindow.xaml">
    <Application.Resources>

        <Style TargetType="{x:Type local:ReusableContainer}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type local:ReusableContainer}">
                        <ControlTemplate.Resources>
                            <ResourceDictionary Source="CustomStyles.xaml"/>
                        </ControlTemplate.Resources>

                        <ContentPresenter Content="{TemplateBinding Button}"/>

                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

看看我如何使用TemplateBinding 表达式来定义ContentPresenter 的内容将由ReusableContainer 中的Button 属性定义。

还要注意我如何将CustomStyles.xaml 中的资源添加到ControlTemplate.Resources 集合中。这使得模板内的所有 UI 元素都可以使用这些资源。

第 4 步：

将你的 ReusableContainer 放在一个窗口中：

<Window x:Class="WpfApplication14.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication14"
        Title="MainWindow" Height="350" Width="525">
    <StackPanel>
        <local:ReusableContainer>
            <local:ReusableContainer.Button>
                <Button x:Name="Button1" Content="Hello! Button 1"/>
            </local:ReusableContainer.Button>
        </local:ReusableContainer>

        <local:ReusableContainer>
            <local:ReusableContainer.Button>
                <Button x:Name="Button2" Content="Hello! Button 2"/>
            </local:ReusableContainer.Button>
        </local:ReusableContainer>

        <local:ReusableContainer>
            <local:ReusableContainer.Button>
                <Button x:Name="Button3" Content="Hello! Button 3"/>
            </local:ReusableContainer.Button>
        </local:ReusableContainer>
    </StackPanel>
</Window>