c# - 如何在一个 XAML 文件中使用多个 ControlTemplates？

Question

我在使用 WPF 时遇到了这个恼人的问题，我无法解决这个问题。我正在尝试创建的是一个非常基本的绘图程序实现(这是一项学校作业)，带有可移动的工具窗口，例如在 Photoshop 中。

我已经设法弄清楚我可以使用这个元素“Thumb”来实现简单的拖动功能。由于 Thumb 元素本身不可见，并且我用作容器的对象(DockPanel)没有 DragDelta 属性，我只是创建了一个 ControlTemplate 并将其附加到 Thumb，所以现在我有一个可拖动的颜色工作正常的选择器。到目前为止一切顺利。

但是，当我想创建额外的 ControlTemplates 以用于我计划使用的其他 Thumb 元素时，问题就出现了(我得到错误:属性“VisualTree”被设置了不止一次。)。这就是我需要帮助的。我已将我的整个 Window.Resources 标签粘贴到此处，这样您就可以看到发生了什么。

<Window.Resources>          
        <Style x:Key="toolBoxBtn" TargetType="Button">
            <Setter Property="Width" Value="60" />
            <Setter Property="Height" Value="60" />
            <Setter Property="Margin" Value="5" />
            <Setter Property="DockPanel.Dock" Value="Top" />
        </Style>

        <Style x:Key="style1" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">

                        <DockPanel Background="#e6e6e6" HorizontalAlignment="Left" Margin="0" Height="auto" Width="auto" Canvas.Left="640" Canvas.Top="8">
                            <Label VerticalAlignment="Top" DockPanel.Dock="Top" Background="#282828" Foreground="white" Content="Colors" HorizontalAlignment="Stretch" Width="auto" Height="auto" />

                            <StackPanel>
                                <StackPanel Orientation="Horizontal" Margin="7" VerticalAlignment="Center">
                                    <Rectangle DockPanel.Dock="top" Name="red" Fill="Red" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
                                    <Rectangle DockPanel.Dock="top" Name="blue" Fill="Blue" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
                                    <Rectangle DockPanel.Dock="top" Name="green" Fill="GreenYellow" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>

                                    <Rectangle DockPanel.Dock="top" Name="customColorSlot1" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor" />
                                    <Rectangle DockPanel.Dock="top" Name="customColorSlot2" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
                                    <Rectangle DockPanel.Dock="top" Name="customColorSlot3" Fill="White" Height="20" Width="20" Stroke="Black" MouseDown="getColor"/>
                                </StackPanel>
                                <GroupBox Header="Selected Color">
                                    <Rectangle Name="currentColor" Fill="White" Height="40" Width="40" Stroke="Black" MouseDown="test"/>
                                </GroupBox>
                            </StackPanel>
                        </DockPanel>

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

        <Style x:Key="fillTool" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
                        <Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
                        <Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
                        <Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
                        <Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Window.Resources>

这可能是什么问题？

Answer 1

ControlTemplate 只能包含一个 child 。尝试将其更改为 Canvas

        <Style x:Key="fillTool" TargetType="{x:Type Thumb}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Canvas>
                           <Ellipse HorizontalAlignment="Left" Height="19" Margin="310,330,0,0" VerticalAlignment="Top" Width="19" Fill="Blue"/>
                           <Ellipse HorizontalAlignment="Left" Height="12" Margin="317,316,0,0" VerticalAlignment="Top" Width="12" Fill="Blue"/>
                           <Ellipse HorizontalAlignment="Left" Height="8" Margin="307,320,0,0" VerticalAlignment="Top" Width="7" Fill="Blue"/>
                           <Ellipse HorizontalAlignment="Left" Height="3" Margin="317,302,0,0" VerticalAlignment="Top" Width="3" Fill="Blue"/>
                           <Ellipse HorizontalAlignment="Left" Height="5" Margin="311,310,0,0" VerticalAlignment="Top" Width="5" Fill="Blue"/>
                        </Canvas>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>