XAML 파일에서 여러 ControlTemplates를 사용하려면 어떻게해야합니까?

Question

WPF에서이 성가신 문제가 발생하여 머리를 쓸 수 없습니다. 내가 만들고자하는 것은 Photoshop과 같이 이동 가능한 도구 창을 사용하는 드로잉 프로그램 (학교 과제)의 매우 기본적인 구현입니다.

"Thumb"요소를 사용하여 간단한 끌기 기능을 구현할 수 있다는 것을 알아 냈습니다. Thumb 요소 자체가 표시되지 않고 컨테이너 (DockPanel)로 사용하는 객체에 DragDelta 속성이 없으므로 ControlTemplate을 만들어 Thumb에 첨부하기 때문에 드래그 가능한 색상을가집니다. 괜찮아요. 여태까지는 그런대로 잘됐다.

그러나 추가로 ControlTemplates를 만들고, 사용할 다른 Thumb 요소에 사용할 때 문제가 발생합니다 (오류가 발생합니다 : 속성 'VisualTree'가 두 번 이상 설정되었습니다.). 이것이 제가 도움을 청합니다. 내 전체 창을 붙여 넣었습니다. 여기에서 태그가 있습니다. 무슨 일이 일어나고 있는지 볼 수 있습니다.

<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>