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