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> 

到目前爲止我的代碼讓我當它不使用省略號的固定ammount的，看起來很糟糕不匹配由滑塊表示的值。

我是新來的WPF，所以我不知道從代碼隱藏做到這一點會帶來什麼。我可以簡單地創建一個從Slider繼承的類並在那裏添加Ellipses？如果是這樣，我可以做一個簡單的例子嗎？

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>