WPF変数の要素数

Question

私は独自のスライダテンプレートとスタイルを作成しています。基本的なスライダに似ていますが、トラックバーには適切な間隔で円（楕円）が含まれています。バーの円の数は、スライダの親指が正確に停止するようにする必要があります。

簡単な近似では、コントロール内にSlider.Maximum - Slider.Minimum/StepSize楕円が存在する必要があります。しかし、私の知る限りでは、xamlから何かの可変数を指定する方法はありません。

これは、要約すると、私が達成したいと思い何を表すコード：

は

<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}"> 
     <Grid Height="4"> 
      <Border x:Name="TrackBackground"> 
       <Rectangle x:Name="PART_SelectionRange" Fill="{StaticResource SliderThumb.Track.BackgroundSelected}" 
          HorizontalAlignment="Left" Margin="0 0 16 0" Visibility="Hidden"/> 
      </Border> 
      <Grid> 
       <!-- Have a variable ammount of column definitions and ellipses --> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition Width="4"/> 
        <ColumnDefinition Width="*"/> 
        ... 
        <ColumnDefinition Width="*"/> 
        <ColumnDefinition Width="4"/> 
       </Grid.ColumnDefinitions> 
       <Ellipse Grid.Column="0" Fill="White"/> 
       ... 
       <Ellipse Grid.Column="X" Fill="White"/> 
      </Grid> 
      <Track x:Name="PART_Track"> 
       <Track.Thumb> 
        ... 
       </Track.Thumb> 
      </Track> 
     </Grid> 
     <ControlTemplate.Triggers> 
      ... 
     </ControlTemplate.Triggers> 
    </ControlTemplate> 

私のコードは、これまでのところ、それはdoesnのとき、私は非常に悪いに見える楕円の固定ammountを、使用することができますスライダで表される値と一致しません。

私はWPFの新機能なので、コードビハインドからこれを行うのはどういうことか分かりません。スライダーを継承したクラスを作成し、そこに楕円を追加することはできますか？もしそうなら、私はそれを行う簡単な例を得ることができますか？

Answer 1

ItemsControlには、さまざまな量のものを表示できます。そのItemsSourceプロパティを表示したいもののコレクションにバインドし、そのItemTemplateプロパティを使用して表示方法を決定します。

ここでは、微調整が可能な大まかな実装を示します。特にTickConverterはIMultiValueConverterで、Minimum,Maximum、TickFrequencyはMultiBindingで別途バインドする必要があります。そうすれば、これらのプロパティーが変更されたときに自動的に再呼び出しされます。

public class TickConverter : IValueConverter 
{ 
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     var slider = (Slider)value; 

     var tickOffsets = new List<double>(); 

     var sliderRange = (slider.Maximum - slider.Minimum); 

     var tickcount = (int)Math.Floor(sliderRange/slider.TickFrequency); 

     return Enumerable.Range(0, tickcount); 
    } 

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

テンプレート：

<ControlTemplate TargetType="{x:Type Slider}" x:Key="SliderHorizontal"> 
    <ControlTemplate.Resources> 
     <local:TickConverter x:Key="TickConverter" /> 
    </ControlTemplate.Resources> 
    <Grid Height="4"> 
     <Border x:Name="TrackBackground"> 
      <Rectangle 
       x:Name="PART_SelectionRange" 
       HorizontalAlignment="Left" 
       Margin="0 0 16 0" 
       Visibility="Hidden" 
       /> 
     </Border> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*" /> 
       <ColumnDefinition Width="Auto" /> 
      </Grid.ColumnDefinitions> 
      <ItemsControl 
       Grid.Column="0" 
       ItemsSource="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource TickConverter}}" 
       > 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <!-- UniformGrid spaces items out evenly --> 
         <UniformGrid 
          Rows="1" 
          /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <!-- Align left to fill in start tick for each interval --> 
         <Ellipse 
          HorizontalAlignment="Left" 
          Fill="DeepSkyBlue" 
          Width="3" 
          Height="4" 
          /> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
      <!-- And add the end tick --> 
      <Ellipse 
       Grid.Column="1" 
       HorizontalAlignment="Left" 
       Fill="DeepSkyBlue" 
       Width="3" 
       Height="4" 
       /> 
     </Grid> 
     <!-- 
     I don't know what you were doing with the thumb, but you didn't ask about it 
     so I just ignored it. 
     --> 
     <Track x:Name="PART_Track" /> 
    </Grid> 
</ControlTemplate>