WPF：实现可缩放的自定义控件

Question

我正在使用ColorPicker控件，并决定最好将其组成原始控件，以便能够重新排列控件模板中的各种滑块和色轮，而无需重新定义所有内容。 （也控制代码将变得相当凌乱）

我已经创建了一个新的模板Slider控制，我希望它是可扩展的。目前，拇指的大小是固定的，中心“轨道”也是如此。使控制可扩展

<Style x:Key="ColorSlider" TargetType="{x:Type Slider}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
        <Grid> 
         <Rectangle Grid.Column="1" Width="80" Height="480" VerticalAlignment="Center" HorizontalAlignment="Center"> 
          <Rectangle.Fill> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > 
            <GradientStop Color="White" Offset="0.0"/> 
            <GradientStop Color="Black" Offset="1.0"/> 
           </LinearGradientBrush> 
          </Rectangle.Fill> 
         </Rectangle> 

         <Track x:Name="PART_Track"> 
          <Track.Thumb> 
           <Thumb x:Name="ValueThumb"> 
            <Thumb.Style> 
             <Style TargetType="Thumb"> 
              <Setter Property="Template"> 
               <Setter.Value> 
                <ControlTemplate> 
                 <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
                  <Rectangle Width="100" Height="20" Fill="Transparent"/> 
                  <Polygon Points="0,0 0,20 10,10" Fill="Black" /> 
                  <Polygon Points="100,0 100,20 90,10" Fill="Black" /> 
                 </Canvas> 
                </ControlTemplate> 
               </Setter.Value> 
              </Setter> 
             </Style> 
            </Thumb.Style> 
           </Thumb> 
          </Track.Thumb> 
         </Track> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

一种方法是使用一个Grid然而这却会导致混乱，以及因为拇指必须超过3列延伸，那么这将是很难得到拇指的权利比例。

是否有任何使控件可扩展的最佳实践？例如，Viewbox只会放大结果并可能降低视觉质量。有没有其他方法可以使用？

更新1：为了解决意见：这里是使用网格的例子：

<Style x:Key="ColorSlider" TargetType="{x:Type Slider}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Slider}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}"> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="Auto" MinHeight="5" /> 
          <RowDefinition Height="*" /> 
          <RowDefinition Height="Auto" MinHeight="5" /> 
         </Grid.RowDefinitions> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="Auto" MinWidth="10" /> 
          <ColumnDefinition Width="*" /> 
          <ColumnDefinition Width="Auto" MinWidth="10" /> 
         </Grid.ColumnDefinitions> 

         <Rectangle Grid.Column="1" Grid.Row="1"> 
          <Rectangle.Fill> 
           <LinearGradientBrush StartPoint="0,0" EndPoint="0,1" > 
            <GradientStop Color="White" Offset="0.0"/> 
            <GradientStop Color="Black" Offset="1.0"/> 
           </LinearGradientBrush> 
          </Rectangle.Fill> 
         </Rectangle> 

         <Track x:Name="PART_Track" Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="0" Grid.RowSpan="2"> 
          <Track.Thumb> 
           <Thumb x:Name="ValueThumb"> 
            <Thumb.Style> 
             <Style TargetType="Thumb"> 
              <Setter Property="Template"> 
               <Setter.Value> 
                <ControlTemplate> 
                 <Canvas Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
                  <Rectangle Height="20" Fill="Transparent"/> 
                  <Polygon Points="0,0 0,20 10,10" Fill="Black" /> 
                  <Polygon Points="100,0 100,20 90,10" Fill="Black" /> 
                 </Canvas> 
                </ControlTemplate> 
               </Setter.Value> 
              </Setter> 
             </Style> 
            </Thumb.Style> 
           </Thumb> 
          </Track.Thumb> 
         </Track> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

然而，这仍然无法扩展拇指三角形还有一个视觉问题，对此我不知道它如何才能在XAML中解决。也就是说，拇指延伸到酒吧底部。

更新2：为了使问题更具体，希望少“的意见为主”，这个问题可以重新到：

没有一个有提供了哪些选项，使一个组成控制上面的各个部分和示例尤其可扩展。

Answer 1

最简单的方法将是一个viewbox。

http://wpftutorial.net/ViewBox.html