如何用Control Template重构WPF中X/Y控制的重复XAML代码？

针对你提供的XAML代码，X/Y Control结构完全一致仅绑定属性不同的情况，用ControlTemplate重构的核心思路是把重复的UI结构抽象为模板，将变化的部分抽象为控件属性，具体操作如下：

1. 创建自定义控件（抽象变化属性） #

首先创建一个简单的自定义控件，封装所有需要动态绑定的属性，这样模板可以统一引用这些属性：

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

public class RangeControl : ContentControl
{
    // 标题文本
    public static readonly DependencyProperty HeaderTextProperty =
        DependencyProperty.Register(nameof(HeaderText), typeof(string), typeof(RangeControl));

    // 控制显示隐藏的属性
    public static readonly DependencyProperty RangeControlVisibilityProperty =
        DependencyProperty.Register(nameof(RangeControlVisibility), typeof(bool), typeof(RangeControl));

    // 最小值绑定属性
    public static readonly DependencyProperty RangeMinimumProperty =
        DependencyProperty.Register(nameof(RangeMinimum), typeof(double), typeof(RangeControl));

    // 最大值绑定属性
    public static readonly DependencyProperty RangeMaximumProperty =
        DependencyProperty.Register(nameof(RangeMaximum), typeof(double), typeof(RangeControl));

    // 绝对最小值
    public static readonly DependencyProperty AbsoluteMinimumProperty =
        DependencyProperty.Register(nameof(AbsoluteMinimum), typeof(double), typeof(RangeControl));

    // 绝对最大值
    public static readonly DependencyProperty AbsoluteMaximumProperty =
        DependencyProperty.Register(nameof(AbsoluteMaximum), typeof(double), typeof(RangeControl));

    public string HeaderText
    {
        get => (string)GetValue(HeaderTextProperty);
        set => SetValue(HeaderTextProperty, value);
    }

    public bool RangeControlVisibility
    {
        get => (bool)GetValue(RangeControlVisibilityProperty);
        set => SetValue(RangeControlVisibilityProperty, value);
    }

    public double RangeMinimum
    {
        get => (double)GetValue(RangeMinimumProperty);
        set => SetValue(RangeMinimumProperty, value);
    }

    public double RangeMaximum
    {
        get => (double)GetValue(RangeMaximumProperty);
        set => SetValue(RangeMaximumProperty, value);
    }

    public double AbsoluteMinimum
    {
        get => (double)GetValue(AbsoluteMinimumProperty);
        set => SetValue(AbsoluteMinimumProperty, value);
    }

    public double AbsoluteMaximum
    {
        get => (double)GetValue(AbsoluteMaximumProperty);
        set => SetValue(AbsoluteMaximumProperty, value);
    }
}

2. 定义ControlTemplate（复用UI结构） #

在XAML资源中定义ControlTemplate，把原来重复的GroupBox内部结构写入模板，所有绑定都指向自定义控件的依赖属性：

<Grid>
    <Grid.Resources>
        <sfChart:RangeControlVisibilityConverter x:Key="RangeControlVisibilityConverter" />
        
        <!-- 可复用的RangeControl模板 -->
        <ControlTemplate x:Key="RangeControlTemplate" TargetType="local:RangeControl">
            <GroupBox Header="{TemplateBinding HeaderText}">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>

                    <Label Grid.Row="0" Grid.Column="0" Content="Minimum" 
                           Visibility="{Binding RangeControlVisibility, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RangeControlVisibilityConverter}}"/>
                    <syncfusion:DoubleTextBox Grid.Row="0" Grid.Column="1" 
                                             Value="{Binding RangeMinimum, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                             Visibility="{Binding RangeControlVisibility, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RangeControlVisibilityConverter}}"
                                             MinValue="{Binding AbsoluteMinimum, RelativeSource={RelativeSource TemplatedParent}}"
                                             MaxValue="{Binding AbsoluteMaximum, RelativeSource={RelativeSource TemplatedParent}}"/>
                    <Label Grid.Row="1" Grid.Column="0" Content="Maximum" 
                           Visibility="{Binding RangeControlVisibility, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RangeControlVisibilityConverter}}"/>
                    <syncfusion:DoubleTextBox Grid.Row="1" Grid.Column="1" 
                                             Value="{Binding RangeMaximum, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
                                             Visibility="{Binding RangeControlVisibility, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource RangeControlVisibilityConverter}}"
                                             MinValue="{Binding AbsoluteMinimum, RelativeSource={RelativeSource TemplatedParent}}"
                                             MaxValue="{Binding AbsoluteMaximum, RelativeSource={RelativeSource TemplatedParent}}"/>
                </Grid>
            </GroupBox>
        </ControlTemplate>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!-- X Control 实例 -->
    <local:RangeControl Grid.Row="0"
                        Template="{StaticResource RangeControlTemplate}"
                        HeaderText="X Control"
                        RangeControlVisibility="{Binding XRangeControl}"
                        RangeMinimum="{Binding XRangeMinimum}"
                        RangeMaximum="{Binding XRangeMaximum}"
                        AbsoluteMinimum="{Binding XAbsoluteMin}"
                        AbsoluteMaximum="{Binding XAbsoluteMax}"/>

    <!-- Y Control 实例 -->
    <local:RangeControl Grid.Row="1"
                        Template="{StaticResource RangeControlTemplate}"
                        HeaderText="Y Control"
                        RangeControlVisibility="{Binding YRangeControl}"
                        RangeMinimum="{Binding YRangeMinimum}"
                        RangeMaximum="{Binding YRangeMaximum}"
                        AbsoluteMinimum="{Binding YAbsoluteMin}"
                        AbsoluteMaximum="{Binding YAbsoluteMax}"/>
</Grid>

3. 关键说明 #

• 模板中使用RelativeSource={RelativeSource TemplatedParent}绑定自定义控件的属性，确保双向绑定（如Value）正常工作（TemplateBinding是单向绑定，不适合需要双向同步的场景）。
• 原代码中Y Control的第一个DoubleTextBox错误绑定了XRangeMinimum，重构时已修正为YRangeMinimum。
• 自定义控件的方式让代码结构更清晰，后续如果需要添加Z Control等，只需新增一个RangeControl实例并设置对应属性即可，无需重复编写UI结构。

内容的提问来源于stack exchange，提问作者Graviton