将两个UserControl合并为一个有两个状态的正确方法是什么？

Question

我在互联网和StackOverflow上搜索了一下。为什么我需要这个：我有两个UserControls叫做PlusButton和MinusButton，它们都有常见的XAML和常见的代码隐藏。我想使用一个通用的基类，理想情况下也会有XAML和代码隐藏。

我已经看到了here发布的答案，但我对XAML没有足够的经验来应用该解决方案。我很高兴有一个官方文档页面的链接，了解我需要做什么。我习惯于代码隐藏，因为我也使用WinForms所以我不介意我是否必须执行代码隐藏。

我比XAML更容易理解代码隐藏，所以我有很多代码隐藏，可能在XAML中做得更好。

如果我使用here发布的解决方案，我会遇到编译错误：

cs_wpf_test_1.ArrowButton不能是XAML文件的根，因为它是使用XAML定义的。第1行位置20。

警告CS0108 PlusButton.InitializeComponent()隐藏继承成员ArrowButton.InitializeComponent()。如果要隐藏，请使用new关键字。

我得到上面列出的两个编译器错误，我不知道这些错误最正确的解决方法是什么。我希望它易于维护。

在我遇到编译器错误之前，下面的代码是我的代码的一个版本。

PlusButton.xaml

<UserControl x:Class="cs_wpf_test_1.PlusButton"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:cs_wpf_test_1"
             mc:Ignorable="d" 
             d:DesignHeight="120" d:DesignWidth="175"
             Loaded="UserControl_Loaded">
    <Button Name="MyButton" Focusable="False" Padding="0,0,0,0">
        <Button.Template>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}"
                         BorderBrush="{TemplateBinding BorderBrush}"
                         BorderThickness="{TemplateBinding BorderThickness}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates" CurrentStateChanged="CommonStates_CurrentStateChanged">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
                Name="MyCanvas">
                            <Polyline Stroke="Blue" Name="MyPolyline">
                                <Polyline.Points>
                                    <PointCollection>
                                        <Point X="5" Y="95" />
                                        <Point X="95" Y="95" />
                                        <Point X="50" Y="5" />
                                        <Point X="5" Y="95" />
                                    </PointCollection>
                                </Polyline.Points>
                            </Polyline>
                        </Canvas>
                        <Canvas HorizontalAlignment="Center" VerticalAlignment="Center"
                                Width="100" Height="100" Name="MySecondCanvas">
                            <Line Stroke="Black" X1="50" Y1="10"
                                  X2="50" Y2="90"
                  Name="MySignLine1" StrokeThickness="4"/>
                            <Line Stroke="Black" X1="10" Y1="50"
                                  X2="90" Y2="50"
                  Name="MySignLine2" StrokeThickness="4"/>
                        </Canvas>
                    </Grid>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</UserControl>

PlusButton.xaml.cs

public partial class PlusButton : UserControl
{
    internal Polyline MyTemplatePolyline;
    internal Line MyTemplateSignLine1, MyTemplateSignLine2;
    internal Canvas MyTemplateCanvas,
        MyTemplateSecondCanvas;

    public PlusButton()
    {
        InitializeComponent();

        MyButton.Margin = new Thickness(
            -MyButton.BorderThickness.Left,
            -MyButton.BorderThickness.Top,
            -MyButton.BorderThickness.Right,
            -MyButton.BorderThickness.Bottom);
    }

    internal void SetPseudofocused(bool p)
    {
        if (p)
        {
            BorderBrush = Brushes.Blue;
        }
        else
        {
            BorderBrush = Brushes.Transparent;
        }
    }

    private void UserControl_Loaded(object sender, RoutedEventArgs e)
    {
        MyButton.ApplyTemplate();

        MyTemplatePolyline = (Polyline)MyButton.Template.FindName("MyPolyline", MyButton);
        MyTemplateSignLine1 = (Line)MyButton.Template.FindName("MySignLine1", MyButton);
        MyTemplateSignLine2 = (Line)MyButton.Template.FindName("MySignLine2", MyButton);
        MyTemplateCanvas = (Canvas)MyButton.Template.FindName("MyCanvas", MyButton);
        MyTemplateSecondCanvas = (Canvas)MyButton.Template.FindName("MySecondCanvas", MyButton);

        UpdateMyLayout();
    }

    private void CommonStates_CurrentStateChanged(object sender, VisualStateChangedEventArgs e)
    {
        var btn = e.Control as Button;

        if (e.NewState.Name == "MouseOver")
        {
            btn.Background = Brushes.White;
        }
        else if (e.NewState.Name == "Pressed")
        {
            btn.Background = Brushes.LightBlue;
        }
        else if (e.NewState.Name == "Disabled")
        {
            btn.Background = Brushes.Gray;
        }
        else
        {
            btn.Background = (Brush)MyButton.FindResource(SystemColors.ControlBrushKey);
        }
    }

    protected override void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
    {
        base.OnPropertyChanged(e);

        if (e.Property == WidthProperty || e.Property == HeightProperty || e.Property == BorderThicknessProperty)
        {
            UpdateMyLayout();
        }
    }

    internal void UpdateMyLayout()
    {
        if (MyTemplateCanvas == null)
        {
            return;
        }

        MyTemplateCanvas.Height = Height;
        MyTemplateCanvas.Width = Width;

        double h = ActualHeight - BorderThickness.Top -
            BorderThickness.Bottom;
        double w = ActualWidth - BorderThickness.Left -
            BorderThickness.Right;

        MyTemplatePolyline.Points.Clear();
        MyTemplatePolyline.Points.Add(new Point(5, h - 5));
        MyTemplatePolyline.Points.Add(new Point(w - 5, h - 5));
        MyTemplatePolyline.Points.Add(new Point(w / 2, 5));
        MyTemplatePolyline.Points.Add(new Point(5, h - 5));

        h = MyTemplateSecondCanvas.ActualHeight;
        w = MyTemplateSecondCanvas.ActualWidth;

        double ltrbPadding = h / 3;

        double l1 = h - 2 * ltrbPadding;
        double l2 = w - 2 * ltrbPadding;

        double l = Math.Min(l1, l2);

        // draw a cross with two lines:
        MyTemplateSignLine1.X1 = l / 2d + ltrbPadding;
        MyTemplateSignLine1.X2 = l / 2d + ltrbPadding;
        MyTemplateSignLine1.Y1 = ltrbPadding;
        MyTemplateSignLine1.Y2 = l + ltrbPadding;

        MyTemplateSignLine2.X1 = ltrbPadding;
        MyTemplateSignLine2.X2 = l + ltrbPadding;
        MyTemplateSignLine2.Y1 = ltrbPadding + l / 2d;
        MyTemplateSignLine2.Y2 = ltrbPadding + l / 2d;

        // update focus border size:
        double v = ActualHeight / 25d;
        BorderThickness = new Thickness(v, v, v, v);
    }
}

MinusButton.xaml

与第一个XAML文件相同，但MySecondCanvas的XAML只包含一个Line。

MinusButton.xaml.cs

与第一个.cs文件相同，但是：

它不会创建或使用MyTemplateSignLine1和MyTemplateSignLine2，它只使用MyTemplateSignLine。
MyTemplatePolyline包含其他看起来像向下箭头的点（第一个箭头，倒置）。
MyTemplateSignLine就像来自其他XAML文件和代码隐藏的MyTemplateSignLine2。

Answer 1

另一答案