WPF: Внедрение масштабируемых пользовательских элементов управления

Question

Я работаю над ColorPicker Control и решил, что было бы лучше собрать его из примитивных элементов управления, чтобы иметь возможность переставлять различные слайдеры и цветовое колесо в шаблоне управления без необходимости переопределять все , (Также код Controls станет довольно грязным)

Я создал новый шаблон для управления и хочу, чтобы он был масштабируемым. На данный момент размер большого пальца фиксирован, как и центр «Трек».

<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 колонки, и тогда было бы трудно получить пропорции большого пальца вправо.

Есть ли какие-либо рекомендации по управлению масштабируемым? Например, окно «Просмотр» только увеличило бы результат и, возможно, снизило бы визуальное качество. Существуют ли другие методы, которые можно использовать?

UPDATE 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. То есть, большой палец выдвигается над штангой на дно.

UPDATE 2: Для того, чтобы вопрос более конкретно и, надеюсь, менее «мнение, основанное», вопрос можно переформулировать:

Какие возможности один располагаете сделать контроль, состоящий из различные части и пример выше, в частности, масштабируемые.

Answer 1

Самый простой способ - это viewbox.

http://wpftutorial.net/ViewBox.html