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

Question

我有一个恼人的问题，WPF，我不能得到我的头。我正在尝试创建的是一个绘图程序(这是一个学校作业)的一个非常基本的实现，它具有可移动的工具窗口，就像在Photoshop中一样。

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

但是，当我想创建额外的ControlTemplates，用于我计划使用的其他Thumb元素时，问题就出现了(我得到错误:属性'VisualTree‘被多次设置。)这就是我需要帮助的地方。我已经在这里粘贴了我的整个Window.Resources-tag，这样你就可以看到发生了什么。

<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只能包含一个子级。尝试将其更改为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>