WPF中复用Label与输入控件组合的实现问题及解决诉求

首先咱们来拆解你遇到的问题根源：

1. ContentControl占满窗口：ContentControl默认的HorizontalAlignment和VerticalAlignment是Stretch，会自动填充父容器的所有空间，你需要显式设置对齐方式；
2. 内容显示异常：模板内的StackPanel没设置对齐规则，加上父容器拉伸导致布局错乱，才会出现内容不可见的情况；
3. 无法绑定输入控件：原来的模板里ComboBox是硬编码的，没有对外暴露绑定入口，没法在外部设置它的ItemsSource或SelectedItem。

下面给你两种实用的解决方案，按需选择：

方案一：自定义LabeledComboBox控件（推荐，最灵活） #

通过创建带依赖属性的自定义控件，完美解决复用和绑定问题，适合长期在项目中使用。

1. 编写自定义控件的后台代码 #

新建LabeledComboBox.cs文件，代码如下：

using System.Windows;
using System.Windows.Controls;

namespace YourProjectNamespace
{
    public class LabeledComboBox : ContentControl
    {
        // Label标题的依赖属性
        public static readonly DependencyProperty HeaderProperty =
            DependencyProperty.Register(nameof(Header), typeof(string), typeof(LabeledComboBox), new PropertyMetadata(string.Empty));

        // ComboBox选中项的依赖属性
        public static readonly DependencyProperty SelectedItemProperty =
            DependencyProperty.Register(nameof(SelectedItem), typeof(object), typeof(LabeledComboBox), new PropertyMetadata(null));

        // ComboBox数据源的依赖属性
        public static readonly DependencyProperty ItemsSourceProperty =
            DependencyProperty.Register(nameof(ItemsSource), typeof(System.Collections.IEnumerable), typeof(LabeledComboBox), new PropertyMetadata(null));

        public string Header
        {
            get => (string)GetValue(HeaderProperty);
            set => SetValue(HeaderProperty, value);
        }

        public object SelectedItem
        {
            get => GetValue(SelectedItemProperty);
            set => SetValue(SelectedItemProperty, value);
        }

        public System.Collections.IEnumerable ItemsSource
        {
            get => (System.Collections.IEnumerable)GetValue(ItemsSourceProperty);
            set => SetValue(ItemsSourceProperty, value);
        }

        static LabeledComboBox()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(LabeledComboBox), new FrameworkPropertyMetadata(typeof(LabeledComboBox)));
        }
    }
}

2. 定义控件的模板 #

在窗口资源（或Generic.xaml）中添加控件样式：

<Window.Resources>
    xmlns:local="clr-namespace:YourProjectNamespace"
    <Style TargetType="{x:Type local:LabeledComboBox}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:LabeledComboBox}">
                    <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
                        <Label Width="120" Height="25" 
                               Content="{TemplateBinding Header}"
                               HorizontalAlignment="Center" VerticalAlignment="Center"/>
                        <ComboBox Width="120" Height="25"
                                  Style="{StaticResource CustomComboBox}"
                                  ItemsSource="{TemplateBinding ItemsSource}"
                                  SelectedItem="{TemplateBinding SelectedItem}"/>
                    </StackPanel>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

3. 在窗口中使用 #

现在你可以像普通控件一样复用它，直接设置标题和绑定属性：

<Grid>
    <local:LabeledComboBox Header="My Header"
                           ItemsSource="{Binding YourItemCollection}"
                           SelectedItem="{Binding YourSelectedItem}"/>
</Grid>

方案二：快速复用的ContentControl+DataTemplate（无需后台代码） #

如果不想写自定义控件，可以用这种方式快速实现复用，适合临时场景：

<Window.Resources>
    <DataTemplate x:Key="QuickLabeledComboTemplate">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center">
            <Label Width="120" Height="25" 
                   Content="{Binding Header}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <ComboBox Width="120" Height="25"
                      Style="{StaticResource CustomComboBox}"
                      ItemsSource="{Binding Items}"
                      SelectedItem="{Binding Selected}"/>
        </StackPanel>
    </DataTemplate>
</Window.Resources>

<Grid>
    <ContentControl HorizontalAlignment="Center" VerticalAlignment="Center"
                    ContentTemplate="{StaticResource QuickLabeledComboTemplate}">
        <ContentControl.Content>
            <!-- 绑定你的ViewModel属性 -->
            <local:YourViewModel 
                Header="My Header"
                Items="{Binding YourItems}"
                Selected="{Binding YourSelection}"/>
            <!-- 也可以用匿名对象，但注意匿名类型属性只读，绑定仅支持OneWay -->
            <!-- <x:Tuple xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     Item1="My Header"
                     Item2="{Binding YourItems}"
                     Item3="{Binding YourSelection}"/> -->
        </ContentControl.Content>
    </ContentControl>
</Grid>

临时修复你原来的代码 #

如果只是想临时让原来的模板正常工作，可以这样修改：

<Window.Resources>
    <ControlTemplate x:Key="ComboWithHeader" TargetType="ContentControl">
        <StackPanel Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Label Width="120" Height="25" 
                   Content="{TemplateBinding Content}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
            <ComboBox Width="120" Height="25"
                      Style="{StaticResource CustomComboBox}"
                      SelectedItem="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"/>
        </StackPanel>
    </ControlTemplate>
</Window.Resources>

<Grid>
    <ContentControl Content="My Header"
                    Template="{StaticResource ComboWithHeader}"
                    HorizontalAlignment="Center" VerticalAlignment="Center"
                    Tag="{Binding YourSelectedItem}"/>
</Grid>

这种方式用Tag传递绑定不够优雅，仅适合临时应急。

内容的提问来源于stack exchange，提问作者Halil Ibrahim Özcan